Ak chcete zmeniť farbu tlačidiel WooCommerce, musíme zmeniť alebo nahradiť predvolený súbor tlačidiel style.css. Aby sme to dosiahli, budeme musieť pridať a vlastný kód CSS k nášmu detská téma WordPress.

Existujú dva spôsoby, ako to urobiť:

  • Pridajte vlastný súbor CSS do podradeného súboru style.css
  • Pomocou niektorých doplnkov môžete na svoje webové stránky vložiť vlastný kód CSS.

Krok 1: Nainštalujte plugin na WordPress jednoduchý vlastné CSS a aktivovať

Použijeme a WordPress Plugin na vloženie kódu CSS na stránky a WooCommerce Online Shop, Doplnok si môžete stiahnuť: Jednoduché Custom CSS

Môžete si prečítať našu príručku inštalácia a aktivácia pluginu WordPress.

Po aktivácii pluginu sa do ponuky pridá nová podponuka apparence :

Custom CSS Menu WordPress plugin

Prístupom do tejto sekcie sa dostanete do rozhrania s textovým poľom, kde môžete zadať vlastný kód CSS.

Interface WordPress Plugin Jednoduché Vlastné CSS

Do textového poľa vložte nasledujúci CSS a kliknite na „ Aktualizácia Custom CSS„.

.woocommerce #content input.button.alt: vznášať sa, .woocommerce #respond vstup # submit.alt: vznášať sa, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-stranový #content input.button.alt: vznášať sa, .woocommerce-stranový vstup #respond # submit.alt: vznášať sa, .woocommerce-stranový a.button.alt: vznášať sa, tlačidlo .woocommerce-stránky. button.alt: hover, .woocommerce-stranový input.button.alt: vznášať {background: red významné; background-color :! red dôležitá; ! Farba: biela dôležitá; text-shadow :! transparentný dôležitá; box-shadow: none; border-color :! #ca0606 dôležitá; } .woocommerce #content Input.button: vznášať sa, .woocommerce #respond vstupné # predloží: vznášať sa, .woocommerce a.button: vznášať sa, .woocommerce button.button: vznášať sa, .woocommerce input.button: vznášať sa, .woocommerce-stranový # happy input.button: vznášať sa, .woocommerce-input #respond # predloží: vznášať sa, .woocommerce-page a.button: vznášať sa, .woocommerce-page button.button: vznášať sa, .woocommerce-page input.button: hover {pozadia :! red dôležitá; background-color :! red dôležitá; ! Farba: biela dôležitá; text-shadow :! transparentný dôležitá; box-shadow: none; border-color :! #ca0606 dôležitá; } .woocommerce #content Input.button, .woocommerce #respond vstupné # predloží .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-stranový #content input.button, .woocommerce-stranový # # podať vstup reaguje, .woocommerce-stranový a.button, .woocommerce-stranový button.button, .woocommerce-stranový input.button {background: red významné; ! Farba: biela dôležitá; text-shadow :! transparentný dôležitá; border-color :! #ca0606 dôležitá; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond vstup # submit.alt: vznášať sa, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-stranový #content input.button.alt: vznášať sa, .woocommerce-stranový vstup #respond # submit.alt: vznášať sa, .woocommerce-stranový a.button.alt: vznášať sa, tlačidlo .woocommerce-stranový .button.alt: hover, .woocommerce-stranový input.button.alt: vznášať {background: red významné; box-shadow: none; text-shadow :! transparentný dôležitá; ! Farba: biela dôležitá; border-color :! #ca0606 dôležitá; }

Teraz máte prístup do svojho internetového obchodu, všimnete si, že tlačidlá skutočne zmenili farby.

Ak chcete prispôsobiť farbu tlačidiel, aby ste nakoniec dosiahli požadovaný vzhľad,

Vymeniť vlastníctvo “ zázemie: červená dôležité! Autor: a Farba podľa vlastného výberu. Aktualizujte kódy a znova vstúpte do svojho online obchodu. V skutočnosti pomocou štýlu, ktorý sme vám práve poskytli, budete môcť úplne zmeniť štruktúru tlačidiel.

S trochou prieskumu budete môcť vytvoriť jedinečné tlačidlá so štýlom, ktorý sa hodí k vám WordPress tému (najmä ak tento server nie je kompatibilný s WooCommerce).

