Vytvořte a navrhněte úžasnou produktovou stránku WooCommerce pomocí Elementor

Musíte upravit svou produktovou stránku, abyste odlišili svůj e-shop od konkurence a poskytli svým klientům jedinečný zážitek. Kromě toho je možnost estetického přizpůsobení vaší produktové stránky zásadní pro zachování konzistentního vizuálního designu v celém vašem internetovém obchodě.

Elementor je jedním z předních tvůrců webových stránek WordPress na trhu, ale věděli jste také, že pomocí něj můžete vytvářet obchody WooCommerce?

Mnoho vestavěných modulů Elementor WooCommerce umožňuje vkládat obsah nebo funkční bloky WooCommerce nebo je upravovat pomocí tvůrce Elementor. Docela skvělé, že?

Stylování a přizpůsobení WooCommerce dříve vyžadovalo PHP a CSS pro každou malou změnu, ale jak se nástroje jako Elementor zdokonalují a stávají se komplexnějšími, je k dispozici stále více možností, jak převzít kontrolu nad tím, jak váš obchod vypadá a funguje.

Začněme.

• Vytvoření šablony Elementor
• Obrázek nebo galerie produktu Building Elementor
• Název produktu WooCommerce, cena a přidání do košíku
• Nastavení produktových karet Elementor
• Stručný popis produktu Elementor
• Upsells produktů Elementor a WooCommerce
• Závěr – Tvůrce produktových stránek Elementor

Vytvoření šablony Elementor

Prvním krokem v postupu je vytvoření nové šablony Elementor přechodem na Šablony na řídicím panelu WordPress. Klikněte na „Vytvořit nový“ a jako šablonu, kterou chcete vytvořit, vyberte Jeden produkt.

Protože tuto šablonu vyvíjíme od začátku, není třeba vkládat žádné bloky; opusťte další pole, dokud se nedostanete na obvyklou obrazovku tvůrce Elementor pro novou stránku.

Obrázek nebo galerie produktu Building Elementor

Každý produkt WooCommerce má obrázek produktu nebo galerii obrázků, která zákazníkům představuje fotografie produktu. Elementor poskytuje vestavěný modul Product Images, který nám umožňuje vložit je do naší šablony.

Vytvořte jednoduchý 2 sloupcový řádek a do levého sloupce zadejte modul Obrázky produktů; vypadá to prakticky a funguje to, ale přizpůsobme si prodejní odznak tak, aby odpovídal motivu Elementor Hello použitému v tomto článku. Abychom to mohli udělat, musíme použít malou řadu vlastních CSS, které lze zavést tak, že přejdete na Pokročilé > Vlastní CSS a vložíte níže uvedený kód.

