Divi 5 pro WooCommerce: produktové stránky, které dělají víc než galerii

Affiliate upozornění: Pokud si přes odkazy v tomto článku pořídíte Divi, můžeme získat provizi. Cenu vás to nijak nezvýší a na našem hodnocení to nic nemění.

Produktová stránka, která je jen galerií a tlačítkem „Koupit", nechává peníze na stole. Divi 5 (Elegant Themes) dává přes Theme Builder a nové moduly nástroje, jak z WooCommerce produktové šablony udělat stránku, která vede k nákupu – breadcrumbs pro orientaci, taby na detaily, prvky důvěry a sticky CTA. Divi 5 je aktivně vyvíjený (aktuálně verze 5.8, červen 2026, týdenní aktualizace), takže stavíte na živé platformě.

Tady je, co na produktové stránce v Divi 5 reálně poskládat – a proč.

Začněte u šablony, ne u jedné stránky

WooCommerce produktů máte desítky až tisíce. Jednotlivě je needitujete – postavíte jednu produktovou šablonu v Theme Builderu a ta se aplikuje na všechny produkty. Tím držíte konzistenci a změnu uděláte na jednom místě.

Pokud teprve řešíte, jestli na běžném hostingu WooCommerce vůbec utáhnete, začněte tady:

Hosting pro WooCommerce: proč běžný levný hosting často nestačí

Breadcrumbs: orientace a SEO v jednom

Divi 5 přidal samostatný Breadcrumbs modul – hierarchický strom odkazů, který Elegant Themes popisuje jako obzvlášť užitečný pro „šablony příspěvků a kategorií postavené v Divi Theme Builderu". Na produktové stránce breadcrumbs:

• ukáže zákazníkovi, kde v katalogu je (Domů › Kategorie › Produkt),
• dá mu cestu zpět do kategorie místo opuštění webu,
• pomáhá vyhledávačům pochopit strukturu e-shopu.

Umístěte je nahoru, hned pod header.

Galerie, cena a hodnocení nad ohbím

Nad první přehyb patří to, podle čeho se rozhoduje: galerie, cena, dostupnost a hodnocení. Divi 5 přinesl u obrazových modulů nová nastavení poměru stran a rámování (aspect ratio a framing), takže fotky v galerii drží jednotný formát napříč produkty bez ručního ořezu. To je u e-shopu, kde fotky dodává klient v různých rozměrech, zásadní pro vzhled.

Taby: specifikace, doprava, recenze

Dlouhý popis nikdo nečte odshora dolů. Rozdělte ho do tabů:

• Popis a specifikace
• Doprava a vrácení
• Recenze / hodnocení

Taby drží stránku krátkou a zákazník si proklikne to, co potřebuje. Pro automaticky generovaný obsah dlouhých popisů můžete využít i Table of Contents modul, který Divi 5 nově parsuje z obsahu stránky.

Související produkty a upselly

WooCommerce umí related products a upselly; v Divi 5 je vykreslíte přes loop-based moduly, které pracují s nested elementy (modul v modulu). Cílem je:

• související produkty držet zákazníka v katalogu,
• upsell / cross-sell zvýšit hodnotu objednávky.

Nepřehánějte počet – tři až čtyři relevantní položky fungují líp než dvě řady náhodných produktů.

Bloky důvěry a sticky CTA

To, co odlišuje galerii od prodejní stránky:

• Trust bloky – záruka, doprava zdarma od částky, doba dodání, platební metody, reálné recenze. Divi 5 přidal Tooltip modul, kterým doplníte mikro-vysvětlivky (např. „proč potřebujeme tyto údaje") bez zahlcení layoutu.
• Sticky CTA – tlačítko „Do košíku", které zůstává v dohledu při scrollu. Na mobilu rozhoduje, protože zákazník je daleko od horního tlačítka.

Sticky CTA otestujte na reálném mobilu – ať nepřekrývá obsah ani patičku.

Časté dotazy

Musím každý produkt stylovat zvlášť?

Ne. Postavíte jednu produktovou šablonu v Theme Builderu a Divi 5 ji aplikuje na všechny produkty dané podmínky.

Zvládne breadcrumbs i kategorie a filtry?

Breadcrumbs modul vykreslí hierarchii produkt → kategorie. Pro kategoriální a archivní šablony ho cílíte v Theme Builderu zvlášť.

Jak sjednotit fotky produktů různých rozměrů?

Použijte nová nastavení poměru stran a rámování u obrazových modulů Divi 5 – drží jednotný formát bez ručního ořezu.

Zpomalí sticky CTA a taby stránku?

Samy o sobě výrazně ne, ale na výkon e-shopu má hlavní vliv hosting, počet pluginů a velikost fotek. Rychlost si po nasazení změřte.

Závěr

Produktová stránka v Divi 5, která prodává, stojí na šabloně v Theme Builderu: breadcrumbs pro orientaci, galerie s jednotným poměrem stran, cena a hodnocení nad ohbím, taby na detaily, související produkty a upselly pro hodnotu košíku, a hlavně trust bloky se sticky CTA. Postavíte to jednou a profituje z toho celý katalog.

Vyzkoušet Divi 5

Zdroje a další čtení