Trendy nakupování se mění rychlým tempem a lidé mají tendenci nakupovat online více než kdy jindy.
To je důvod, proč stále více potřebují eCommerce obchod, aby uspokojili zvyky nakupování online, protože pro lidi je pohodlnější nakupovat online, než chodit nakupovat.
Svůj e-shop můžete také spustit ihned pomocí správných nástrojů a nastavení. A za rekordní dobu si všimnete drastického nárůstu prodeje.
Pokud máte v plánu založit si e-shop a hledáte odborníka na WordPress, který by to udělal za vás, řeknu vám, že žádné nepotřebujete.
Ano! Můžete to udělat sami, protože nemusíte být vývojář WordPress nebo expert na kódování a můžete to udělat bez jakýchkoli znalostí kódování se správnými nástroji a nastavením.
Postupujte podle návodu krok za krokem k vytvoření stránky obchodu WooCommerce pomocí tvůrce stránek Elementor.
Pojďme se ponořit hlouběji, abychom se dostali k věci!
- Co budete potřebovat k vytvoření produktové stránky pomocí Elementor?
- Jak nainstalovat tvůrce stránek Elementor?
- Krok za krokem vytvořte produktovou stránku Elementor WooCommerce
- Mobilní optimalizace vaší produktové stránky WooCommerce
- Ceny Elementor Pro
- Zabalení
Co budete potřebovat k vytvoření produktové stránky pomocí Elementor?
plugin WooCommerce na svůj web WordPress z úložiště WordPress.org a navíc budete muset nainstalovat nástroj pro tvorbu stránek Elementor . Bezplatnou verzi lze stáhnout z WordPress.org, avšak bezplatná verze přichází s omezenými možnostmi přizpůsobení. Pokud tedy chcete získat neomezené možnosti přizpůsobení, přejděte na profesionální Elementor a stáhněte si jej z oficiální stránky Elementor.org.
Jak nainstalovat tvůrce stránek Elementor?
- Pro bezplatnou verzi Elementor:
Přejděte na Plugin > Přidat nový > zadejte tvůrce stránek Elementor > klikněte na nainstalovat a aktivovat.
- Pro Elementor Pro:
Kupte si verzi Pro z webu Elementor.com a poté nahrajte soubor zip a poté klikněte na nainstalovat a aktivovat.
Krok za krokem vytvořte produktovou stránku Elementor WooCommerce
Standardní stránka produktu WooCommerce vypadá jako jakákoli základní stránka produktu WooCommerce, aniž by byla ostrá.
![](https://www.holdersing.com/wp-content/uploads/2020/06/2nd-1.png)
Pokud však chcete přidat hlas své značky, musíte si jej jedinečně přizpůsobit.
Krok 1: Přejděte do sekce Šablona z nabídky Dashboard a klikněte na „Přidat nový“.
![](https://www.holdersing.com/wp-content/uploads/2020/06/Ad-new-template-2.png)
Nyní z rozbalovací nabídky vyberte položku „Jeden produkt“
![](https://www.holdersing.com/wp-content/uploads/2020/06/seelct-single-product.png)
Nejlepší na tom je, že Elementor je dodáván s několika předpřipravenými šablonami produktových stránek, takže pokud chcete začít rychle, vyberte si kohokoli z možností, které vypadají nejblíže k vaší požadované.
Je mnohem snazší vytvořit stránku produktu z předem připravené šablony než vytvářet od začátku. Proto upravte jakoukoli existující šablonu a ušetřete si čas a námahu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-page-template.png)
Tuto šablonu jsme vybrali pro naši produktovou stránku.
![](https://www.holdersing.com/wp-content/uploads/2020/06/aaa.png)
Jakmile si vyberete svou oblíbenou šablonu, zavede vás to do editoru Elementor, kde si můžete šablonu přizpůsobit podle svého vkusu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/elementor-editor.png)
Zde můžete vidět různé bloky v nabídce na levé straně. Přetáhněte blok, se kterým chcete pracovat.
Klikněte na tlačítko „+“ Přidat a vyberte velikost sloupce, kterou chcete přidat.
Pro naši šablonu produktu jsme vybrali dvě velikosti sloupců.
Nyní přidejte widget názvu produktu do pravého sloupce a přidejte do něj název svého produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/poduct-tite-widegt-1.png)
Jakmile přidáte název produktu, dalším krokem je přidat nad něj „Woo strouhanku“.
Nyní přidejte obrázek produktu do levého sloupce a přetáhněte widget obrázku produktu z levého sloupce.
![](https://www.holdersing.com/wp-content/uploads/2020/06/drop-the-image-in-left-column.png)
Do obou sloupců můžete přidat vycpávku, aby byly mírně od sebe.
Po přidání obrázku a úpravě výplně podle požadovaných rozměrů přidejte pod názvem produktu widget pro hodnocení produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-the-product-ratign.png)
Přidejte stručný popis widgetu produktu pod blok recenze produktu. můžete také upravit prostor mezi dvěma bloky.
Jakmile budete hotovi s popisem produktu a všemi podrobnostmi, naším dalším krokem je přidat cenu produktu a k tomu budete muset přetáhnout widget ceny pod popis produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-price.png)
Po přidání záložky s cenou pod popis produktu můžete přizpůsobit cenový widget výběrem možností z levé nabídky. Ikonu můžete zvětšit, změnit styl písma a také barvu písma z černé na jakoukoli jinou barvu dle vašeho výběru.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-price-foramt-1.png)
Nyní přidejte widget „přidat do košíku“ a upravte jeho barvu, písmo nebo styl z nabídky, pokud chcete.
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-to-the-cart-widget.png)
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-to-the-cart-options.png)
Nyní přidejte meta produktu pod widget ceny, který zobrazí kategorii produktu a sériové číslo produktu.
Krok 2: v další části přidejte další informace o produktu.
Vytvořte novou sekci se dvěma sloupci a poté přidejte karty Produktová data včetně popisu, dalších informací a recenzí. A na pravé straně sloupce přidejte sekci souvisejících produktů.
Chcete-li zachovat stejný formát každého sloupce, můžete kliknout na levý roh každého sloupce a zkopírovat a vložit formát sloupce pro každý sloupec.
Krok 3: Přidejte další sekci nebo přidejte sekci pro další prodej.
![](https://www.holdersing.com/wp-content/uploads/2020/06/up-sell-section-1.png)
Zde je návod, jak bude vaše sekce up-sell vypadat po přidání. Přidejte nějaké vycpávky, aby se sekce zarovnala.
![](https://www.holdersing.com/wp-content/uploads/2020/06/up-sell-section-2.png)
A konečně jste hotovi s návrhem produktové stránky. Nyní je posledním krokem, kde chcete publikovat svůj produkt? můžete kliknout na publikovat nebo přejít do sekce oko v nejspodnějším rohu levého menu a kliknutím na nastavení vybrat kategorii produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/find-category.png)
Klikněte na nabídku přidat podmínky a poté vyberte kategorii svého produktu a klikněte na publikovat.
Mobilní optimalizace vaší produktové stránky WooCommerce
Vzhledem k tomu, že přes smartphony bude procházet velký provoz, budete muset svůj obchod optimalizovat pro prohlížení smartphonů, jinak můžete přijít o své tržby.
Přestože je WooCommerce již optimalizován pro mobily, pro ujištění, zda vaše šablony produktových stránek vypadají na mobilní obrazovce naprosto dobře, postupujte podle tohoto postupu.
V levém dolním rohu rozhraní Elementor najdete možnost Responsive Mode.
![](https://www.holdersing.com/wp-content/uploads/2020/06/mobile-responsive.png)
Když kliknete na možnost Mobile responsive, můžete přepínat mezi možnostmi Mobile, Desktop a zobrazením karet.
Klikněte na kteroukoli z možností, které chcete zobrazit, a vylaďte design, pokud najdete nějakou komplikaci.
Nyní uložte a pokračujte v publikování stránky produktu.
Ceny Elementor Pro
![](https://www.holdersing.com/wp-content/uploads/2020/06/pridicn.png)
Základní verze Elementor je k dispozici zdarma, zatímco verze Pro je dodávána se třemi licencemi. Pokud hledáte svůj osobní blog nebo jediný web, pak je pro vás nejvhodnější osobní licence, kde můžete získat tvůrce WooCommerce spolu s 90+ pro widgety.
Zatímco licence plus a expert jsou vhodné pro dospělé firmy nebo agentury s podporou 3 webů a 1000 webů.
Zabalení
Jediným účelem tvůrce stránek Elementor je umožnit uživatelům popustit uzdu své kreativitě, aniž by se spoléhali na kódování. Elementor přichází s řadou widgetů, které vám umožní vytvořit jakýkoli druh produktových stránek na základě atraktivních rozvržení. Základních prvků WooCommerce je více než 10, které umožňují uživatelům přizpůsobit každý zlom a křivku stránky obchodu. A pokud nenajdete požadovaný prvek v nabídce Elementor, nebojte se! Existuje mnoho dalších pokročilých nastavení, která mohou upgradovat váš arzenál a přidat do vaší knihovny více prvků. Jedním z nich jsou Essential Add-ons , které přicházejí s vyhrazenými prvky pouze pro WooCommerce.