Úprava WooCommerce e-shopu bez zásahu do jádra

Co je úprava WooCommerce a kdy dává smysl

Úprava WooCommerce je změna vzhledu a chování stránek e-shopu na WordPressu bez stavby nového obchodu. Typicky jde o detail produktu, výpis kategorií, košík a pokladnu: rozložení, barvy, písmo, pořadí prvků, zobrazení na mobilu, drobné interakce.

Úprava se dělá přes CSS (styly, které určují vzhled) a JavaScript (skripty, které mění chování stránky v prohlížeči). Jádro WooCommerce, databáze ani logika objednávek se nemění. Dává smysl, když e-shop funguje, prodává a jen potřebuje vypadat nebo se ovládat jinak, než nabízí šablona.

Pro koho se hodí a pro koho ne

Hodí se, pokud:

• máte e-shop na WooCommerce a chcete změnit vzhled, ne celý systém,
• šablona umí skoro všechno, ale některé stránky nesedí k vaší značce nebo na mobilu,
• chcete upravit košík nebo pokladnu, aby byly přehlednější.

Nehodí se, pokud hledáte stavbu e-shopu na WooCommerce od nuly. Nabídka webrocks je úprava existujícího e-shopu. Nehodí se ani na zásahy do backendu: vlastní platební bránu, napojení skladu nebo změnu logiky výpočtu cen. Pokud máte e-shop na Shoptetu, podívejte se na úpravu Shoptet šablony.

Jak úprava probíhá

1. Zadání. Ujasní se, které stránky a prvky se mají změnit a proč. Pomůže odkaz, snímek obrazovky nebo hotový návrh.
2. Zjištění výchozího stavu. Zjistí se typ šablony (bloková, nebo klasická), jestli košík a pokladna běží na blocích, nebo na shortcode, a které pluginy ovlivňují vzhled.
3. Volba místa pro kód. U blokových šablon se CSS může uložit do Additional CSS v Site Editoru (Vzhled → Editor → Styly). U klasických šablon je Additional CSS v Customizeru (Vzhled → Přizpůsobit). Pro větší úpravy se použije child theme, tedy podřízená šablona, která upravuje rodičovskou bez zásahu do jejího kódu.
4. Úprava a živý náhled. Úpravu uvidíte na svém e-shopu přes odkaz ještě před nasazením. Můžete ji projít na počítači i v mobilu a říct, co změnit.
5. Nasazení a kontrola. Po schválení se úprava nasadí pro všechny návštěvníky a zkontroluje se na hlavních stránkách obchodu.

Co dostanete

• Hotovou úpravu vzhledu v CSS a JavaScriptu, uloženou tak, aby ji aktualizace pluginu ani šablony nesmazaly.
• Odkaz na živý náhled před nasazením.
• Krátký popis, co se změnilo, kde je kód uložený a co zkontrolovat po větší aktualizaci WooCommerce nebo šablony.

Klasický, nebo blokový košík a pokladna

WooCommerce dnes nabízí dvě verze košíku a pokladny. Klasická je stránka se shortcodem, kterou šablony a pluginy upravují přes PHP hooky (místa v kódu, kam se dá připojit vlastní funkce) a přes kopie šablon v child theme. Bloková verze se skládá z bloků Cart a Checkout v editoru WordPressu.

Od WooCommerce 8.3 (listopad 2023) jsou bloky Cart a Checkout výchozí pro nově založené obchody. Obchody, které existovaly dřív, si podle stejného oznámení po aktualizaci ponechaly dosavadní pokladnu. Váš e-shop tedy může běžet na kterékoli z obou verzí a úpravu je potřeba začít tím, že se to ověří.

Co to znamená v praxi:

• Řada klasických hooků na blocích nefunguje. Podle přehledu náhrad hooků nejsou na blokovém košíku a pokladně podporované například woocommerce_before_cart, woocommerce_before_checkout_form nebo woocommerce_review_order_before_payment. Návod nebo snippet z internetu proto na blokové pokladně nemusí nic udělat.
• Pole pokladny se upravují jinak. Úprava základních polí přes woocommerce_checkout_fields na blocích podle stejného přehledu nejde. Přidání vlastních polí řeší samostatné Additional Checkout Fields API, což je zásah mimo úpravu vzhledu.
• CSS se píše pro konkrétní verzi. Bloková pokladna se skládá z bloků, klasická je stránka se shortcodem. Styly se proto píšou a zkoušejí pro tu verzi, kterou obchod skutečně používá.
• Bloky se dají nastavit v editoru. Část změn jde podle dokumentace WooCommerce udělat přímo v nastavení bloků, bez kódu. Zbytek se doladí přes CSS.

