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

Опубликовано: 2022-08-11

Хотите узнать, как добавить пользовательскую кнопку «Добавить в корзину» в WooCommerce?

Настройка кнопок в вашем магазине WooCommerce может помочь вам привлечь внимание, повысить коэффициент конверсии и продажи.

В этой статье мы покажем вам, как шаг за шагом добавить пользовательскую кнопку «Добавить в корзину» в WooCommerce.

Зачем настраивать кнопку добавления в корзину WooCommerce?

Редактирование кнопки «Добавить в корзину» поможет вам привести ее в соответствие с продуктами WooCommerce, которые вы продаете. Если вы придерживаетесь кнопки корзины по умолчанию, это может быть совершенно не связано с типом продукта.

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

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

Чтобы сделать что-либо из вышеперечисленного, вам понадобится способ легко настроить кнопку «Добавить в корзину» с минимальными усилиями.

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

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

  • Способ 1: добавьте пользовательскую кнопку «Добавить в корзину» с помощью SeedProd
    • Способ 2: добавьте пользовательскую кнопку «Добавить в корзину» с кодом

      Способ 1: добавьте пользовательскую кнопку «Добавить в корзину» с помощью SeedProd

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

      SeedProd — конструктор сайтов на WordPress.

      Этот мощный плагин включает в себя конструктор страниц с возможностью перетаскивания, который позволяет настраивать любую часть вашего веб-сайта без кода. Вы можете создавать собственные темы WordPress, создавать целевые страницы с высокой конверсией и настраивать любой макет с помощью «укажи и щелкни».

      Поскольку SeedProd включает поддержку WooCommerce, вы можете использовать его для разработки и запуска целых сайтов WooCommerce без разработчика. Выполните следующие шаги, чтобы использовать SeedProd для добавления пользовательской кнопки «Добавить в корзину» на ваш сайт WooCommerce.

      Шаг 1. Установите и активируйте SeedProd

      Сначала перейдите на страницу цен SeedProd и выберите свой план SeedProd. Для доступа к функциям WooCommerce вам понадобится план SeedProd Elite .

      Затем войдите в свою учетную запись SeedProd, перейдите на вкладку « Загрузки » и загрузите ZIP-файл плагина. Вы также можете скопировать лицензионный ключ на той же странице.

      Найдите свой лицензионный ключ SeedProd

      Теперь вы можете загрузить плагин на свой сайт WordPress. Если вам нужна помощь в этом, следуйте этому руководству по установке и активации плагина WordPress.

      После установки SeedProd перейдите на страницу SeedProd » Settings и вставьте лицензионный ключ, который вы сохранили ранее.

      введите ваш лицензионный ключ

      Убедитесь, что вы нажали кнопку « Подтвердить ключ », прежде чем переходить к следующему шагу.

      Примечание. SeedProd позволяет добавлять настраиваемые кнопки «Добавить в корзину» в WooCommerce двумя способами:

      • Использование целевой страницы
      • Создание пользовательской темы WooCommerce

      Для этого руководства мы создадим пользовательскую тему WooCommerce, поскольку она автоматически создает все страницы вашего магазина WooCommerce.

      Шаг 2. Выберите комплект для веб-сайта

      Для следующего шага перейдите на страницу SeedProd » Theme Builder . Здесь вы можете создавать различные части вашей темы WooCommerce и настраивать дизайн каждого шаблона.

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

      Чтобы выбрать набор веб-сайтов, нажмите кнопку « Темы ».

      выбрать набор для сайта seedprod

      На следующем экране вы увидите доступные наборы веб-сайтов. Наборы, совместимые с WooCommerce, будут иметь «WooCommerce» рядом с их названиями.

      наборы веб-сайта seedprod

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

      Выберите набор для веб-сайта seedprod

      Для этого руководства мы используем веб-сайт Pottery Shop WooCommerce .

      После импорта веб-сайта вы увидите отдельные части своей темы в виде списка:

      Части шаблона комплекта веб-сайта

      SeedProd автоматически создает страницы с контентом, такие как страницы «О нас», «Корзина», «Оформление заказа» и «Контакты». Вы можете просмотреть эти страницы, перейдя в Страницы » Все страницы на панели управления WordPress и настроить их с помощью конструктора страниц SeedProd с функцией перетаскивания.

      Страницы с содержанием комплекта веб-сайта

      Давайте начнем процесс настройки, настроив кнопку добавления в корзину WooCommerce.

      Шаг 3. Настройте кнопку «Добавить в корзину»

      Ниже мы покажем вам, как добавить пользовательскую кнопку «Добавить в корзину» в WooCommerce на страницах «Магазин», «Продукт», «Архив продуктов» и «Блог».

      Добавление кнопки «Добавить в корзину» на пользовательской странице магазина

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

      Редактировать страницу магазина woocommerce

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

      Страница магазина WooCommerce в конструкторе SeedProd

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

      По умолчанию в шаблоне страницы магазина используется блок « Сетка товаров ». Нажав на нее, вы увидите настройки, позволяющие контролировать внешний вид ваших списков продуктов.

      Настройки блока сетки товаров seedprod

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

      Вы также можете щелкнуть вкладку « Дополнительно », чтобы увидеть дополнительные параметры настройки, включая стили шрифтов, цвета, границы и многое другое.

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

      В разделе «Кнопки» вы можете настроить кнопку добавления в корзину WooCommerce несколькими щелчками мыши. Например, в раскрывающемся списке «Стиль кнопки» вы можете выбрать:

      • Плоский
      • 2D
      • Винтаж
      • Призрак
      • Ссылка на сайт
      добавить в корзину настройки цвета кнопки

      Кроме того, вы можете изменить цвет кнопки, типографику, размер и радиус границы.

      Поэкспериментируйте с параметрами настройки, чтобы найти внешний вид, соответствующий потребностям вашего бизнеса. Затем нажмите кнопку « Сохранить » в правом верхнем углу, чтобы сохранить изменения, и нажмите значок «X», чтобы вернуться в конструктор тем.

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

      Теперь давайте рассмотрим настройку кнопки «Добавить в корзину» на страницах отдельных товаров. Вам нужно будет найти шаблон страницы продукта и щелкнуть ссылку « Редактировать дизайн» , чтобы открыть его.

      Изменить страницу продукта WooCommerce

      На этот раз вы увидите информацию об одном продукте в визуальном редакторе SeedProd.

      Одна страница товара в визуальном редакторе SeedProd

      По умолчанию он будет отображать:

      • Изображение продукта
      • Название продукта
      • Цена продукта
      • Краткое описание
      • Кнопка "Добавить в корзину"
      • Вкладки с данными о продукте

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

      Настроить текст кнопки «Добавить в корзину» в woocommerce

      Вы также можете изменить выравнивание кнопок и добавить значок из библиотеки значков Font Awesome.

      Добавить значки для кнопки добавления в корзину

      Вкладка « Дополнительно » позволит вам изменить цвета кнопок, типографику, тени и интервалы, как и раньше.

      Расширенные настройки кнопки добавления в корзину

      Редактирование кнопки «Корзина архивов продуктов»

      Изменение кнопки «Добавить в корзину» в «Архиве продуктов» происходит аналогично процессу на странице вашего магазина. Просто найдите часть шаблона Product Archives и щелкните ссылку Edit Design , чтобы открыть ее в визуальном редакторе.

      Редактировать архивы товаров в woocommerce

      Блок, который SeedProd использует на этой странице, — это блок Archive Products . Пользователи увидят эту страницу, если щелкнут заголовок категории продукта или воспользуются строкой поиска вашего магазина.

      Этот блок не будет отображать предварительный просмотр в живом визуальном редакторе; тем не менее, вы все равно можете настроить то, что блок показывает во внешнем интерфейсе, открыв его настройки.

      Настройки блока архивов товаров

      Например, вы можете изменить количество столбцов, отобразить элементы по количеству и упорядочить по фильтру. Кроме того, вы можете включить фильтрацию по запросу, например:

      • Запрос по атрибуту
      • Выбрать по тегам
      • Выберите по категории
      • Выберите по артикулу продукта
      • Выбрать по группе
      • Выбрать по видимости

      Затем на вкладке « Дополнительно » вы можете настроить кнопку «Добавить в корзину», изменив ее цвет, шрифт, интервал, размер и многое другое.

      Архив товаров добавить в корзину настройки кнопки

      Добавление пользовательской кнопки «Добавить в корзину» на страницу блога

      Страница вашего блога — это еще одно место, где вы можете отобразить кнопку «Добавить в корзину». Таким образом, вы можете рекомендовать продукты после сообщений в блоге, чтобы увеличить продажи.

      Чтобы сделать это с помощью SeedProd, найдите шаблон страницы блога и щелкните ссылку « Изменить дизайн» .

      Редактировать страницу блога woocommerce

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

      Страница блога в конструкторе перетаскивания страниц seedprod

      Давайте добавим на эту страницу раздел, демонстрирующий новый продукт. Сначала перетащите блок столбцов на страницу и выберите макет столбца.

      добавить макет столбца на страницу блога

      Затем выберите блок « Изображение » и добавьте изображение продукта.

      Добавить блок изображения на страницу блога

      Во втором столбце вы можете использовать блоки « Заголовок » и « Абзац » для названия и описания вашего продукта. Затем перетащите кнопку « Добавить в корзину », чтобы пользователи могли добавить товар в свою корзину.

      как добавить пользовательскую кнопку добавления в корзину в блоге woocommerce

      Теперь щелкните блок, чтобы открыть его настройки, и добавьте собственный текст кнопки «Добавить в корзину».

      Вам также понадобится идентификатор продукта для этого конкретного продукта. Вы можете найти его, перейдя в « Продукты» Все продукты на панели инструментов WordPress и скопировав значение идентификатора.

      Идентификатор продукта WooCommerce

      После этого вы можете вставить идентификатор в поле «Идентификатор продукта» на кнопке «Добавить в корзину». Это гарантирует, что конкретный продукт будет добавлен в вашу корзину после нажатия URL-адреса «Добавить в корзину».

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

      Не забудьте нажать кнопку Сохранить , чтобы сохранить изменения.

      Шаг 4. Сохраните и опубликуйте свои изменения

      Когда вы довольны тем, как выглядят ваши страницы WooCommerce, вы готовы запустить свой магазин. Для этого вернитесь в конструктор тем и в правом верхнем углу установите переключатель « Включить тему SeedProd» в положение «Вкл.».

      включить тему seedprod

      Давайте взглянем на некоторые страницы, которые мы настроили:

      Страница магазина

      Как добавить пользовательскую кнопку «Добавить в корзину» на странице магазина WooCommerce

      Страница продукта

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

      Архивная страница

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

      Страница блога

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

      Способ 2: добавьте пользовательскую кнопку «Добавить в корзину» с кодом

      Следующий метод, который мы вам покажем, включает в себя изменение кода на вашем веб-сайте WordPress. Обычно мы не рекомендуем делать это, если вы новичок, потому что это может сломать ваш сайт.

      Тем не менее, мы понимаем, что некоторые люди не хотят полностью перезаписывать свой существующий дизайн веб-сайта.

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

      Поскольку для этого метода мы будем обрабатывать фрагменты кода, рекомендуется установить плагин для фрагментов кода, например WPCode. Это означает, что вам не нужно напрямую редактировать файлы темы.

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

      Изменить текст кнопки «Добавить в корзину» на страницах товаров

      Во-первых, мы рассмотрим изменение текста кнопки «Добавить в корзину» в WooCommerce. Например, вы можете изменить текст кнопки на «Купить этот товар».

      Для этого создайте собственный фрагмент кода в WPCode и вставьте следующий код PHP:

      add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
      function SP_customize_add_to_cart_button_woocommerce(){
      return __('Buy this item', 'woocommerce');
      }
      
      Пользовательский фрагмент кода кнопки добавления в корзину WooCommerce

      Сохраните изменения, после чего при просмотре одного продукта вы увидите новый текст кнопки «Добавить в корзину».

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

      Изменить цвет кнопки «Добавить в корзину»

      Если вы хотите изменить цвет кнопки «Добавить в корзину», вам потребуется добавить пользовательский CSS. Вы можете сделать это, выбрав « Внешний вид» «Настроить» «Дополнительный CSS» на панели управления WordPress.

      Добавьте CSS в свой настройщик WordPress, чтобы изменить цвет кнопки

      Теперь вставьте следующий код CSS:

      .single-product .product .single_add_to_cart_button.button {
      background-color: #FF0000;
      color: #C0C0C0;
      }
      

      Вы можете сделать то же самое для своих страниц архива продуктов, вставив следующий фрагмент кода CSS:

      .woocommerce .product .add_to_cart_button.button {
      background-color: #FF0000;
      color: #C0C0C0;
      }
      
      настроить страницу магазина woocommerce добавить цвет кнопки в корзину

      Вот оно!

      Мы надеемся, что эта статья помогла вам узнать, как добавить пользовательскую кнопку «Добавить в корзину» в WooCommerce.

      Вам также может понравиться этот пост: Как редактировать меню в WordPress для пользовательской навигации.

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

      Начните работу с SeedProd сегодня

      Спасибо за чтение. Следите за нами на YouTube, Twitter и Facebook, чтобы получать больше полезного контента для развития вашего бизнеса.