Modelová případová studie kompletní realizace e-shopu s kosmetikou na WordPressu a WooCommerce

Kosmetický e-shop není jen katalog produktů s tlačítkem „Přidat do košíku“. U zákazníka, který vybírá pleťovou, tělovou nebo vlasovou kosmetiku, hraje velkou roli prezentace produktu, důvěryhodnost značky, jednoduchá orientace a pohodlný nákup.

V této případové studii ukazuji, jak bych postupoval při realizaci nového kosmetického e-shopu pro klienta z Prahy – od návrhu struktury přes programování vlastní WordPress šablony až po WooCommerce, platební bránu, fakturaci, WPML a napojení dopravců.

Zadání projektu

Klient provozuje kosmetickou značku v Praze a vedle stávajícího prodeje chce vybudovat vlastní moderní e-shop. Cílem není použít hotovou univerzální šablonu a pouze do ní vložit produkty. Web má vizuálně odpovídat charakteru značky a zároveň být připravený na další rozvoj.

Základní požadavky projektu:

• WordPress + WooCommerce,
• individuální grafické zpracování,
• vlastní programovaná šablona s ACF,
• česká a anglická jazyková verze,
• online platby,
• automatická fakturace,
• Zásilkovna,
• Balíkovna,
• PPL,
• slevové kupóny a marketingové akce,
• popup okna,
• responzivní zobrazení pro mobilní telefony,
• SEO připravenost,
• jednoduchá administrace pro klienta.

Důležitou součástí zadání je také rychlost webu. Kosmetika je vizuální obor, takže je potřeba pracovat s kvalitními fotografiemi a grafikou, ale současně nenechat několik velkých obrázků zpomalit celý e-shop.

1. Návrh struktury e-shopu

Práce začíná ještě před samotným programováním.

Nejprve připravuji informační architekturu e-shopu a rozdělení produktů tak, aby se zákazník dokázal rychle dostat k tomu, co skutečně hledá.

Základní struktura může vypadat například takto:

Úvodní stránka → E-shop → Kategorie → Produkt → Košík → Pokladna → Potvrzení objednávky

Vedle toho vznikají obsahové stránky značky, informace o dopravě a platbě, kontakty, FAQ, obchodní podmínky a případně magazín nebo poradna.

U kosmetiky bych zároveň nepracoval pouze s klasickými kategoriemi typu „Pleť“ nebo „Tělo“. Produkty lze zákazníkům zpřístupnit také podle jejich potřeby – například hydratace, citlivá pleť, anti-age péče nebo suchá pokožka.

E-shop se tím postupně může změnit z obyčejného katalogu na místo, které zákazníkovi skutečně pomáhá s výběrem.

2. Individuální vizuální návrh

Kosmetický e-shop musí dobře fungovat, ale stejně důležité je jeho vizuální zpracování.

Design proto vychází z identity konkrétní značky. Pracuji s její barevností, typografií, produktovou fotografií a celkovým charakterem komunikace.

Úvodní stránka může kombinovat výraznou hero sekci s hlavním sdělením značky, výběr nejprodávanějších produktů, produktové řady, benefity kosmetiky, doporučené produkty, novinky a obsahové bloky vysvětlující filozofii značky.

Součástí návrhu jsou také drobnější prvky, které mají velký vliv na výsledný dojem – hover efekty produktů, ikony benefitů, štítky „Novinka“ a „Bestseller“, hodnocení, vizuální zvýraznění akční ceny nebo například informace o dopravě zdarma.

Design je od začátku připravován také pro mobilní zařízení. U e-shopu není mobilní verze zmenšenou kopií desktopu. Je potřeba samostatně přemýšlet nad navigací, filtry, produktovou stránkou, košíkem i pokladnou.

3. WordPress a vlastní ACF šablona

Pro realizaci používám WordPress, ale frontend webu není závislý na těžkém univerzálním page builderu.

Šablona je naprogramována individuálně a obsah webu je spravován pomocí Advanced Custom Fields (ACF).

Klient tak například na úvodní stránce vidí v administraci jasně pojmenovaná pole:

Nadpis → Text → Obrázek → Tlačítko → Produkty → Reference → FAQ

Nemusí upravovat komplikovanou strukturu stránky nebo řešit HTML.

Pro opakující se obsah využívám ACF Repeater nebo flexibilní obsahové bloky. Některé sekce tak může klient jednoduše přidávat, odebírat a měnit jejich obsah.

Výhodou vlastního řešení je větší kontrola nad HTML strukturou, designem, responzivitou i rychlostí načítání.

4. WooCommerce jako základ e-shopu

Pro samotný prodej využívám WooCommerce.

Produkty mohou obsahovat klasické informace, jako jsou název, cena, fotografie, skladová dostupnost nebo varianty, ale produktovou stránku lze rozšířit o informace důležité právě pro kosmetiku.

