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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Плоский
• 2D
• Винтаж
• Призрак
• Ссылка на сайт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Способ 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');
}

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

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

Если вы хотите изменить цвет кнопки «Добавить в корзину», вам потребуется добавить пользовательский CSS. Вы можете сделать это, выбрав « Внешний вид» «Настроить» «Дополнительный 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.

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

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

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