Zpět na klasickou verzi se dá přepnout převodem bloku na „Classic Shortcode“, a to vždy u košíku i pokladny zároveň, jak popisuje dokumentace k úpravě košíku a pokladny. Je to rozhodnutí, ne oprava: na verzi pokladny závisí i pluginy. Rozšíření, která s bloky kompatibilní nejsou, se podle stejné dokumentace v blokové pokladně nemusí projevit, například platební brána se nemusí nabídnout.

Na co si dát pozor

• Úpravy přímo v souborech pluginu nebo šablony zmizí. Aktualizace podle dokumentace WooCommerce starou verzi smaže a nahradí novou. Proto se kód ukládá do child theme nebo do Additional CSS, které podle dokumentace WordPressu úpravy při aktualizaci šablony zachová.
• Kopie šablon WooCommerce v child theme zastarávají. Když se WooCommerce aktualizuje, kopie se samy neaktualizují a v System Status se objeví hlášení, že šablona je zastaralá. Podle dokumentace k zastaralým šablonám je pak potřeba je ručně srovnat.
• Child theme není řešení na všechno. Podle dokumentace WordPressu umožňuje aktualizovat rodičovskou šablonu bez ztráty úprav, rozsáhlé úpravy se v něm ale časem špatně spravují.
• Pomalý e-shop úprava vzhledu nezrychlí. Pokud je problém v rychlosti načítání, začněte auditem rychlosti webu. Pokud nevíte, co na stránkách zákazníky brzdí, pomůže UX audit.
• Měření je samostatné téma. Úprava vzhledu neřeší, jestli GA4 správně počítá nákupy. Na to je měření e-shopu v GA4.

Kolik stojí úprava WooCommerce

Úprava WooCommerce nemá v ceníku pevnou cenu. Orientační hodinová sazba podle ceníku je od 500 Kč/hod. Cena závisí na rozsahu a složitosti.

Cenu zvyšuje:

• víc upravovaných typů stránek (detail produktu, kategorie, košík, pokladna),
• úpravy pokladny, kde je potřeba ověřit víc variant dopravy a platby,
• page builder nebo víc pluginů, které vzhled ovlivňují,
• chybějící zadání, které se teprve musí vyjasnit.

Cenu snižuje jasné zadání nebo hotový návrh, úprava jen jedné stránky a čistá šablona bez zbytečných kopií šablon WooCommerce. Konkrétní rozsah se dá probrat přes kontaktní formulář, odpověď přijde do 24 hodin.

Časté otázky

Přepíše aktualizace WooCommerce nebo šablony moje úpravy?

Úpravy uložené v Additional CSS nebo v child theme aktualizace rodičovské šablony nesmaže, a protože nejsou v souborech pluginu, nesmaže je ani aktualizace pluginu. Smaže je jen tehdy, když jsou zapsané přímo v souborech pluginu nebo šablony. Kopie šablon WooCommerce v child theme je po aktualizaci potřeba zkontrolovat.

Jak upravit košík a pokladnu ve WooCommerce?

Nejdřív zjistěte, jestli běží na blocích, nebo na klasickém shortcode. Na blocích se vzhled upravuje v nastavení bloků a přes CSS, řada klasických PHP hooků tam podle přehledu náhrad hooků nefunguje. Na klasické pokladně jde použít i hooky a CSS pro klasickou strukturu.

Je potřeba child theme?

Pro pár řádků CSS ne, stačí Additional CSS. Child theme se vyplatí u větších úprav a vlastního JavaScriptu.

Postaví webrocks e-shop na WooCommerce od nuly?

Ne. Nabídka je úprava vzhledu e-shopu, který už běží. Pro nový jednodušší web bez obchodu je tu tvorba firemního webu.