selector .onsale { \sbackground-color: #cc3366 ; \s}

produktu WooCommerce , cena a přidání do košíku

Do pravého sloupce přidáme moduly Elementor pro Název produktu, Cenu produktu a Přidat do košíku

Vyhledejte tyto tři moduly v konstruktoru Elementor a poté je přetáhněte a uspořádejte ve výše uvedeném pořadí; toto je plně funkční, ale chceme jej upravit tak, aby odpovídal stylu, jako je výše uvedený motiv Hello Elementor. Stylování modulů pomocí Elementoru je snadné, vše, co musíte udělat, je kliknout na modul a editor by měl otevřít možnosti stylování vlevo.

Obsah těchto modulů je vynikající. Budeme tedy pracovat pod záložkou Styl. Nejprve aktualizujme písmo a barvu názvu produktu tak, aby odpovídala těm, které se používají v motivu Hello Elementor.

Totéž pak musíme udělat pro moduly Cena produktu a Přidat do košíku kliknutím na každý modul a úpravou barvy textu. Pro cenu produktu použiji tmavě šedou, aby kontrastovala s nadpisem, takže pokud sledujete, zadejte tento hexadecimální kód – #54595f

Dále v modulu Přidat do košíku aktualizujeme pár věcí. Barva pozadí tlačítka a poloměr okraje tlačítka pomocí níže uvedených nastavení:

• Nastavte obsah na 'Přidat do košíku'.
• Nastavte barvu pozadí na „#cc3366“
• Nastavte poloměr okraje na 0

Změnil jsem poloměr okraje voliče množství na 0, což můžete provést na kartě Styl pro množství.

Nastavení produktových karet Elementor

Každý produkt musí zobrazovat některé základní informace, jako je popis produktu a recenze, pokud jsou k dispozici; to se běžně řeší prostřednictvím karet produktů.

Vytvořte prosím nový řádek pod horní částí a přetáhněte modul Product Data Tabs z tvůrce Elementor do řádku, abyste jej vložili. Zde není potřeba mnoho stylů, protože zdědí některé styly z motivu Hello Elementor. Upravme však styl tlačítka pro odeslání recenze.

K tomu budeme opět potřebovat trochu vlastního CSS. Začněte upravovat karty Product Data, poté klikněte na kartu Advanced a přejděte dolů na Custom CSS. Zadejte níže uvedený CSS a můžete upravit barvy podle svého návrhu.

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; barva: #fff; border-radius: 0px; }

Stručný popis produktu Elementor p

Dobře, takže zatím máme slušný, jednoduše vypadající design, ale vypadá trochu řídce. Přidáním modulu Stručný popis produktu do horní části to může pomoci doplnit a přidat další kontext.

Vyhledejte modul WooCommerce Short Description a poté jej přetáhněte pod cenu produktu a nad modul Přidat do košíku.

Zatím zde není vyžadován žádný styl, protože zdědil styly z Hello Elementor.

Upsells produktů Elementor a WooCommerce

Zvýšení průměrné hodnoty košíku je zásadní pro každý web WooCommerce, a proto je hezké, že Elementor obsahuje modul Product Upsells, abyste mohli snadno integrovat přizpůsobení do vašeho obchodu.

Vyhledejte prosím modul Upsells produktu v Elementor builderu a vložte jej do nového řádku za záložkami Product Data.

Jak vidíte, vyžaduje to trochu úprav, aby to doplnilo zbytek našeho stylu. Začněte upravovat modul a proveďte následující změny:

• Nastavte barvu nadpisu na – #cc3366
• Nastavte barvu nadpisu na – #cc3366
• Nastavte barvu ceny na – #54595f
• Nastavte barvu pozadí tlačítka na – #cc3366
• Nastavte barvu tlačítka na – #fff
• Nastavte poloměr okraje tlačítka t0 – 0

Hotový výrobek bude vypadat jako výše. Pokud použijete tuto příručku jako výchozí bod pro šablonu, můžete upravit hexadecimální kód barvy, jak uznáte za vhodné.

Jakmile budete hotovi, publikujete svou šablonu. V dalším okně uvidíte otázku „Kde chcete zobrazit šablonu?“. Kliknutím na „Přidat podmínku“ určíte, kdy má být tato šablona použita. Chcete-li šablonu použít na všech stránkách svých produktů, můžete vybrat „Všechny produkty“. Můžete se také rozhodnout použít tuto šablonu pouze pro produkty, které spadají do konkrétní kategorie nebo mají přiřazenou konkrétní značku.

Tvůrce stránky produktu Elementor

Někteří uživatelé mohou mít potíže se zobrazením přizpůsobených nastavení designu, jako je barva písma a typografie, když používáte Elementor. Vzhled vašeho obchodu WooCommerce může být ovlivněn, pokud používáte téma WordPress, které může ovládat vzhled vašeho obchodu. Pokud narazíte na tento problém, mějte na paměti, že váš článek může v některých případech přepsat vaše vlastní nastavení stránky.

Můžete si také vybrat prázdnou stránku a vytvořit ji od základu pomocí produktových widgetů pro zcela přizpůsobený vzhled. Použijte prázdnou stránku, zavřete vyskakovací okno knihovny šablon, jakmile se objeví, a začněte stavět na nově vytvořené stránce. Vlastní tlačítko „Přidat do košíku“, „Cena produktu“, „Obrázek produktu“ a „Název a popis produktu“ jsou jen některé z widgetů WooCommerce, které můžete použít k přizpůsobení stránky produktu. Na této stránce se můžete podívat na všechny aktuálně dostupné widgety. Pokud chcete, můžete widgety uspořádat kdekoli na rozvržení stránky a přizpůsobit jejich styly tak, aby odpovídaly vašemu požadovanému vzhledu.

Musíte upravit svou produktovou stránku, abyste odlišili svůj e-shop od konkurence a poskytli svým klientům jedinečný zážitek. Kromě toho je možnost estetického přizpůsobení vaší produktové stránky zásadní pro zachování konzistentního vizuálního designu v celém vašem internetovém obchodě. Elementor je fantastický nástroj pro přizpůsobení stránek vašeho obchodu WooCommerce a velmi doporučujeme. Kromě jednoduchého použití obsahuje Tvůrce stránek všechny potřebné widgety a možnosti stylů, které vám pomohou při vytváření vlastních produktových stránek. Doufáme, že jste shledali tento výukový program informativní a poskytli vám informace, které jste potřebovali k přizpůsobení vašeho produktu WooCommerce a stránek archivu produktů pomocí Elementor. Použili jste Elementor k vytvoření stránek WooCommerce v minulosti? Můžete se podělit o své myšlenky v sekci komentářů. Rádi se podíváme.