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

Чтобы изменить цвет кнопок 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 Скрыть цену и добавить в корзину Button Plugin

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

...