Dňa 6. decembra 2018 vypadol nový kontroverzný editor pre WordPress a volá sa Gutenberg. Zatiaľ čo mnohí sú znepokojení tým, ako bol uvedený na trh, nemyslím si, že niekto môže poprieť, že Gutenberg je budúcnosťou WordPress. To tiež znamená, že Gutenberg je budúcnosť WooCommerce, takže sa poďme ponoriť a uvidíme, čo Gutenberg v súčasnosti ponúka WooCommerce.
Aké Gutenbergove bloky sú dostupné pre WooCommerce?
V predvolenom nastavení nie sú k WooCommerce pribalené žiadne bloky od verzie WooCommerce 3.5.1, takže budete musieť prejsť na stránku WooCommerce, aby ste získali Bloky produktov WooCommerce. WooCommerce Product Blocks je bezplatný doplnok k WooCommerce. Ak chcete pokračovať so mnou, musíte si stiahnuť doplnok, pridať ho na svoju stránku a potom ho aktivovať. Odtiaľ prejdite na stránku a začnite pridávať produkty na web.
Pridanie produktu WooCommerce s Gutenbergom
Ak chcete začať pridávať produkty, začnite kliknutím na znamienko plus v ľavom hornom rohu vašej stránky s podporou Gutenberg. Teraz zadajte „produkty“, aby ste filtrovali možnosti blokovania až na bloky, ktoré sa zaoberajú produktmi v obchode. Potom kliknite na blok „Produkty“.
Tento blok by sa mal objaviť pod akýmkoľvek obsahom na vašej stránke. Teraz si môžete vybrať zobrazovanie produktov rôznymi spôsobmi. Začnime pridaním jednotlivého produktu na našu stránku. Kliknite na „Jednotlivé produkty“, čím by sa malo zobraziť vyhľadávacie pole, v ktorom môžete začať hľadať svoje produkty podľa ich názvov. Keď nájdete požadovaný produkt, kliknite naň a pridajte ho do bloku.
Nie ste však obmedzení na jeden produkt, dokonca môžete pridať viacero produktov z jedného vyhľadávania. V predvolenom nastavení sa zobrazia uvedené naprieč spôsobom mriežky.
Keď máte vybraté produkty, ktoré chcete zobraziť, kliknite na tlačidlo Hotovo a potom sa uistite, že ste stránku uložili.
Okrem ručného výberu produktov môžete na stránku pridať produkty z konkrétnej kategórie. Ak existujú podkategórie, môžete si vybrať, ktoré z nich chcete zobraziť.
Výberom kategórie pridáte na stránku každý produkt v tejto kategórii.
Produktový blok môžete použiť aj na zobrazenie produktov podľa konkrétneho atribútu produktu. Keď sa blíži Deň svätého Valentína, mohli by ste použiť atribút farebný produkt na vytvorenie vlastnej stránky so všetkými červenými produktmi, ktoré máte v obchode, podľa sezóny.
Rovnako ako ostatné spôsoby, ktorými sme sa zaoberali zobrazovaním produktov, aj týmto sa na vašu stránku pridajú všetky produkty, ktoré zodpovedajú atribútu. Môžete použiť množstvo atribútov, ako napríklad:
- Produkty vo výpredaji
- Najlepšie predávané
- Vybrané produkty
- Najlepšie hodnotené produkty
Druhý blok, ktorý je k dispozícii s doplnkom WooCommerce Product Blocks, vám umožňuje zobraziť produkty podľa kategórie, čím sa duplikuje funkcia pridávania produktov podľa kategórie s blokom produktov.
Prispôsobenie bloku produktov WooCommerce Gutenberg
Aj keď sme prešli niektorými základmi pridávania blokov produktov do vášho obsahu, nepozreli sme sa na to, aké sú možnosti prispôsobenia na maximalizáciu vzhľadu vašej stránky.
Na začiatok vám WooCommerce Product Blocks umožňuje prispôsobiť počet produktov, ktoré sa zobrazujú v stĺpcoch aj riadkoch.
Môžete to využiť na zobrazenie jedného produktu na dlhej predajnej stránke tak, že váš produktový blok bude zobrazovať iba jednu položku v stĺpci. Potom by ste si vybrali jeden produkt, ktorý chcete pridať do bloku.
Nastavenia blokovania môžete použiť aj na zmenu poradia vašich produktov s nasledujúcimi možnosťami, ktoré sú teraz k dispozícii:
- Najnovšie – najnovšie ako prvé
- Cena – nízka až vysoká
- Cena – od najvyššej po najnižšiu
- Hodnotenie – prvé najvyššie
- Predaj – väčšina na prvom mieste
- Názov – podľa abecedy
Nakoniec v rámci rozšírených možností môžete pridať vlastnú triedu CSS, ak chcete urobiť ďalší štýl vo svojom bloku, aby vyhovoval vašej téme. Vzhľadom na správne pravidlá CSS môžete zmeniť rozloženie.
Vytvorenie vlastnej vstupnej stránky produktu s WooCommerce a Gutenberg
Vezmime si teraz niektoré poznatky, ktoré sme získali o WooCommerce a Gutenbergovi, aby sme si vytvorili dlhodobú predajnú stránku pre produkt. Môžete začať vytvorením novej stránky s názvom. Do bloku odseku som tiež pridal trochu textu a použil som možnosť iniciálky, ktorá sa nachádza na pravej strane našich nastavení bloku.
Pri mnohých dlhých predajných stránkach skončíme s pridaním produktu na stránku niekoľkokrát. Robíte to preto, aby ste ľuďom poskytli príležitosť kúpiť si váš produkt hneď, ako budú presvedčení, že je to pre nich výhodná kúpa.
Potom pridajte blok produktov a vyberte jeden produkt, ktorý chcete pridať na svoju stránku. Potom prejdite na pravú stranu a zmeňte zobrazenie stĺpca na jeden produkt na stĺpec. To by vám malo poskytnúť veľkú verziu produktu zobrazenú na stránke s tlačidlom pridať do košíka hneď pod ňou.
Potom kliknite na tri zvislé bodky v hornej časti bloku produktu a vyberte možnosť „Pridať do opakovane použiteľných blokov“. Umožní nám to vziať si blok, ktorý sme si vytvorili, a ľahko sa dostať k presným nastaveniam, ktoré už máme, bez toho, aby sme sa museli neskôr obťažovať hľadaním produktu a zmenou nastavení stĺpcov. Pomenujte tento blok ako chcete a potom uložte opakovane použiteľný blok.
Teraz môžeme na stránku pridať ďalší text, ktorý by sa použil na to, aby sme používateľom ukázali výhody našej úžasnej mikiny s kapucňou. Využime dokonca blok citátov na poskytnutie svedectva od jedného zo spokojných klientov s kapucňou.
Potom by ste za normálnych okolností pridali ďalší text, v ktorom by ste používateľom ukázali výhody vášho produktu alebo odpovedali na akékoľvek otázky, ktoré by mohli mať o produkte. Môžeme na to použiť stĺpcový blok a odpovedať na dve otázky pre nášho používateľa. Túto stránku môžeme dokončiť použitím nášho opakovane použiteľného bloku s kapucňou a pozvať používateľa, aby si znova kúpil našu úžasnú mikinu.
Predtým, keď klienti chceli vlastnú vstupnú stránku produktu, ako je táto, museli použiť nejaký doplnok na vytváranie stránok. Niektoré z nich sú slušné, ale prevažná väčšina je na vašom webe menej než žiaduca. Keď porovnám skúsenosti Gutenberga s týmito ďalšími možnosťami vytvárania stránok, Gutenberg je pre mojich zákazníkov oveľa intuitívnejšie, aby ho mohli používať sami bez toho, aby som im musel vytvárať čokoľvek na mieru.
Ďalšie zdroje Gutenberg
Ak sa teraz, keď WordPress 5.0 vypadol, chystáte na Gutenberga poriadne zamotať hlavu, tu je zoznam solídnych školiacich zdrojov, ktoré môžete použiť, aby ste sa dostali do tempa.
Kombinácia WooCommerce a Gutenberg
Toto krátky tutoriál o Gutenbergovi vám pomôže začať myslieť v blokoch pri rozložení obsahu. Patrick uvádza ďalší dôvod, prečo by ste chceli použiť dlhšiu predajnú stránku na predaj rôznych typov produktov.
Školenie SolidWP
SolidWP nám poskytuje dva skvelé zdroje pre Gutenberga. Prvým je a webinár o WooCommerce a Gutenberg. Toto je hodina rozhovorov o Gutenbergovi a WooCommerce.
Druhým zdrojom je a krátke video o tom, ako môžete použiť Gutenberg na svojej stránke. Spomínajú skutočnosť, že do svojich blokov môžete pridať widgety, čo otvára oveľa viac možností rozloženia stránky, ako som uviedol vyššie.
Gutenberg a WooCommerce: Práca s produktovými blokmi
V Robot Ninja poskytujú a návod na možnosti blokovania produktov ktoré sme tu prebrali. Dopĺňajú ho tým, že hovoria o tom, ako zabezpečiť, aby bol váš web pripravený na Gutenberga. Ak prevádzkujete akúkoľvek stránku, mali by ste mať nastavenú predbežnú verziu, ale najmä pre stránku elektronického obchodu. Uistite sa, že ste využili túto radu a otestovali svoje stránky s Gutenbergom pred spustením.
Postavte si svoj vlastný Gutenbergov blok
Bill Erickson nám poskytuje návod, aké to pre neho bolo postaviť blok pre Gutenberga. Spomína aj skvelý kurz od Zaca Gordona na Gutenberg Development.
Gutenberg je tu
Milujeme alebo nenávidíte tento nápad, Gutenberg je tu, takže je čas ponoriť sa do toho, čo to znamená pre vaše stránky. Konkrétne by ste mali byť oboznámení s tým, ako Gutenberg funguje a aké možnosti existujú pre vašu stránku WooCommerce.
Dnes som vám dal malý pohľad na to, ako môžete použiť Gutenberg so svojou stránkou na vytvorenie dlhej predajnej stránky pre vaše produkty. V Gutenbergu je toľko sily pre majiteľov obchodov. Všetko, čo musíte urobiť, je ponoriť sa do toho a začať testovať svoj obsah.
Vybudujte si vysokovýkonný obchod WooCommerce Store
Vytvorte obchod, ktorý konvertuje návštevnosť pomocou riešenia Hostinger Managed WooCommerce Hosting. Štandardne sa dodáva s Jilt, aby vám pomohol obnoviť opustené vozíky, testuje výkon vždy, keď ich potrebujete, a platforma znižuje zaťaženie dopytov o 95 %, čo vedie k rýchlejšiemu ukladaniu.
