За да променим цвета на бутоните на WooCommerce, трябва да променим или заменим файла по подразбиране style.css на бутоните. За целта ще трябва да добавим a персонализиран CSS код на нашите детска тема WordPress.

Има два начина да направите това:

• Добавете персонализиран CSS към файла с детска тема style.css
• Използвайте някои приставки, за да инжектирате персонализиран CSS код във вашите уеб страници.

Стъпка 1: Инсталирайте Simple Custom CSS плъгин в WordPress и го активирайте

Ще използваме a WordPress плъгин за инжектиране на CSS кода на страниците на a 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: Hover, .woocommerce button.button: Hover, .woocommerce input.button: Hover, .woocommerce-страница # щастлива input.button: мишката, вход .woocommerce-страница #respond # представят: мишката, .woocommerce-страница a.button: мишката, .woocommerce-страница button.button: мишката, .woocommerce-страница input.button: навъртам {фон :! червен важно; фон-цвят: червен важно; ! Цвят: бяло важно; текст-сянка:! прозрачен важно; кутия-сянка: няма; гранично-цвят:! #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 важно; }

Вече можете да получите достъп до вашия онлайн магазин, ще забележите, че бутоните всъщност са променили цветовете.

За да персонализирате цвета на бутоните, за да имате най-накрая вида, който искате,

Замяна на свойството " обратно: важно! От a цвят по ваш избор. Актуализирайте кодовете и отворете отново вашия онлайн магазин. Всъщност, използвайки стила, който току-що ви предоставихме, ще можете напълно да промените структурата на бутоните.

С малко проучване ще можете да създадете уникални бутони със стил, който отговаря на вашия 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", sans-serif; шрифта: 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 Възстановяване на изоставени Cart ще можете да се свържете с тях, да им напомните какво са закупили и да ги поканите да завършат своите действия.

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

Изтегляне | демонстрация | уеб хостинг

2. Приставка за бутон за скриване на цена и добавяне в кошницата на WooCommerce

Приставката за скриване на цени на WooCommerce позволява на търговците да създават множество правила, за да скрият цените или да скрият бутона „добавяне в количката“ от невлезли клиенти или потребители, които имат определени права за достъп до вашия уебсайт за електронна търговия.

Можете да скриете цената и бутона "добави в количката" на определени продукти или в определени категории. Можете да ги замените с персонализиран текст или бутон, който ще ги отведе до  Формуляр за връзка, Можете да създадете колкото се може повече правила, които автоматично да скрият цената и „ Добавяне към паниr ”в зависимост от това, което искате.

Изтегляне | демонстрация | уеб хостинг

3. WooCommerce валутен превключвател

Този плъгин ви позволява да превключвате цените на продуктите от една валута в друга в реално време.

Това е особено важно при електронната търговия, защото е насочена към целия свят. Този плъгин гарантира, че независимо къде се намират вашите клиенти, те винаги ще могат да поръчват от вашия онлайн магазин.

Изтегляне | демонстрация | уеб хостинг

Препоръчителни ресурси

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

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

Заключение

Ето го ! Това е всичко за този урок, посветен на персонализирането на бутоните Добави в кошницата от WooCommerce. Не се колебайте да го споделите с приятелите си на вашия социални мрежи предпочитани. 

Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress.

Но междувременно ни кажете за вашите Връзка и предложения в специалния раздел.

...