V předchozím tutoriálu jsme představil jsi Divi. Pro ty, kteří nevědí, Divi je a WordPress téma prémiový navržený týmem elegantní témata který nabízí různé služby v oblasti WordPress a navrhuje doplňky a témata.

Divi je responzivní téma a je kompatibilní s několika dalšími pluginy, které máme WooCommerce. Dnes vám ukážeme, jak dát svým produktům jinou animaci WooCommerce.

Někdy styl WooCommerce může být trochu neadekvátní, zvláště pokud je váš styl CSS trochu jiný. Tento tutoriál, který bude trochu technický (trochu CSS a nic jiného), vám to umožní napravit.

Další návody na téma Divi

Začněme.

Jak přidat obrázek k produktu woocommerce

Úprava ikony pro text nad myší

Ve výchozím nastavení, když používáte WooCommerce s Divi a umístíte kurzor na produkt, uvidíte malou ikonu '+', což je písmo (make-icon), které navrhla Divi a které je následující:

Výchozí ikona woocommerce

Je opravdu snadné to změnit v nastavení na jinou ikonu, ale pokud chcete přidat nějaký text, je to další věc? Ukážu vám, jak toho dosáhnout pomocí dnešních úryvků CSS, a přidám také volitelný kód, který přidáte na svůj web.

Zde je to, co budeme mít jednou dokončeno:

Konečný výsledek úpravy produktu Wordpress

Proč přesto používat místo ikony text?

Dokážu vymyslet několik důvodů, které vás k tomu mohou přimět:

Chcete-li definovat, dejte vašemu obchodu jedinečný vzhled: Cokoli můžete udělat pro odlišení vašeho webu Divi / WooCommerce od jiného, ​​je vždy dobrá věc.

Použití slova jako „Zobrazit“ nebo „Koupit“ může vést k větší konverzi: Každý musí udělat to, co je pro jeho web nejlepší, a vy můžete využít integrovaného testování A / B na Divi.

Zdroj inspirace

Nedávno jsem procházel web, na kterém se vznášel text o produktu. Samozřejmě jsem viděl jiné weby elektronického obchodu, které mají na produktu spíše slova než ikony, takže to nebyl nový koncept. Nikdy jsem to nemusel dělat na a Divi téma, a když jsem to viděl, postavil jsem si výzvu a uvědomil jsem si, že je opravdu snadné to implementovat. S velmi malým potřebným kódem máte jistotu, že neovlivníte výkon svého blogu.

Ukázkový web

Provádění myši nad textem

Krok 1: Barevné překrytí

Nejprve změníme barvu překrytí při najetí myší. To je na Divi mimořádně snadné. Ve vašem modulu obchodu Přejít na pokročilé pokročilé konstrukční parametry A vyberte si barvu.

Výběr barev divi

Krok 2: Přidání CSS

Následující kód CSS v položce „ Možnosti motivu> Vlastní CSS Nebo na listu stylů vašeho dětského motivu.

.woocommerce .et_overlay: before {left: 0; levý okraj: 0; content: 'view'; / *** Váš text zde *** / font-family: 'Source without Pro', Arial! / *** Vyberte písmo *** / text-transformace: velká písmena; velikost písma: 24px; barva: #fff; / *** Nastavte barvu textu *** / font-weight: bold; zarovnání textu: střed; šířka: 100%; čalounění: 5px 0; }

Pokud chcete, aby vaše produkty byly spíše kulaté, můžete přidat tento volitelný kód:

.woocommerce ul.products li.product img, .et_overlay {border-radius: 50%; }

A je to!

Nyní můžete navštívit svůj obchod a podívat se, jak jsou vaše změny brány v úvahu.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" rozšířené "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] STÁHNOUT TÉMA DIVI [/ vcex_button] [/ width_column] [»v] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right " TEM DOWNLOOWN DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostatní výukové programy Divi