Vytvořte a navrhněte úžasnou stránku produktu WooCommerce s Elementor

Musíte upravit svou produktovou stránku, abyste odlišili svůj e-commerce obchod od konkurence a poskytli svým klientům jedinečný zážitek. Možnost esteticky přizpůsobit stránku produktu je navíc zásadní pro udržení konzistentního vizuálního designu v celém online 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 stavět obchody WooCommerce?

Mnoho vestavěných modulů Elementor WooCommerce vám umožňuje vložit obsah nebo funkční bloky WooCommerce nebo je stylovat pomocí nástroje Builder Elementor. Docela skvělé, že?

Styling a přizpůsobení WooCommerce dříve vyžadovalo PHP a CSS pro každou drobnou změnu, ale jak se nástroje jako Elementor zlepšují a stávají se složitějšími, je stále více a více možností k převzetí kontroly nad tím, jak váš obchod vypadá a funguje.

Začněme.

• Vytvoření šablony Elementor
• Budování produktu nebo galerie produktu Elementor
• Název produktu WooCommerce, cena a přidání do košíku
• Nastavení karet produktů Elementor
• Stručný popis produktu Elementor
• Prodávané produkty Elementor a WooCommerce
• Závěr - tvůrce stránky produktu Elementor

Vytvoření šablony Elementor

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

Když vyvíjíme tuto šablonu od nuly, není třeba dávat žádné bloky; opusťte další pole, dokud se nedostanete na obvyklou obrazovku Tvůrce elementů pro novou stránku.

Budování produktu nebo galerie produktu Elementor

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

Vytvořte jednoduchý řádek se 2 sloupci a v levém sloupci zadejte modul Obrázky produktu; to vypadá prakticky a provádí práci, ale přizpůsobme si odznak prodeje tak, aby odpovídal motivu Hello Elementor, který se používá pro tento článek. K tomu musíme použít malou řadu vlastních CSS, které lze zavést tak, že přejdete do části Upřesnit> Vlastní CSS a vložíte níže uvedený kód.

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

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

V pravém sloupci přidáme moduly Elementor pro Název produktu, Cena produktu a Přidat do košíku .

Vyhledejte tyto tři moduly v konstruktoru Elementor, pak je přetáhněte a pusťte a uspořádejte je v pořadí uvedeném výše; toto je plně funkční, ale chceme ho přizpůsobit tak, aby odpovídal stylu jako výše uvedené téma Hello Elementor. Styling modulů s Elementorem je snadný, vše, co musíte udělat, je kliknout na modul a editor by měl otevřít možnosti stylingu nalevo.

Obsah těchto modulů je vynikající. Budeme tedy pracovat na kartě Styl. Nejprve aktualizujme písmo a barvu nadpisu produktu tak, aby odpovídaly těm, které jsou použity v motivu Hello Elementor.

Poté musíme udělat totéž pro moduly Cena produktu a Přidat do košíku kliknutím na každý modul a úpravou barvy textu. U ceny produktu použiji pro kontrast proti nadpisu tmavě šedou barvu, takže pokud sledujete tento kód, zadejte tento hexadecimální kód - # 54595f

Dále v modulu Přidat do košíku aktualizujeme několik věcí. Barva pozadí tlačítka a poloměr ohraničení tlačítka pomocí níže uvedeného nastavení:

• Nastavte obsah na možnost „Přidat do košíku“.
• Nastavit barvu pozadí na '# cc3366'
• Poloměr ohraničení nastavte na 0

Změnil jsem poloměr ohraničení voliče množství na 0, což můžete udělat na kartě Styl pro Množství.

Nastavení karet produktů Elementor

Každý produkt musí zobrazovat některé základní informace, jako je popis produktu a recenze, jsou-li k dispozici; toto se běžně řeší pomocí karet produktů.

Vytvořte nový řádek pod horní částí a přetažením modulu Tabulátory údajů o produktu z Tvůrce elementů do řádku jej vložte. Zde není zapotřebí mnoho stylů, protože zdědí některé styly z motivu Hello Elementor. Pojďme však upravit styl tlačítka pro odeslání recenze.

K tomu budeme znovu potřebovat trochu vlastních CSS. Začněte upravovat karty údajů o produktu, poté klikněte na kartu Upřesnit a přejděte dolů na Vlastní 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; poloměr ohraničení: 0px; }

Elementor p popis roduct stručná

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

Vyhledejte modul Stručný popis WooCommerce 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 od Hello Elementor.

Prodeje produktů Elementor a WooCommerce

Zvýšení průměrné hodnoty koše je zásadní pro každý web WooCommerce, a proto je hezké, že Elementor obsahuje modul Product Upsells, který umožňuje snadnou integraci přizpůsobení do vašeho obchodu.

Vyhledejte modul Upsells produktu v nástroji Builder Elementor a vložte jej do nového řádku za záložkami Data produktu.

Jak vidíte, vyžaduje to trochu úpravy, které doplní 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 ohraničení tlačítka t0 - 0

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

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

Tvůrce stránky produktu Elementor

Někteří uživatelé mohou mít potíže se zobrazením přizpůsobeného nastavení návrhu, jako je barva písma a typografie, při použití Elementoru. 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 také vybrat prázdnou stránku a vytvořit ji od základu pomocí widgetů produktu pro zcela přizpůsobený vzhled. Použijte prázdnou stránku, zavřete vyskakovací okno knihovny šablon 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“, je jen několik 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 různé widgety, které jsou aktuálně k dispozici. Pokud chcete, můžete si na rozvržení stránky uspořádat widgety kdekoli chcete 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-commerce obchod od konkurence a poskytli svým klientům jedinečný zážitek. Možnost esteticky přizpůsobit stránku produktu je navíc zásadní pro udržení konzistentního vizuálního designu v celém online obchodě. Elementor je fantastický nástroj pro přizpůsobení stránek vašeho obchodu WooCommerce a je velmi doporučován. Kromě jednoduchého použití obsahuje nástroj pro tvorbu stránek všechny potřebné widgety a možnosti stylingu, které vám pomohou při vytváření vlastních stránek produktu. Doufáme, že vám tento návod připadal poučný a poskytl vám informace potřebné k přizpůsobení vašeho produktu WooCommerce a stránek archivu produktů pomocí Elementoru. Použili jste v minulosti Elementor k vytváření stránek WooCommerce? Můžete se podělit o své myšlenky v sekci komentáře. Rádi se podíváme.