Například:

Účinky produktu
Pro koho je produkt vhodný
Způsob použití
Aktivní látky
INCI / složení
Objem
Upozornění
Související produkty

Tyto údaje lze řešit prostřednictvím vlastních ACF polí a zobrazovat je automaticky na správném místě produktové stránky.

Výsledkem je konzistentní prezentace produktů bez nutnosti pokaždé ručně skládat celý detail.

5. Produktové varianty a vizuální zobrazení

U některých kosmetických produktů nestačí obyčejný textový výběr varianty.

Pokud existují například různé odstíny produktu, mohou být varianty zobrazené vizuálně pomocí barevných vzorků nebo obrázků.

Po zvolení varianty se může automaticky změnit fotografie, cena, skladová dostupnost nebo další informace.

Zákazník tak vidí rozdíl mezi jednotlivými variantami přímo na produktové stránce a nemusí jej hledat v dlouhém rozbalovacím seznamu.

6. Platební brána

Další částí projektu je integrace online platební brány.

Konkrétní poskytovatel se vybírá podle požadavků klienta, obchodních podmínek a očekávaných trhů. WooCommerce následně komunikuje s platební bránou a stav objednávky se aktualizuje podle výsledku platby.

Na pokladně mohou být podle zvoleného řešení dostupné například:

• platba kartou,
• Apple Pay / Google Pay,
• bankovní převod,
• případně dobírka.

Důležitá není pouze samotná možnost zaplatit. Kontroluji také celý proces objednávky – návrat z platební brány, správné změny stavů objednávek a odesílání e-mailových potvrzení.

7. Automatická fakturace

Ruční vystavování faktury ke každé objednávce je při rostoucím počtu objednávek zbytečná administrativní práce.

WooCommerce proto propojuji s fakturačním řešením podle systému používaného klientem.

Po vytvoření nebo zaplacení objednávky mohou automaticky vznikat příslušné doklady a zákazník je může obdržet e-mailem.

Nastavení zahrnuje mimo jiné číselné řady, fakturační údaje, DPH a správné předávání údajů z objednávky.

Cílem je, aby běžná objednávka prošla e-shopem s minimem ručních zásahů.

8. Zásilkovna, Balíkovna a PPL

Pro český e-shop je zásadní také pohodlná doprava.

V tomto modelovém projektu počítám s integrací tří běžně využívaných způsobů doručení:

Zásilkovna – výběr výdejního místa nebo Z-BOXu,

Balíkovna – doručení na podporovaná výdejní místa a boxy,

PPL – doručení na adresu nebo do výdejní sítě podle nastavených služeb.

Zákazník si při objednávce zvolí preferovaného dopravce a tam, kde je to potřeba, také konkrétní výdejní místo.

Součástí konfigurace dopravy jsou ceny, případná hranice dopravy zdarma a návaznost na objednávkový proces.

Například:

Zásilkovna – 79 Kč
Balíkovna – 69 Kč
PPL – 99 Kč
Doprava zdarma od 1 500 Kč

Konkrétní částky jsou samozřejmě nastaveny podle aktuálních smluv klienta s dopravci.

9. Česká a anglická verze pomocí WPML

Pražská kosmetická značka může mít značnou část zákazníků ze zahraničí. Proto je e-shop připraven jako dvojjazyčný.

Pro správu jazykových verzí využívám WPML s podporou WooCommerce.

Překládají se nejen běžné stránky, ale také:

• produkty,
• kategorie,
• atributy a varianty,
• navigace,
• systémové texty,
• košík a pokladna,
• SEO metadata.

URL adresy mohou být například:

/produkty/pletova-kosmetika/

a

/en/products/skincare/

Každá jazyková verze má vlastní indexovatelné URL a lze pro ni připravit odpovídající SEO obsah.

10. Slevové kupóny a marketingové akce

WooCommerce umožňuje vytvářet slevové kupóny přímo v administraci.

Klient může připravit například:

WELCOME10 – 10 % na první objednávku,

PRAHA200 – sleva 200 Kč při splnění podmínek,

nebo individuální kódy pro newsletterové a influencer kampaně.

Kupóny lze omezit minimální hodnotou objednávky, konkrétní kategorií, produktem, datem platnosti nebo počtem použití.

E-shop je díky tomu připravený na sezónní kampaně, newsletter marketing i další formy propagace.

11. Popup okno

Součástí e-shopu je také vlastní popup okno.

Nezobrazuji jej automaticky každému návštěvníkovi ihned po načtení stránky. Popup lze spustit například po určité době, po prohlédnutí části stránky nebo při dalších definovaných podmínkách.

Typickým využitím je nabídka:

„Získejte 10 % na první objednávku.“

