Chcete-li změnit barvu tlačítek WooCommerce, musíme změnit nebo nahradit výchozí soubor style.css tlačítek. K tomu budeme muset přidat a vlastní kód CSS k našemu dětské téma WordPress.

Existují dva způsoby, jak toho dosáhnout:

• Přidejte vlastní soubor CSS do podřízeného souboru theme.css
• Pomocí některých pluginů můžete do svých webových stránek vložit vlastní kód CSS.

Krok 1: Nainstalujte plugin Simple Custom CSS v aplikaci WordPress a aktivujte ji

Použijeme a WordPress Plugin vložit kód CSS na stránky a WooCommerce Online Shop, Můžete si stáhnout plugin: Jednoduché vlastní CSS

Náš tutoriál si můžete přečíst na instalace a aktivace pluginu WordPress.

Po aktivaci pluginu bude do nabídky přidána nová podnabídka Apparence :

Přístup do této části vás přenese do rozhraní s textovým polem, kde můžete zadat vlastní kód CSS.

Do textového pole vložte následující CSS a klikněte na „ Aktualizovat vlastní CSS".

.woocommerce #content input.button.alt: vznášet se, .woocommerce #respond vstup # submit.alt: vznášet se, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-stránkový #content input.button.alt: vznášet se, .woocommerce-stránkový vstup #respond # submit.alt: vznášet se, .woocommerce-stránkový a.button.alt: vznášet se, tlačítko .woocommerce-stránky. button.alt: hover, .woocommerce-stránkový input.button.alt: vznášet {background: red významné; background-color:! red důležitá; ! Barva: bílá důležitá; text-shadow:! transparentní důležitá; box-shadow: none; border-color:! #ca0606 důležitá; } .woocommerce #content Input.button: vznášet se, .woocommerce #respond vstupní # předloží: vznášet se, .woocommerce a.button: vznášet se, .woocommerce button.button: vznášet se, .woocommerce input.button: vznášet se, .woocommerce-stránkový # happy input.button: vznášet se, .woocommerce-input #respond # předloží: vznášet se, .woocommerce-page a.button: vznášet se, .woocommerce-page button.button: vznášet se, .woocommerce-page input.button: hover {background :! red důležitá; background-color:! red důležitá; ! Barva: bílá 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í # předloží .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-stránkový #content input.button, .woocommerce-stránkový # # podat vstup reaguje, .woocommerce-stránkový a.button, .woocommerce-stránkový button.button, .woocommerce-stránkový input.button {background: red významné; ! Barva: bílá 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ášet se, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-stránkový #content input.button.alt: vznášet se, .woocommerce-stránkový vstup #respond # submit.alt: vznášet se, .woocommerce-stránkový a.button.alt: vznášet se, tlačítko .woocommerce-stránkový .button.alt: hover, .woocommerce-stránkový input.button.alt: vznášet {background: red významné; box-shadow: none; text-shadow:! transparentní důležitá; ! Barva: bílá důležitá; border-color:! #ca0606 důležitá; }

Nyní máte přístup do svého internetového obchodu, všimnete si, že tlačítka skutečně změnila barvy.

Chcete-li přizpůsobit barvu tlačítek, abyste konečně získali požadovaný vzhled,

Nahradit vlastnost " backgroud: červené! důležité A Barva dle vlastního výběru. Aktualizujte kódy a přejděte znovu do svého online obchodu. Ve skutečnosti pomocí stylingu, který jsme vám právě poskytli, budete moci úplně změnit strukturu tlačítek.

S trochou průzkumu budete schopni vytvořit jedinečná tlačítka se stylem, který odpovídá vašemu WordPress téma (zvláště pokud tato není kompatibilní s WooCommerce).

V následujícím příkladu můžete použít následující kód CSS.

.woocommerce #content input.button, .woocommerce #respond vstupní # předloží .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce stránkový #content input.button, .woocommerce-page #respond # podat vstup, .woocommerce stránkový a.button, .woocommerce stránkový button.button, .woocommerce stránkový input.button {background-color: #6fba26; padding: 10px; Pozice: relativní; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; Barva: #fff; background-image: lineární gradient (dolní, RGB (100,170,30) 0% RGB (129,212,51) 100%); box-shadow: vložka 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; okraj poloměru: 5px; } .woocommerce #content input.button.alt: vznášet, .woocommerce #respond vstup # submit.alt: vznášet, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce stránkový #content input.button.alt: vznášet se, .woocommerce stránkový vstup #respond # submit.alt: vznášet se, .woocommerce stránkový a.button.alt: vznášet se, tlačítko .woocommerce stránkový .button.alt: hover, .woocommerce-page input.button.alt: přejetím {top: 7px; background-image: lineární 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; barva: #156785; textový stín: 0px 1px 1px rgba (255,255,255,0.3); pozadí: rgb (44,160,202); }

Pro ty, kteří chtějí optimalizovat výkon svého internetového obchodu, ať už jde o konverzi nebo prodej produktů,

Nabízíme také prémiové doplňky WordPress 3 určené pro tento úkol.

1. WooCommerce obnovit opuštěný košík

vaši zákazníci často plní své koše a nechávají je: díky WooCommerce Obnovit Opuštěné košík budete je moci kontaktovat, připomenout jim, co si koupili, a vyzvat je k dokončení jejich akcí.

Nastavte časový interval mezi opuštěním košíku a odesláním personalizovaného e-mailu s připomenutím zákazníkovi s přímým odkazem na stránku nákupů, aby zjistili, na čem byli. bod ke koupi.

Stáhnout | Demo | Web hosting

2. WooCommerce Skrýt cenu a přidat do košíku doplněk tlačítka

Zásuvný modul Skrýt ceny WooCommerce umožňuje obchodníkům vytvořit několik pravidel, která skryjí ceny nebo skryjí tlačítko „přidat do košíku“ před nepřihlášenými zákazníky nebo uživateli, kteří mají určitá přístupová práva k vašemu webu elektronického obchodování.

U určitých produktů nebo v konkrétních kategoriích můžete skrýt cenu a tlačítko „přidat do košíku“. Můžete je nahradit vlastním textem nebo tlačítkem, které je přenese do  kontaktní formulář, Můžete vytvořit tolik pravidel, která automaticky skryjí cenu a „ Přidat do panier “podle toho, co chcete.

Stáhnout | Demo | Web hosting

3. Přepínač měn WooCommerce

Tento plugin umožňuje přepínat ceny produktů z jedné měny do druhé v reálném čase.

To je zvláště důležité v elektronickém obchodování, protože je zaměřeno na celý svět. Tento plugin zajišťuje, že bez ohledu na to, kde se vaši zákazníci nacházejí, vždy si budou moci objednat z vašeho online obchodu.

Stáhnout | Demo | Web hosting

Doporučené zdroje

Objevte další doporučené zdroje, které vám pomohou optimalizujte výkon vašeho internetového obchodu. 

• 50 WooCommerce pluginy, jak zlepšit svůj internetový obchod
• Doplňky 9 WordPress k vytvoření přidruženého programu
• Zásuvné moduly 9 WooCommerce pro zlepšení atributů vašich proměnných produktů
• 5 WordPress pluginy pro vizuální úpravu CSS na vašem blogu

Proč investovat do čističky vzduchu?

Tady je ! To je vše pro tento tutoriál věnovaný přizpůsobení tlačítek Přidat do košíku od WooCommerce. Neváhejte jej sdílet se svými přáteli na vašem sociální sítě přednostní. 

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress.

Ale mezitím nám pověz o svém commentaires a návrhy ve vyhrazené sekci.

...