pridať do košíka tlačidlo WordPress

V nasledujúcom príklade môžete použiť nasledujúci kód CSS.

.woocommerce #content input.button, .woocommerce #respond vstupné # predloží .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce stránkový #content input.button, .woocommerce-page #respond # podať vstup, .woocommerce stránkový a.button, .woocommerce stránkový button.button, .woocommerce stránkový input.button {background-color: #6fba26; padding: 10px; Pozícia: relatívna; font-family: 'Otvorené Sans' sans-serif; font-size: 12px; text-decoration: none; Farba: #fff; background-image: lineárny gradient (dolná, RGB (100,170,30) 0% RGB (129,212,51) 100%); box-shadow: vložka 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce #content input.button.alt: vznášať, .woocommerce #respond vstup # submit.alt: vznášať, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce stránkový #content input.button.alt: vznášať sa, .woocommerce stránkový vstup #respond # submit.alt: vznášať sa, .woocommerce stránkový a.button.alt: vznášať sa, tlačidlo .woocommerce stránkový .button.alt: vznášať, .woocommerce stránkový input.button.alt: vznášať {horná: 7px; background-image: lineárny gradient (dolná, RGB (100,170,30) 100% RGB (129,212,51) 0%); box-shadow: vložka 0px 1px 0px #0D496F, vložka 0px -1px 0px #0D496F; Farba: #156785; text-shadow: 0px 1px 1px RGBA (255,255,255,0.3); Súvislosti: rgb (44,160,202); }

Pre tých, ktorí chcú optimalizovať výkonnosť svojho internetového obchodu, či už ide o konverziu alebo predaj produktov,

Ponúkame tiež prémiové doplnky WordPress 3 určené pre túto úlohu.

1. WooCommerce obnoviť opustený košík

vaši zákazníci často plnia svoje koše a nechávajú ich: vďaka WooCommerce Obnoviť Opustené košík budete ich môcť kontaktovať, pripomenúť im, čo si kúpili, a pozvať ich, aby dokončili svoje akcie.

Obnovte opustený košík pre woocommerce

Nastavte časový interval medzi opustením košíka a odoslaním prispôsobeného e-mailu s pripomienkou zákazníkovi s priamym odkazom na stránku nákupu, aby ste zistili, na čom bol. bod kúpiť.

Stiahnuť | demo | web hosting

2. WooCommerce Skryť cenu a pridať do košíka doplnok pre tlačidlá

Doplnok Skryť ceny WooCommerce umožňuje obchodníkom vytvoriť viac pravidiel na skrytie cien alebo skrytie tlačidla „pridať do košíka“ pred neprihlásenými zákazníkmi alebo používateľmi, ktorí majú určité prístupové práva na váš web elektronického obchodu.

Woocommerce skryť cenu pridať do košíka tlačidlo plugin skryť podľa užívateľských rolí

Pri určitých produktoch alebo v konkrétnych kategóriách môžete skryť cenu a tlačidlo „pridať do košíka“. Môžete ich nahradiť vlastným textom alebo tlačidlom, ktoré ich prenesie do  Kontaktný formulár, Môžete vytvoriť toľko pravidiel, ktoré automaticky skryjú cenu a „ Pridať do panier “podľa toho, čo chcete.

Stiahnuť | demo | web hosting

3. WooCommerce Currency Switcher

Tento doplnok umožňuje prepínať ceny produktov z jednej meny na inú v reálnom čase.Prepínač meny Woocommerce

To je obzvlášť dôležité v elektronickom obchode, pretože je zameraný na celý svet. Tento doplnok zaisťuje, že bez ohľadu na to, kde sa vaši zákazníci nachádzajú, vždy si budú môcť objednať z vášho online obchodu.

Stiahnuť | demo | web hosting

Odporúčané zdroje

Objavte ďalšie odporúčané zdroje, ktoré vám pomôžu optimalizovať výkon vášho internetového obchodu. 

záver

Tu je! To je všetko pre tento tutoriál venovaný prispôsobeniu tlačidiel Pridať do košíka od spoločnosti WooCommerce. Neváhajte ho zdieľať so svojimi priateľmi vo svojom sociálne siete prednostné. 

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.

Medzitým nám ale povedz niečo o svojom Komentáre a návrhy vo vyhradenej sekcii.

...