Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Чтобы изменить цвет кнопок WooCommerce, нам нужно изменить или заменить файл кнопок style.css по умолчанию. Для этого нам нужно будет добавить пользовательский код CSS к нашему детская тема WordPress.

Есть два способа добраться туда:

  • Добавьте пользовательский CSS в файл style.css дочерней темы.
  • Используйте некоторые плагины, чтобы добавить пользовательский код CSS на ваши веб-страницы.

Шаг 1: Установите плагин на WordPress простой пользовательский CSS и активировать его

Мы будем использовать плагин WordPress для вставки кода CSS на страницы Интернет-магазин WooCommerce, Вы можете скачать плагин: Простой Пользовательский CSS

Вы можете прочитать наш учебник на WordPress установки плагинов и активация.

После активации плагина в меню будет добавлено новое подменю. apparence :

Пользовательские CSS меню WordPress плагин

Доступ к этому разделу приведет вас к интерфейсу с текстовым полем, где вы можете ввести пользовательский код CSS.

Интерфейс WordPress плагин Simple Custom CSS

Поместите следующий CSS в текстовое поле и нажмите « Обновление пользовательских CSS».

.woocommerce #content input.button.alt: парить, .woocommerce #respond вход # submit.alt: парить, .woocommerce a.button.alt: Hover, .woocommerce button.button.alt: Hover, .woocommerce input.button. Alt: парить, .woocommerce-страницы #content input.button.alt: наведите курсор мыши, ввод .woocommerce-страницы #respond # submit.alt: парить, .woocommerce-страницы a.button.alt: парить, кнопку .woocommerce-страницы. button.alt: парить, .woocommerce-страницы input.button.alt: парение {фон: красный значительным; цвет фона: красный важно; ! Цвет: белый важно; Текст-тень: прозрачный важно; коробка-тень: нет; граница цвета: #ca0606 важно; } .woocommerce #content Input.button: парить, входные .woocommerce #respond # отправить: парить, .woocommerce a.button: парения, .woocommerce button.button: парения, .woocommerce input.button: парения, .woocommerce-страница # счастливым input.button: парить, вход .woocommerce-страница #respond # отправить: парить, .woocommerce-страница a.button: парить, .woocommerce-страница button.button: парить, .woocommerce-страница input.button: Hover {фон : красный важно; цвет фона: красный важно; ! Цвет: белый важно; Текст-тень: прозрачный важно; коробка-тень: нет; граница цвета: #ca0606 важно; } .woocommerce #content Input.button, .woocommerce #respond вход # представить, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-страницы #content input.button, .woocommerce-страница # # отправить вход отвечает, .woocommerce-страницы a.button, .woocommerce-страницы button.button, .woocommerce-страница input.button {фон: красный значительным; ! Цвет: белый важно; Текст-тень: прозрачный важно; граница цвета: #ca0606 важно; } .woocommerce #content Input.button.alt: Hover, .woocommerce #respond вход # submit.alt: парить, .woocommerce a.button.alt: Hover, .woocommerce button.button.alt: Hover, .woocommerce input.button .alt: парить, .woocommerce-страницы #content input.button.alt: наведите курсор мыши, ввод .woocommerce-страницы #respond # submit.alt: парить, .woocommerce-страницы a.button.alt: парить, кнопка .woocommerce-страницы .button.alt: парить, .woocommerce-страницы input.button.alt: парение {фон: красный значительным; коробка-тень: нет; Текст-тень: прозрачный важно; ! Цвет: белый важно; граница цвета: #ca0606 важно; }

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Чтобы наконец настроить цвет кнопок, чтобы они выглядели так, как вы хотите,

Заменить недвижимость » Backgroud: красный важно! По цвет вашего выбора, Обновите коды и вернитесь в свой интернет-магазин. Фактически, используя только что предоставленный стиль, вы можете полностью изменить структуру кнопок.

После небольшого исследования вы сможете создавать уникальные кнопки в стиле, соответствующем вашей теме WordPress (особенно если она не совместима с WooCommerce).

добавить в корзину кнопку WordPress

В следующем примере вы можете использовать следующий код CSS.

.woocommerce #content input.button, .woocommerce #respond вход # представить, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-страничный #content input.button, .woocommerce-страница #respond # отправить вход, .woocommerce страницы a.button, .woocommerce-страницу button.button, .woocommerce страницы input.button {цвет фона: #6fba26; обивка: 10px; позиция: относительная; семейство шрифтов: 'Open Sans', без засечек; Размер шрифта: 12px; текст-отделка: нет; цвет: #fff; Фоновое изображение: линейный градиент-(нижний, RGB (100,170,30) 0% RGB (129,212,51) 100%); коробчатого тень: застегивается 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; границы радиус: 5px; } .woocommerce #content input.button.alt: парить, .woocommerce #respond вход # submit.alt: парить, .woocommerce a.button.alt: парения, .woocommerce button.button.alt: парения, .woocommerce input.button .alt: парить, .woocommerce страниц #content input.button.alt: парить, ввод .woocommerce-страничный #respond # submit.alt: парить, .woocommerce страниц a.button.alt: парить, кнопка .woocommerce-страницы .button.alt: парить, .woocommerce-страницы input.button.alt: парение {верхний: 7px; Фоновое изображение: линейный градиент-(нижний, RGB (100,170,30) 100% RGB (129,212,51) 0%); коробчатая тень: застегивается 0px 1px 0px #0D496F, застегивается 0px -1px 0px #0D496F; цвет: #156785; Текст-тень: 0px 1px 1px RGBA (255,255,255,0.3); фон: RGB (44,160,202); }

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

Мы также предлагаем премиальные плагины 3 для WordPress, предназначенные для этой задачи.

1. WooCommerce восстанавливает забытую корзину

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

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

скачать | Демонстрация | веб-хостинг

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

2. WooCommerce Скрыть цену и добавить в корзину Button Plugin

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

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

скачать | Демонстрация | веб-хостинг

3. Переключатель валют WooCommerce

Этот плагин позволяет переключать цены на товары из одной валюты в другую в режиме реального времени.

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

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [FREE]

Вывод

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

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

А пока расскажите нам о своем Комментарии и предложения в специальном разделе.

...

Эта статья содержит комментарии 8
  1. Привет,
    Может ли этот же плагин помочь мне изменить цвет звездочек "отзывы клиентов" на страницах продуктов woocommerce? заранее спасибо

    1. Привет,

      Вы должны использовать код CSS для этого. В противном случае, я рекомендую плагин Yellow Pencil, который вы можете скачать на Codecanyon.

  2. Ну, это фантастика, чтобы перевести часть кода с английского на итальянский. CSS полон ошибок! Но можем ли мы это сделать?

  3. Добрый вечер, у меня есть вопрос. Как окрасить цена изменяется в подкатегорию в WooCommerce ???

    Спасибо уже за ваш ответ.

    Нико

    1. Привет Нико,

      Многие премиальные темы предлагают эту опцию, в противном случае вы можете использовать CSS, чтобы настроить его.

      сердечно

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
3 акции
доля3
чирикать
Регистрация