Návštěvník zadá e-mailovou adresu, získá slevový kód a současně může být – při správně nastaveném souhlasu – zařazen do newsletterové databáze.

Popup lze následně propojit s používaným e-mailingovým nástrojem.

12. Košík a pokladna bez zbytečných překážek

Jedním z kritických míst každého e-shopu je checkout.

Zákazník už se rozhodl nakoupit a web by mu v této chvíli neměl nákup komplikovat.

Pokladnu proto navrhuji tak, aby obsahovala jen potřebné údaje a zákazník jasně viděl:

produkty → cenu → dopravu → způsob platby → celkovou cenu.

Výběr výdejního místa probíhá přímo v objednávkovém procesu a formulář je přizpůsobený mobilním telefonům.

Součástí testování je také celý proces od vložení produktu do košíku až po potvrzovací e-mail.

13. SEO už při tvorbě e-shopu

SEO nezačíná až po spuštění webu.

Už při návrhu struktury řeším hierarchii kategorií, URL adresy, interní prolinkování, nadpisy, metadata a indexovatelnost jednotlivých typů stránek.

U kosmetického e-shopu mohou vedle produktů přivádět návštěvnost především kvalitně připravené kategorie a poradenský obsah.

Místo vytváření desítek téměř prázdných kategorií proto dává smysl budovat stránky, které odpovídají konkrétním potřebám zákazníků.

Například:

Kosmetika pro citlivou pleť
Hydratační péče o pleť
Přírodní pleťová kosmetika
Jak sestavit každodenní skincare rutinu

Technická část zahrnuje také canonical URL, XML sitemapu, práci s indexací filtrů a podle konkrétní implementace strukturovaná data produktů.

14. Rychlost a technická optimalizace

Velké produktové fotografie dokážou e-shop výrazně zpomalit.

Proto řeším optimalizaci obrázků, moderní obrazové formáty, lazy loading, velikosti náhledů, množství načítaného JavaScriptu a CSS a vhodné cachování.

Výhodou vlastní šablony je, že na stránce nemusím načítat desítky komponent univerzálního page builderu, které konkrétní stránka vůbec nepotřebuje.

Cílem není honit pouze laboratorní skóre. E-shop musí být především rychlý při reálném používání na mobilu.

15. Testování před spuštěním

Před ostrým spuštěním procházím celý nákupní proces jako zákazník.

Testuji především:

• registraci a nákup bez registrace,
• produkty a varianty,
• slevové kupóny,
• košík,
• dopravu,
• výběr výdejního místa,
• platební bránu,
• vytvoření objednávky,
• fakturaci,
• transakční e-maily,
• českou a anglickou verzi,
• mobilní zobrazení,
• základní SEO nastavení,
• chybové stavy a návrat z platební brány.

Teprve poté následuje přesun do ostrého provozu.

Výsledné řešení

Výsledkem je individuálně vytvořený WordPress a WooCommerce e-shop pro kosmetickou značku, který spojuje vlastní vizuální zpracování s praktickou administrací.

Klient získává systém, ve kterém může samostatně přidávat produkty, měnit ceny, spravovat sklad, vytvářet kupóny, zpracovávat objednávky a upravovat obsah webu.

Zákazník na druhé straně dostává přehledný e-shop s kvalitní prezentací produktů, pohodlným nákupem, několika možnostmi dopravy a platby a plnohodnotnou českou i anglickou verzí.

Technologický základ tvoří WordPress, WooCommerce, ACF Pro a WPML, doplněné o platební, fakturační, dopravní a marketingové integrace podle konkrétních potřeb provozovatele.

Celý projekt je přitom navržen tak, aby nebyl hotový pouze „pro dnešní spuštění“. Struktura umožňuje později přidat další jazyk, produktové řady, nové dopravce, newsletter automatizace, věrnostní program nebo další marketingové funkce.

O autorovi

Ing. Jan Pavelka

Jsem webový vývojář a specialista na WordPress, WooCommerce a SEO. Webům a internetovým projektům se profesionálně věnuji od roku 2012.

Pro klienty vytvářím firemní weby, e-shopy a individuální WordPress řešení – od návrhu struktury a programování vlastní šablony přes WooCommerce a externí integrace až po technické SEO a následnou správu.

Pracuji mimo jiné s technologiemi WordPress, WooCommerce, PHP, MySQL, HTML5, CSS/SCSS, JavaScript, ACF Pro a WPML.

Zakládám si na tom, aby výsledkem nebyl jen hezký web, ale technicky dobře postavený nástroj, který je srozumitelný zákazníkům, jednoduše spravovatelný a připravený na další rozvoj.

Ing. Jan Pavelka
WordPress & WooCommerce vývojář
Webdesign • e-shopy • SEO