Jak vytvořit vlastní design stránky kategorie WooCommerce
Hledáte alternativu k výchozímu designu stránky kategorie WooCommerce v tématu WordPress? Vytvoření vlastního designu pro kategorie produktů WooCommerce vám umožní nabídnout optimalizovaný zážitek z nakupování, což může mít pozitivní vliv na hospodářský výsledek vašeho obchodu.
S pomocí správného pluginu nemusí být ani vytvoření vlastního vzhledu stránky kategorie WooCommerce složité. Právě to vám ukážeme v tomto příspěvku. Budeme se zabývat tím, jak vytvořit vlastní tabulkové rozvržení pro vaše kategorie WooCommerce. Díky tomu budete mít kontrolu nad tím, jaké informace se přesně zobrazí a jak budou nakupující s vašimi produkty pracovat.
Tady je příklad toho, co v tomto příspěvku vytvoříte:
Začneme některými výhodami tohoto tabulkového přístupu. Poté se pustíme do návodu krok za krokem, jak to provést ve vlastním obchodě WooCommerce pomocí pluginu WooCommerce Product Table.
Výhody použití tabulkového rozvržení stránek kategorií
Přestože přesný design rozvržení stránek kategorií vašeho obchodu eCommerce závisí na vašem tématu WordPressu, návrhy stránek kategorií většiny témat vypadají nějak takto:
Toto rozvržení je pro některé situace vhodné, ale omezuje počet produktů, které můžete zobrazit. Omezuje také množství informací, které můžete o jednotlivých produktech poskytnout (i když přidání tlačítek pro rychlé zobrazení produktů je jedním ze způsobů, jak tento problém zmírnit).
Woo Multistore psali o tom, že je důležité navrhnout stránku kategorie WooCommerce tak, aby zvyšovala konverze. Tabulkové rozvržení vám pomůže překonat nedostatky tím, že zobrazí více produktů a informací v kompaktním rozvržení, které ve výsledku zabere méně místa, a také přidá další navigační funkce, jako je vyhledávání a filtrování.
To znamená, že můžete dostat více svých produktů/podrobností o produktech před oči nakupujících, což zajistí, že uvidí celý váš katalog a zvýší šanci, že nakoupí.
Uvidíte také výhody SEO pro vyhledávače, protože na plně přizpůsobené stránce (nebo také na vstupních stránkách) můžete zobrazit více vlastního obsahu. To vám umožní zobrazit produkty, které jsou relevantní, a pak také přidat kontextový text. To vše by mělo být odměněno vyšším hodnocením.
Ačkoli tento typ rozvržení může být přínosem pro všechny typy e-shopů, je obzvláště užitečný pro:
- Velkoobchody
- Digitální soubory (videa, zvukové soubory, elektronické knihy atd.)
- Restaurace
- Katalogy produktů
- …spoustu dalších!
Jak vytvořit vlastní design stránky kategorie WooCommerce pomocí pluginu WooCommerce Product Table
Další výhodou použití tabulkového rozvržení pro design stránky kategorie WooCommerce je, že vše můžete nastavit, aniž byste potřebovali nějaké speciální technické znalosti.
K tomu použijete plugin WooCommerce Product Table. Tento plugin zobrazuje vaše produkty WooCommerce ve flexibilním tabulkovém rozvržení, které máte pod kontrolou, spolu s možností přidat filtry, vyhledávací pole, stránkování a další.
Plugin můžete také použít k zobrazení pouze produktů z určitých kategorií nebo podkategorií. WooCommerce Product Table nabízí dva způsoby, jak toho dosáhnout:
- Rozložení tabulky produktů můžete centrálně povolit na všech stránkách kategorií produktů. (Ideální, pokud chcete přizpůsobit všechny stránky kategorií produktů.)
- Případně můžete použít zkrácený kód a ručně vytvořit vlastní stránky kategorií WooCommerce. (Například pokud chcete tabulku použít pouze pro výpis produktů z konkrétních kategorií.)
Níže si ukážeme, jak nastavit tabulku produktů WooCommerce, abyste dosáhli obou možností.
Konfigurace tabulky produktů WooCommerce
Po instalaci a aktivaci pluginu WooCommerce Product Table budete chtít nakonfigurovat jeho výchozí nastavení.
Tím můžete ovlivnit, jaké informace se budou v tabulce produktů zobrazovat a jak bude vše fungovat, například zda se budou zobrazovat určité atributy produktů nebo jak bude fungovat funkce přidání do košíku.
Chcete-li začít, přejděte na WooCommerce → Nastavení → Produkty → Tabulky produktů a získejte přístup k nastavení pluginu kategorie.
Vyplatí se projít všechna dostupná nastavení a vybrat ta, která vyhovují vaší jedinečné situaci. My se však budeme zabývat jen těmi základními, které jsou pro návrh stránky kategorie WooCommerce nezbytné.
Nejprve najděte nastavení Sloupce v části Obsah tabulky. Zde budete kontrolovat, jaké informace se v tabulce zobrazí. Kromě zobrazení základních informací o produktu můžete zobrazit také atributy produktu, vlastní pole a další.
Úplný seznam možností sloupců najdete zde, ale tato konfigurace je dobrou základní verzí, která bude fungovat pro většinu obchodů:
image, name, description, price, buy
Dále najdete část Sloupec Přidat do košíku, která vám umožní ovládat tlačítka pro přidání do košíku.
Pro přilákání hromadných nákupů můžete přidat zaškrtávací políčka, která umožní nakupujícím hromadně přidat do košíku více produktů. Nebo můžete také jen přidat samostatné tlačítko přidat do košíku ke každému produktu (nebo obojí!):
Jakmile budete hotovi, nezapomeňte změny uložit.
Po konfiguraci nastavení produktu máte dvě možnosti, jak vytvořit vlastní kategorie WooCommerce. Na ty se podíváme příště.
2a. Povolení tabulky produktů na všech stránkách kategorií
Tabulka produktů WooCommerce je vybavena možností automatického přidání rozložení tabulky produktů na všechny stránky kategorií. Jedná se o nejjednodušší možnost, jejíž nastavení zabere jen chvilku.
Na stránce nastavení zásuvného modulu jednoduše zaškrtněte políčko „Archivy kategorií produktů“:
Tím se globálně povolí tabulkové rozvržení pro všechny kategorie a nahradí se výchozí rozvržení dodané s motivem.
Další informace o této metodě.
2b. Použití zkráceného kódu pro vytvoření vlastního designu stránky kategorií WooCommerce
K výpisu produktů WooCommerce podle kategorií můžete použít také zkrácený kód. Tato možnost je ideální, pokud nechcete používat rozvržení tabulky produktů na VŠECH kategoriích.
Prostě přidejte zkratku pluginu na běžnou stránku WordPressu a zadejte, ze kterých kategorií chcete produkty vypisovat. Tento postup opakujte tolikrát, kolikrát chcete – jednou pro každou kategorii.
Tímto způsobem v podstatě vytvoříte novou stránku kategorie produktů WooCommerce pro každou kategorii produktů, kterou chcete zobrazit, místo toho, abyste globálně předělávali stránku kategorie WooCommerce.
Můžete buď nadále používat stávající stránky kategorií ve spojení s novým tabulkovým rozložením. Nebo můžete pouze nahradit odkazy na jednotlivé stávající stránky kategorií produktů svými novými stránkami kategorií s tabulkou. (Tip: Pokud již nepoužíváte vestavěné stránky kategorií, přesměrujte je na nové, kde používáte tabulky produktů.)
Chcete-li začít, přejděte na Stránky → Přidat nové a vytvořte základní stránku WordPressu. Poté na stránku přidejte zkrácený kód [product_table]. Můžete také přidat název kategorie pomocí běžného pole title.
Ve výchozím nastavení bude zkrácený kód zobrazovat všechny vaše produkty WooCommerce.
Můžete však použít parametr category shortcode a vyfiltrovat produkty z konkrétních kategorií a/nebo podkategorií. Můžete také kombinovat více kategorií nebo vytvořit podmínky, například že produkt musí být ve více kategoriích nebo podkategoriích, aby se zobrazil.
Příklad pro odfiltrování produktů z kategorie „židle“ můžete použít následující zkrácený kód:
[product_table category="chair"]
Pokud chcete přidat obrázek kategorie nebo název kategorie, můžete to také udělat nad zkráceným kódem pomocí běžného editoru WordPress.
Po zveřejnění stránky byste měli vidět nový design stránky kategorie WooCommerce:
Chcete-li vytvořit stránky pro další kategorie WooCommerce, opakujte postup pro každou kategorii nebo podkategorii produktů, kterou chcete zobrazit.
Zlepšete vyhledávání v kategoriích WooCommerce pomocí filtrů
Pokud chcete do svých kategorií WooCommerce přidat další nástroje pro vyhledávání a filtrování, máte dvě možnosti:
- Možnosti vyhledávání, třídění a filtrování můžete přidat prostřednictvím nastavení tabulky produktů WooCommerce. Ty se zobrazí nad nebo pod tabulkou produktů.
- WooCommerce Product Table obsahuje widgety, které můžete použít k přidání filtrů do postranního panelu.
Můžete si vybrat preferovaný způsob, nebo je také zcela v pořádku použít oba přístupy současně. To umožní vašim nakupujícím vybrat si preferovanou metodu.
Chcete-li přidat možnosti vyhledávání, třídění a filtrování přímo do rozvržení tabulky, přejděte do WooCommerce → Nastavení → Produkty → Tabulky produktů. Poté přejděte do sekce Ovládací prvky tabulky a nakonfigurujte možnosti podle svých preferencí:
Více se dozvíte v tomto článku nápovědy.
Chcete-li použít widgety filtru, přejděte do Vzhled → Widgety. Tam najdete čtyři nové widgety s předponou „Tabulka produktů:“. Můžete přidat všechny widgety, nebo vybrat pouze konkrétní filtry, které chcete zahrnout:
Tady je příklad, jak mohou vypadat obě sady filtrů:
Jak vytvořit vlastní design stránky kategorie WooCommerce pomocí kódu
Pokud se vyznáte v jazycích PHP, HTML a CSS, je možné vytvořit vlastní design stránky kategorie WooCommerce také pomocí kódu, bez zásuvného modulu WooCommerce.
Budete chtít pracovat se souborem archive-product.php ve svém tématu nebo podřízeném tématu. Stejný přístup můžete použít také k úpravě stránek jednotlivých produktů prostřednictvím souboru single-product nebo jiných částí vašeho obchodu.
Naneštěstí, protože pro provedení každé změny budete muset přímo upravit kód v souborech šablony vašeho tématu, není tato metoda přístupná pro uživatele, kteří nejsou vývojáři. Pokud potřebujete pomoc, doporučujeme obrátit se na Codeable nebo zůstat u jednoduššího způsobu rozvržení tabulky uvedeného výše.
Vytvořte si vlastní design stránky kategorie WooCommerce ještě dnes!
Vytvoření vlastního designu stránky kategorie WooCommerce vám umožní využít přívětivější způsob zobrazení vašich produktů.
Pomocí rozvržení stránky kategorie založeného na tabulce jste schopni zobrazit více produktů spolu s více podrobnostmi o každém produktu.
Můžete také přidat spoustu užitečných možností vyhledávání a filtrování, které nakupujícím pomohou najít produkty.
Efektivnějším propojením nakupujících s produkty, které je zajímají, můžete prodat více produktů a zvýšit tržby svého obchodu.
Chcete-li použít tabulkový design pro své kategorie WooCommerce, můžete použít plugin WooCommerce Product Table. Nastavení je snadné a ke zprovoznění nebudete potřebovat žádné speciální technické znalosti, jako kdybyste chtěli přímo upravit soubor šablony archivu.
Začněte ještě dnes a vytvořte efektivnější způsob, jak mohou zákazníci procházet kategorie produktů ve vašem obchodě WooCommerce.
Ještě dnes se můžete podívat, jak se ve vašem obchodě WooCommerce prochází kategorie produktů.