Как создать кнопку WooCommerce «Добавить в корзину» по идентификатору продукта

Опубликовано: 2021-02-24

woocommerce добавить кнопку в корзину по идентификатору продукта WiIt можно создать кнопку добавления в корзину WooCommerce по идентификатору продукта и использовать кнопку в формах, виджетах, сообщениях или страницах и даже в шаблонах. В идеале кнопку добавления в корзину WooCommerce можно настроить так, чтобы она соответствовала широкому спектру пользовательских параметров.

Кнопка добавления в корзину WooCommerce по идентификатору продукта

В предыдущем посте я объяснил, как изменить кнопку добавления в корзину WooCommerce на ссылку, а также как изменить кнопку добавления в корзину WooCommerce, чтобы узнать больше.
Это другие предыдущие руководства, которые помогут вам узнать больше о том, как настроить кнопку добавления в корзину WooCommerce:

  • Как заменить кнопку «Добавить в корзину» ссылкой WooCommerce
  • Как скрыть кнопку «Подробнее» и «Добавить в корзину» WooCommerce
  • Как изменить текст кнопки «Добавить в корзину» на странице магазина WooCommerce
  • Как изменить текст «Добавить в корзину» Руководство по WooCommerce с примерами
  • Как программно добавить товар в корзину в WooCommerce
  • Как изменить уведомление WooCommerce «Добавлено в корзину»
  • Как скрыть цену и добавить в корзину для вышедших из системы пользователей WooCommerce

Как видно из приведенного выше списка руководств, есть несколько способов настроить кнопку добавления в корзину WooCommerce, чтобы помочь вам создать различные макеты контента или дизайн.

Например, если вы хотите создать таблицу цен WooCommerce, вам может потребоваться создать кнопки добавления в корзину, которые вы можете добавить к кнопке призыва к действию в таблице цен.

Кнопка добавления в корзину WooCommerce по идентификатору продукта

Создайте простую кнопку WooCommerce «Добавить в корзину» по идентификатору продукта

Чтобы создать кнопку добавления в корзину WooCommerce по идентификатору продукта, вам необходимо знать идентификатор продукта для конкретного продукта, для которого вы хотите создать кнопку добавления в корзину. Идентификатор продукта можно легко найти на странице обзора всех продуктов, как описано в этом руководстве «Как получить идентификатор продукта WooCommerce» .

Добавить в корзину Ссылка

Теперь вы можете создать URL-адрес добавления корзины, который вы не будете добавлять в код кнопки в том месте, где вы хотите отобразить кнопку. В этом случае вы можете создать простую ссылку «Добавить товар в корзину», как показано в коде ниже:

https://example.com/?add-to-cart=840

URL-адрес вашего сайта должен заменить часть URL-адреса example.com, а идентификатор конкретного продукта должен заменить идентификатор продукта 840, используемый в приведенном выше примере.

Вы можете добавить это в код кнопки HTML, как в коде ниже:

Создайте простой продукт с помощью кнопки WooCommerce «Добавить в корзину» по идентификатору продукта

Вы также можете добавить количество к URL-адресу добавления в корзину, и вы можете сделать это, используя различные параметры URL-адреса, которые используются для добавления логики к URL-адресам.

В этом случае вы можете расширить код, который мы создали на шаге выше, и создать простую кнопку добавления продукта WooCommerce в корзину по идентификатору продукта с количеством 2 следующим образом:

https://example.com/?add-to-cart=840&quantity=2

Как видите, мы добавили знак амперсанда и слово количество и приравняли его к 2 количеству товаров, которые мы хотим добавить в корзину при нажатии кнопки того же товара.

Чтобы добавить этот URL-адрес в код HTML и создать кнопку добавления в корзину WooCommerce по идентификатору продукта с количеством, вы должны использовать код ниже:

Создайте кнопку добавления в корзину WooCommerce по идентификатору продукта с перенаправлением в корзину

Чтобы облегчить покупателям вашего магазина WooCommerce навигацию по вашему сайту, очень важно создать переадресацию. В прошлом я выделял множество способов создания перенаправлений WooCommerce.

Примечательно, что я поделился в этих сообщениях в блоге — WooCommerce создает перенаправление после оформления заказа и перенаправление WooCommerce после выхода из системы и даже создал плагин перенаправления WooCommerce после оформления заказа , чтобы помочь вам реализовать перенаправление после оформления заказа.

WooCommerce перенаправляет в корзину после добавления в корзину

Вы также можете создать перенаправление в корзину с помощью кнопки добавления в корзину WooCommerce по идентификатору продукта. Вы можете сделать это, изменив код, которым я поделился на шаге выше, следующим образом:

https://example.com/cart/?add-to-cart=840

Как видите, мы добавили корзину к URL -адресу, чтобы пользователь перенаправлялся в корзину после добавления товара в корзину. Полный код с HTML-кодом кнопки выглядит следующим образом:

WooCommerce перенаправляет на кассу после добавления в корзину

Вы также можете создать перенаправление на оформление заказа с помощью кнопки добавления в корзину WooCommerce по идентификатору продукта. Вы можете сделать это, изменив код, которым я поделился на шаге, добавив проверку по URL-адресу выше, чтобы он выглядел следующим образом:

https://example.com/checkout/?add-to-cart=840

Как видите, мы добавили оформление заказа в URL -адрес, чтобы пользователь перенаправлялся на оформление заказа после добавления товара в корзину. Полный код с HTML-кодом кнопки выглядит следующим образом:



Вывод

В этом уроке мы выделили различные способы создания кнопки добавления в корзину WooCommerce по идентификатору продукта. Мы также увидели, как добавить перенаправление к кнопке добавления в корзину, а также как добавить количество продукта к добавлению. кнопка в корзину.

Я надеюсь, что теперь вы можете создать кнопку добавления в корзину WooCommerce по идентификатору продукта и использовать ее в таблице цен, формах и в шаблонах. Вы также можете дополнительно настроить кнопку «Добавить в корзину», используя класс кнопки, который я добавил в приведенный выше код. Если вы все еще настраиваете свой сайт, вы можете воспользоваться идеями, которыми я поделился в Ultimate WooCommerce Hide Guide.

Для пользователей WooCommerce, у которых установлена тема Storefront и которые хотят ее дополнительно настроить, я поделился блестящей коллекцией из 80+ советов по настройке темы WooCommerce Storefront , которые помогут вам создать индивидуальный вид вашего сайта с помощью темы WooCommerce по умолчанию — Storefront .

Похожие статьи

  1. Как создать поля условной проверки WooCommerce
  2. Как создать шорткод для входа в WooCommerce
  3. Как изменить цвет кнопки Storefront Theme
  4. Как получить название продукта WooCommerce
  5. Как скрыть цену и добавить в корзину для вышедших из системы пользователей WooCommerce
  6. Как скрыть кнопку обновления корзины на странице корзины WooCommerce
  7. Как заменить кнопку «Добавить в корзину» ссылкой WooCommerce
  8. Как скрыть цену, если она равна нулю в WooCommerce
  9. Как создать дочернюю тему WooCommerce Storefront [Полное руководство]
  10. Как скрыть параметр администратора WooCommerce Marketing Hub
  11. Как получить идентификатор продукта на странице оформления заказа или странице заказа в WooCommerce
  12. Как получить информацию о заказе после оформления заказа в WooCommerce
  13. Как перенаправить в корзину после входа в WooCommerce
  14. Как добавить перенаправление страницы моей учетной записи WooCommerce
  15. Объяснение хука перенаправления входа в WooCommerce на примере
  16. Как временно отключить кассу в WooCommerce
  17. Как настроить блог магазина WooCommerce