Pridanie WooCommerce do rámca Genesis je jedným z najlepších spôsobov, ako vybudovať stabilnú a rýchlo fungujúcu stránku elektronického obchodu. Vzhľadom na povahu rámca Genesis má však určité zvláštnosti. V tomto článku vás prevediem najdôležitejšími krokmi procesu inštalácie a prispôsobenia pre váš nový obchod.
Pri inštalácii WooCommerce a Genesis Framework uvidíte, čo dostanete priamo z krabice. Dodáva sa s obchodom s veľmi jednoduchým dizajnom a pevným základom kódu.
Pomocou stratégií načrtnutých v tomto článku si budete môcť prispôsobiť hlavičky a päty vo svojej novej inštalácii WooCommerce tak, aby zodpovedali vašej firemnej identite, budete vedieť, ktoré doplnky vám pomôžu efektívne spustiť WooCommerce s Genesis (a inými témami) a budete Pochopíte, ako môžete integrovať WooCommerce do svojej vlastnej detskej témy založenej na Genesis Framework.
Skôr ako začneme, dovoľte mi povedať varovanie. NEPOSTUPUJTE spolu s týmto tutoriálom vo svojom online obchode, ale namiesto toho si vytvorte kópiu svojho obchodu alebo úplne novú inštaláciu. Začneme od nuly s obchodom, ktorý na začiatku nevyzerá dobre a pravdepodobne ani trochu nebude zodpovedať vašej firemnej identite. Uskutočnenie tohto návodu v obchode, ktorý je vystavený živej návštevnosti, určite poškodí vaše predajné čísla.
Proces inštalácie
Pre demonštračné procesy spustím vzorovú webovú stránku pre tento príspevok s prázdnou inštaláciou WordPress v mojom miestnom prostredí Docker. Budete môcť sledovať všetky stránky WordPress, ktoré sú aktualizované na najnovšiu verziu (4.9.8 v čase písania).
Ak ešte nemáte pripravenú webovú stránku, odporúčam vám pozrieť sa na plán Hostinger pre spravovaný hosting WooCommerce. Akonáhle sa váš obchod stane populárnejším, budete navždy vďační za spoľahlivú webhostingovú spoločnosť a platformu.
Inštalácia rámca Genesis
Prvým krokom pri pridávaní WooCommerce do Genesis Framework je inštalácia oboch komponentov. Budete potrebovať licenciu na Genesis Framework, ktorú môžete získať na adrese Webová stránka StudioPress. Po získaní licencie dostanete prihlásenie do oblasti sťahovania pre Genesis Framework, ktorá vyzerá takto:
Pokračujte a stiahnite si dve zvýraznené témy. V závislosti od zakúpenej licencie môžete v tejto oblasti vidieť viac tém založených na Genesis. Budeme potrebovať len samotný rámec Genesis a detskú tému „Ukážka Genesis“. Genesis Framework poskytuje funkčnosť témy, zatiaľ čo „Genesis Sample“ je podradená téma, do ktorej pridáme WooCommerce.
Po stiahnutí týchto dvoch tém prejdite na svoju stránku WordPress a nainštalujte ich. Aktivujte podradenú tému, aby oblasť vašej témy vyzerala podobne ako táto:
V závislosti od vášho nastavenia môžete vidieť nainštalované ďalšie témy. Na mojej vzorovej webovej stránke (bežiacej na mojom miestnom prostredí Docker) som odstránil všetky ostatné témy, aby som predišiel preplneniu tohto návodu. Nie je prekvapením, že predná časť webovej stránky sa zmenila na niečo, čo nie je obzvlášť zaujímavé.
Ale žiadny strach, produkty WooCommerce čoskoro pridáme na novú, statickú titulnú stránku.
Inštalácia WooCommerce
Ak to chcete urobiť, nainštalujte WooCommerce. Možno už máte na mysli rozšírenia pre WooCommerce, ktoré by ste chceli použiť, ale prosím, ešte nevyskakujte. Najprv sa pozrime, ako spolu hrá WooCommerce a Genesis Framework. Prejdite na stránku Pluginy vo vašom backende WP a zadajte „WooCommerce“. Uvidíte množstvo doplnkov, ale zatiaľ si nainštalujte iba oficiálny doplnok WooCommerce. O rozšírení funkčnosti WooCommerce si povieme neskôr v tomto návode.
Po inštalácii WooCommerce môžete spustiť ich predvoleného sprievodcu nastavením. Tento sprievodca vás prevedie zadaním informácií potrebných na začatie predaja vašich produktov alebo služieb prostredníctvom WooCommerce. Zobrazia sa vám možnosti pre bežné informácie o obchode, ako sú nastavenia adresy alebo meny, platobné brány, spôsoby dopravy a náklady, a ďalšie odporúčané nastavenia, ako je téma Storefront (ktorú nepoužívame, používame vlastnú tému Genesis Child Theme ), automatizované dane cez Jetpack (ktorý opäť nepoužijeme) a integráciu MailChimp (ktorá závisí od vášho výberu poskytovateľa e-mailového marketingu).
V predvolenom nastavení WooCommerce ponúka nasledujúce možnosti platby bez akýchkoľvek ďalších potrebných rozšírení: Priamy bankový prevod (prijatie platby cez BACS), platby šekom (osobné platby prostredníctvom šekov), dobierka a štandard PayPal. Počas procesu platby môžete dodatočne nainštalovať Klarna, Stripe a PayPal Express Checkout. V rámci tohto návodu začleníme aj Stripe, aby sme mohli prijímať platby kreditnou kartou. Pokrytie a porovnanie všetkých troch platobných brán by malo za následok článok sám o sebe.
Pridanie WooCommerce k téme Genesis Child
Aby sme mohli plne integrovať a prispôsobiť WooCommerce s vašou detskou témou Genesis, budeme musieť do obchodu pridať nejaké údaje. Potom uvidíte, ako sú produkty prezentované, a budete môcť sledovať prispôsobovanie detskej témy pomocou populárnych háčikov, akcií a filtrov Genesis.
WooCommerce sa zvyčajne dobre integruje s väčšinou tém. Genesis Framework je však iná hračka, pretože sa vo veľkej miere spolieha na svoje vlastné háčiky a filtre. Zatiaľ čo tieto tvoria krásne možnosti rozloženia a prispôsobenia, WooCommerce musí byť integrovaný s týmito háčikmi a filtrami.
Aby sme to mohli urobiť a skontrolovať, či naša integrácia funguje, samozrejme potrebujeme určité množstvo údajov o produktoch. V opačnom prípade by sme v našom obchode nemali produkty na vykonanie optického overenia, či sa produkty zobrazujú správne. Našťastie pre nás, WooCommerce prichádza so sadou demo produktov hneď po vybalení. Tieto produkty môžete použiť v prípade, že si ešte nechcete vytvárať vlastné produkty. Ak ich chcete nainštalovať, môžete spustiť bežný importér WordPress alebo použiť sprievodcu nastavením WooCommerce, ako to robím na snímkach obrazovky nižšie:
Súbor CSV s ukážkovými produktmi nájdete v priečinku pluginov alebo opätovným stiahnutím WooCommerce a rozbalením archívu. Tu je oficiálna dokumentácia o importovaní vzorových údajov WooCommerce. Po prejdení importu vzorových produktov by ste mali mať vo svojom obchode 25 produktov – viac než dosť na to, aby ste ich mohli sledovať a vytvoriť pekný detský motív. Načrtnem dve riešenia na integráciu obchodu s vašou témou. Prvé riešenie je vašou najlepšou voľbou, ak vám nevyhovuje úprava súborov kódu. Druhé riešenie je mojou preferovanou voľbou, pretože vám dáva väčšiu kontrolu a jasnosť o tom, čo sa deje. Je to však technickejšie a bude zahŕňať úpravu súboru function.php vašej detskej témy.
Riešenie 1: Inštalácia Genesis Connect pre WooCommerce
Hneď po návrate do oblasti správy WordPress po inštalácii WooCommerce sa zobrazí výzva na inštaláciu doplnku s názvom „Genesis Connect for WooCommerce“. Tento doplnok je potrebný a dosť dôležitý na používanie WooCommerce s Genesis, pretože rámec tém predstavuje množstvo vlastných háčikov a filtrov. Po vybalení WooCommerce nevie nič o týchto funkciách Genesis – takže jednoduché skopírovanie súborov šablón WooCommerce do priečinka témy nebude fungovať podľa očakávania. Vrelo vám odporúčam pozrieť si popis pluginu plne pochopiť, čo sa deje. Aby som citoval z popisu pluginu:
„Tento doplnok nahrádza vstavané šablóny obchodu WooCommerce svojimi vlastnými verziami pripravenými na Genesis, konkrétne šablónami single-product.php, archive-product.php a taxonomy.php, ktoré sú potrebné na zobrazenie stránky s jedným produktom, hlavnej stránky obchodu a Archívne stránky kategórií produktov a značiek produktu.“
Doplnok si môžete nainštalovať priamo z oblasti WP Admin. Po stiahnutí a aktivácii pluginu sa rozloženie stránky s detailmi produktu výrazne zmení. Tu je porovnanie vedľa seba. Ľavá strana zobrazuje rozloženie podrobností o produkte bez aktívneho doplnku Genesis Connect for WooCommerce. Na pravej strane je nainštalovaný a aktivovaný plugin.
Ako môžete vidieť zo zvýraznených oblastí, urobili sa štyri veľké zmeny:
- Názov je teraz umiestnený vedľa obrázka namiesto nad ním.
- Metadáta pre dátum zverejnenia a autora sú definitívne preč.
- Karta „Recenzie“ na ľavej strane chýba, teraz je pridaná („Recenzie“ sú aktivované v nastaveniach WooCommerce).
- Sekcia komentárov je preč.
Ak chcete ďalej prispôsobiť šablóny WooCommerce (vyžaduje zručnosti kódovania), môžete postupovať podľa oficiálna dokumentácia WooCommerce:
„Upravte súbory v súbore upgrade-bezpečný spôsob použitím prepíše. Skopírujte šablónu do adresára v rámci vašej témy s názvom /Woocommerce, pričom zachovajte rovnakú štruktúru súborov, ale odstráňte podadresár /templates/.
Budete tiež chcieť deklarovať podporu témy pre WooCommerce v súbore functions.php vašej témy pomocou funkcie „add_theme_support“. Skontroluj to Vstup na wiki Github pre viac detailov. Uvedomte si však, že tento krok opäť zmení rozloženie stránky s podrobnosťami o produkte:
Môžete povedať, že bočný panel je presunutý pod produkt a
obsahujúci informácie o produkte je teraz v plnej šírke. Je to spôsobené veľkou nevýhodou používania doplnku Genesis Connect: doplnok môže používať zastarané súbory šablón WooCommerce.
Pokiaľ neplánujete kódovať svoje vlastné súbory šablón WooCommerce alebo len chcete použiť vlastné súbory šablón pre e-maily a iné rozloženia nesúvisiace s frontendom, mali by ste byť v poriadku s používaním doplnku Genesis Connect for WooCommerce. Akonáhle si však budete chcieť prispôsobiť šablóny WooCommerce, možno budete chcieť hľadať riešenie 2 na integráciu WooCommerce s rámcom Genesis.
Riešenie 2: Metóda AlphaBlossom
Prvýkrát som sa s touto metódou stretol u Tonyho Epprighta na jeho Blog AlphaBlossom. Načrtáva metódu, ktorá odstraňuje určité akcie WooCommerce na vytváranie značiek na stránkach WooCommerce a nahrádza tieto akcie značkami založenými na Genesis. Tento prístup mám oveľa radšej ako používanie vyššie uvedeného doplnku, pretože poskytuje oveľa jasnejšie informácie o tom, čo sa deje.
Budete chcieť pohodlne upravovať súbor function.php vašej témy, aby ste mohli pokračovať. Ak nie, môžete ľahko porušiť detskú tému a svoj web.
Toto sú útržky kódu, ktoré idú do vášho súboru functions.php:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-woocommerce-genesis-theme-support-php
Ak chcete zachovať strúhanku WooCommerce namiesto používania strúhanky Genesis, budete chcieť pridať tento útržok kódu:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-replace-genesis-breadcrumbs-woocommerce-php
Ak chcete použiť strúhanku Genesis namiesto strúhanky WooCommerce, použite tento útržok kódu:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-replace-woocommerce-breadcrumbs-genesis-php
A nakoniec pridajte podporu témy do svojho súboru functions.php:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-remove-woocommerce-admin-theme-support-warning-php
Krása Tonyho prístupu spočíva v tom, že necháva háky Genesis na mieste. Ak sa teda na ne spoliehajú iné doplnky, na stránkach WooCommerce budú stále fungovať podľa očakávania. A okrem vyššie uvedeného doplnku bude kód fungovať s prispôsobenými súbormi šablón WooCommerce. V tomto návode som skopíroval všetky šablóny WooCommerce do priečinka témy Genesis Sample, takže ich načítava podradená téma. Zatiaľ čo doplnok porušil rozloženie a presunul bočný panel pod obsah produktu (ako je uvedené vyššie), ďalšia snímka obrazovky ukazuje, že Tonyho kód nič z toho nerobí:
Vidíme, že boli aplikované rovnaké štyri zmeny, ale celkové rozloženie stále funguje nádherne. To isté platí, ak by ste sa mali pozrieť na stránku Obchod.
Všetko vyzerá podľa očakávania a teraz ste pripravení ďalej prispôsobiť svoju detskú tému založenú na Genesis. Zmeniť názov z „Genesis Sample“ na názov vašej značky alebo názov značky klienta je pravdepodobne dobrý nápad.
Ste pripravení inovovať svoje stránky na spravované?
Vybudovali sme vysokovýkonnú platformu určenú pre elektronické obchody každej veľkosti, ktorá vám poskytuje rýchly obchod, ktorý potrebujete na konverziu väčšieho počtu návštevníkov a potenciálnych zákazníkov na výnosy. Vyskúšajte spravovaný hosting WooCommerce ešte dnes a uvidíte rozdiel.
