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

Есть два способа сделать это:

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

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

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

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

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

Доступ к этому разделу приведет вас к интерфейсу с текстовым полем, где вы можете ввести собственный код 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 важно; }

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

Чтобы настроить цвет кнопок, чтобы они наконец приобрели желаемый вид,

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

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

В следующем примере вы можете использовать следующий код 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 Восстановление Заброшенные Корзина вы сможете связаться с ними, напомнить им о том, что они купили, и предложить им завершить свои действия.

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

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

2. WooCommerce Скрыть цену и плагин кнопки "Добавить в корзину"

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

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

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

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

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

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

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

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

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

• 50 WooCommerce плагины для улучшения вашего интернет-магазина
• 9 WordPress плагины для создания партнерской программы
• Плагины 9 WooCommerce для улучшения атрибутов ваших переменных продуктов
• 5 WordPress плагины для визуального редактирования CSS в вашем блоге

Заключение

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

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

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

... 

Блэр Jersyer

Разработчик WordPress, увлеченный всем, что связано с новыми технологическими тенденциями. Авторы плагинов, Темы WordPress и другие веб-приложения. Автор на BlogPasCher.com.

Посмотреть полную биографию