Как настроить кнопку «Добавить в корзину» в 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.
А пока расскажите нам о своем Комментарии и предложения в специальном разделе.
...
Привет,
Может ли этот же плагин помочь мне изменить цвет звездочек "отзывы клиентов" на страницах продуктов woocommerce? заранее спасибо
Привет Беата,
Я никогда не пробовал и сомневаюсь, что это возможно.
Здравствуйте, а как увеличить размер кнопки Добавить в корзину? спасибо
Привет,
Вы должны использовать код CSS для этого. В противном случае, я рекомендую плагин Yellow Pencil, который вы можете скачать на Codecanyon.
Ну, это фантастика, чтобы перевести часть кода с английского на итальянский. CSS полон ошибок! Но можем ли мы это сделать?
извините
Добрый вечер, у меня есть вопрос. Как окрасить цена изменяется в подкатегорию в WooCommerce ???
Спасибо уже за ваш ответ.
Нико
Привет Нико,
Многие премиальные темы предлагают эту опцию, в противном случае вы можете использовать CSS, чтобы настроить его.
сердечно