Přejít k hlavnímu obsahu

Jak přidat text na produkt WooCommerce na Divi

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

V předchozím tutoriálu jsme představil jsi Divi, Pro ty, kteří to nevědí, je Divi prémiové téma WordPress 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 citlivé téma a druhé je kompatibilní s několika dalšími pluginy, mezi jinými máme WooCommerce. Dnes vám ukážeme, jak dát jiným produktům WooCommerce jinou animaci.

Někdy může být styl WooCommerce trochu nevhodný, zejména 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í:

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

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:

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

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, který měl text o produktu přechodu. Samozřejmě jsem to viděl z jiných webů elektronického obchodování, které mají na vznášejícím se produktu spíše slova než ikony, takže to nebyl nový koncept. Nikdy jsem to nemusel dělat na téma Divi, a když jsem to viděl, postavil jsem si výzvu a uvědomil jsem si, že je skutečně snadné to realizovat. S velmi malým požadovaným kódem určitě neovlivníte výkonnost 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.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

.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.

Ostatní výukové programy Divi

Tento článek obsahuje komentáře 5

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
10 akcie
podíl6
tweet
Zadat4