# Šablona pro WooCommerce s bloky pro každou obrazovku obchodu URL: https://canvaswp.com/cs/woocommerce/ Updated: 2026-11-03 WooCommerce Navrhněte stránku produktu, mřížku obchodu, košík a pokladnu pomocí bloků v editoru, který vám nabízí WordPress, a poté začněte z dema, které přijde jako funkční obchod. WooCommerce spravuje objednávky, Canvas jim dodá vzhled. Aktualizováno 3. listopadu 2026 24 Bloky WooCommerce 18 Předlohy obchodu 21 Dema obchodů, která můžete importovat Bloky ## 24 bloků pro čtyři obrazovky, na kterých se prodává Každá část obchodu WooCommerce, na kterou se zákazník dívá, je blok s panelem nastavení, takže ji můžete přesunout, změnit její styl nebo ji vynechat, aniž byste sáhli do souboru předlohy. ### Stránka produktu 11 bloků Sestavte rozložení jednoho produktu blok po bloku, nebo začněte z některé z dodaných předloh a přesouvejte jednotlivé části. #### Product Images Součástí každého tarifu Zobrazuje hlavní obrázek produktu WooCommerce a volitelné náhledy galerie. #### Product Gallery Linker Zahrnuto v každém tarifu Pruh miniatur, který přesune karusel galerie produktu na obrázek, na který kliknete. #### Product Price Zahrnuto v jakémkoli tarifu Zobrazuje cenu produktu WooCommerce včetně akční ceny a formátování měny. #### Product Rating Zahrnuto v každém tarifu Zobrazuje hodnocení hvězdičkami a volitelně počet recenzí aktuálního produktu WooCommerce. #### Product Meta Zahrnuto v každém tarifu Zobrazuje kartu s údaji o produktu: SKU, kategorie a štítky. #### Product Short Description Součástí každého tarifu Zobrazí krátký popis produktu i se zachovaným formátováním odstavců. #### Variation Swatches Součást každého tarifu Barevné tečky nebo tlačítka ve tvaru pilulek, kterými se vybírá varianta variabilního produktu. #### Přidat do košíku Zahrnuto v libovolném tarifu Zobrazí formulář WooCommerce pro přidání do košíku aktuálního produktu s volitelným polem pro množství. #### Product Tabs Součástí každého tarifu Vykresluje záložky s údaji o produktu WooCommerce: Popis, Doplňující informace a Recenze. #### Product Share Součástí každého tarifu Zobrazuje kartu „Sdílet:“ s odkazy na sdílení na sociálních sítích pro aktuální produkt WooCommerce. #### Related Products Součástí každého tarifu Zobrazuje mřížku produktů WooCommerce, které souvisejí s aktuálním produktem. Zobrazí se pouze v šablonách jednotlivého produktu. ### Obchod a jeho katalog 5 bloků Mřížky, karusely, karty kategorií a filtr cen, z nichž každý může čerpat z kategorie, štítku, vyhledávání nebo ručně vybraného seznamu. #### Produkty Zahrnuto v každém tarifu Zobrazuje produkty WooCommerce v mřížce nebo seznamu. Filtruje podle zdroje, kategorie, štítku a řazení. #### Product Categories Zahrnuto v každém tarifu Zobrazuje kategorie produktů WooCommerce jako responzivní mřížku karet s náhledy, názvy a počty produktů. #### Product Carousel Součástí každého tarifu Zobrazuje produkty WooCommerce v posuvném karuselu owl-carousel. Podporuje automatické přehrávání, šipky pro navigaci, tečky a responzivní breakpointy. #### Store Price Filter Součástí každého tarifu Ovládací prvek s dvojitým posuvníkem pro rozsah cen, který filtruje mřížku produktů přímo na místě. #### Conference Tickets Zahrnuto v každém tarifu Cenové boxy pro kategorii vstupenek, každý s rozbalovacím výběrem množství a živým odkazem pro přidání do košíku. ### Košík 3 bloky Stránka košíku, kterou si navrhnete, s nabídkou doplňkového prodeje, kterou nakupující skutečně uvidí. #### Cart Table Zahrnuto v každém tarifu Zobrazuje tabulku košíku WooCommerce s položkami, množstvím a součty. #### Cart Totals Zahrnuto v každém tarifu Zobrazuje panel se součty košíku WooCommerce včetně mezisoučtu, dopravy a tlačítka pro pokladnu. #### Cross-Sells Zahrnuto v každém tarifu Zobrazuje cross-sell produkty z aktuálního košíku WooCommerce. Zobrazí se pouze tehdy, když je košík aktivní a obsahuje cross-sell produkty. ### Pokladna: 3 bloky Fakturační formulář, přehled objednávky a oznámení, která zákazníkovi sdělí, co se právě stalo. #### Checkout Billing Součástí každého tarifu Zobrazuje formulář fakturační adresy pro pokladnu WooCommerce. #### Checkout Order Review Součástí každého tarifu Zobrazuje souhrn přehledu objednávky v pokladně WooCommerce s položkami a součty. #### WooCommerce Notices Zahrnuto v každém tarifu Zobrazuje oznámení WooCommerce: chybová hlášení, zprávy o úspěchu nebo informační oznámení. ### Jinde v obchodě 2 bloky Bloky obchodu, které jsou mimo čtyři výše uvedené obrazovky. #### Seznam přání Zahrnuto v každém tarifu Produkty, které si zákazník uložil, s cenou, stavem skladu a tlačítkem Přidat do košíku. Umístěte jej na stránku vybranou v Možnostech šablony, Wishlist. #### Tlačítko seznamu přání Zahrnuto v každém tarifu Uloží aktuální produkt do seznamu přání nakupujícího. Použijte jej v předlohách produktů a v kartách produktů. ### Obchod s oblečením Módní katalog se stránkami kolekcí, variabilními produkty a košíkem v hlavičce, který průběžně počítá položky. [Šablony pro e-commerce](https://canvaswp.com/cs/wordpress-themes/ecommerce/) ### Nábytek Prodej i pronájem v jednom katalogu, přičemž mřížka produktů i stránka jednotlivého produktu jsou sestaveny z bloků. [Šablony pro interiérový design](https://canvaswp.com/cs/wordpress-themes/interior-design/) ### Víno Obchod vinařství, kde design nese fotografie produktů a stránky obchodu leží za ním. [Šablony pro restaurace](https://canvaswp.com/cs/wordpress-themes/restaurant/) Tři z 21 dem obchodů. Každá část, na kterou se nakupující na těchto stránkách dívá, je blok s panelem nastavení. [Všech 314 bloků Canvas](https://canvaswp.com/cs/blocks/) Chování ## Co nakupující dělají bez obnovení stránky Tři části chování obchodu, na něž obvykle potřebujete samostatný plugin, jsou součástí integrace. ### Barevné vzorky atributů V administraci přiřaďte hodnotě atributu produktu barvu a variabilní produkty místo rozbalovacího seznamu nabídnou barevné tečky nebo tlačítka, takže zákazník vybere variantu jen podle vzhledu. ### Přidání do košíku přes AJAX Přidáním produktu z mřížky, karuselu nebo překryvu karty se košík aktualizuje přímo. Zákazník zůstane na stránce, kterou prohlíží, a mini košík v hlavičce dál zobrazuje počet položek. ### Styly karet produktů Nastavte každý obrázek katalogu na jeden tvar, aby se karty zarovnaly, vyberte, zda se další obrázky galerie zobrazí po najetí myší, nebo se budou přepínat jako prezentace, a zvolte, co bude nabízet překryv po najetí: koupit, rychlý náhled, nebo obojí. Předlohy ## 18 obchodních předloh v editoru webu Každá obrazovka obchodu je bloková předloha, kterou otevřete, upravíte a obnovíte v Editoru webu stejným způsobem jako jakoukoli jinou blokovou předlohu. ### Rozvržení jednotlivých produktů Rozvržení produktové stránky lze zvolit jako výchozí, s lepivým souhrnem, který sleduje galerii, jako seznam, s barevně vedeným designem, s obchodním designem, jedním ze dvou rozvržení galerie s vlastním propojením, nebo s variantou s postranním panelem vlevo, vpravo nebo se dvěma postrannimi panely. ### Rozvržení stránek obchodu Rozvrhněte samotný obchod na celou šířku, s levým postranním panelem, s pravým postranním panelem nebo s postranními panely na obou stranách, aby filtry a kategorie byly tam, kde je váš katalog potřebuje. ### Archivy, košík a pokladna Archiv obchodu, archivy kategorií produktů, košík a pokladna jsou dodávány jako předlohy spolu s přepisy šablon WooCommerce, které poskytuje šablona. Šablony obchodu jsou v panelu Šablony v Editoru webu uvedeny pod položkou woocommerce vedle těch od Canvas a resetují se ze stejné obrazovky. Přiřaďte rozvržení jednotlivým produktům v editoru, nebo nastavte výchozí pro celý obchod v Možnostech šablony. Předloha, kterou upravíte v Editoru webu, zůstane po aktualizacích zachována a Canvas vám oznámí, které z nich se po aktualizaci změnily. Možnosti šablony ## 39 možností obchodu, 5 záložek Výchozí nastavení pro celý obchod: katalog, stránku produktu, košík a pokladnu a minikošík v hlavičce, plus režim katalogu pro obchody, které přijímají poptávky. Počet produktů na stránku, stránkování, tvar obrázku produktu, další obrázky v galerii i překryv karty se nastavují zde a blok, který nastaví některou z těchto hodnot sám, má na stránce, kde je umístěn, přednost. - Katalog: počet produktů v řádku na každé velikosti obrazovky, tvar obrázku, chování při najetí myší, odznak výprodeje - Stránka produktu: co zobrazuje detail produktu a přilepená lišta pro přidání do košíku - Košík a pokladna: ukazatel postupu k bezplatné dopravě a pokladna, která nic nerozptyluje - Mini košík: co dělá košík v hlavičce, když zákazník něco přidá - Režim katalogu: skrýt ceny a tlačítko pro koupi, zobrazit tlačítko pro dotaz [Možnosti obchodu, které vám pomohou prodávat](https://docs.canvaswp.com/store-options-that-help-you-sell) [Režim katalogu](https://docs.canvaswp.com/catalog-mode) [Seznam přání](https://docs.canvaswp.com/the-wishlist) Možnosti šablony, sekce Obchod, karta Katalog. Výkon ## Pět přepínačů WooCommerce WooCommerce načítá skripty a styly na každé stránce webu, včetně těch, které nic neprodávají. Těchto pět přepínačů tuto zátěž odstraní, přičemž každý z nich lze vrátit zpět. - Odstranit JavaScript WooCommerce na stránkách, které nevykreslují žádný výstup obchodu - Vypněte sledování atribuce objednávek, pokud tyto přehledy nečtete - Zastaví opakované dotazování skriptu cart fragments při každém načtení stránky. - Odeberte knihovnu pro sílu hesla mimo stránky účtu a pokladny - Vypnout přibalenou knihovnu Select2 mimo stránky pokladny a účtu [Všech 35 optimalizací výkonu](https://canvaswp.com/cs/performance/) Možnosti šablony, Výkon, karta WooCommerce. Dema obchodů ## 21 dem je funkčních obchodů WooCommerce Produkty, kategorie, atributy, košík a pokladna, naimportované a připravené na testovací objednávku. Kterýkoli z nich si můžete před rozhodnutím zobrazit naživo. ### [Demo Bag Store, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/ecommerce/) Obchod a e-commerce · 9 stránek · [Co se nainstaluje: bloky a typy obsahu dema Bag Store](https://docs.canvaswp.com/design-ecommerce) ### [Demo Barber Shop, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/barber/) Krása a lázně · 7 stránek · [Co se nainstaluje: bloky a typy obsahu dema Barber Shop](https://docs.canvaswp.com/design-barber) ### [Demo CanvasRoam, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/youtube-creator/) Portfolio a osobní weby · 10 stránek · [Co se nainstaluje: bloky a typy obsahu dema CanvasRoam](https://docs.canvaswp.com/design-youtube-creator) ### [Demo Christmas Store, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/xmas/) Obchod a e-commerce · 6 stránek ### [Demo Clothing Store, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/store/) Obchod a e-commerce · 19 stránek · [Co se nainstaluje: bloky a typy obsahu dema Clothing Store](https://docs.canvaswp.com/design-store) ### [Demo Conference, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/conference/) Akce a svatby · 25 stránek · [Co se nainstaluje: bloky a typy obsahu dema Conference](https://docs.canvaswp.com/design-conference) ### [Demo Drone, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/drone/) Obchod a e-commerce · 12 stránek ### [Demo eBook, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/ebook/) Obchod a e-commerce · 9 stránek ### [Demo Fashion Shop, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/shop/) Obchod a e-commerce · 25 stránek ### [Demo Fashion Store, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/fashion-store/) Obchod a e-commerce · 16 stránek ### [Demo FORM 2026, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/event-conference/) Akce a svatby · 14 stránek · [Co se nainstaluje: bloky a typy obsahu dema FORM 2026](https://docs.canvaswp.com/design-event-conference) ### [Demo Furniture, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/furniture/) Obchod a e-commerce · 12 stránek ### [Demo Game of Canvas, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/gaming/) Zábava a komunita · 12 stránek · [Co se nainstaluje: bloky a typy obsahu dema Game of Canvas](https://docs.canvaswp.com/design-gaming) ### [Demo Illustrator, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/illustrator/) Portfolio a osobní weby · 7 stránek · [Co se nainstaluje: bloky a typy obsahu dema Illustrator](https://docs.canvaswp.com/design-illustrator) ### [Demo Jewelry Boutique, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/jewellery-boutique/) Obchod a e-commerce · 17 stránek ### [Demo Podcasts, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/podcasts/) Blog a magazín · 13 stránek · [Co se instaluje: bloky a typy obsahu dema Podcasts](https://docs.canvaswp.com/design-podcasts) ### [Demo Pottery Shop, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/shop-2/) Obchod a e-commerce · 12 stránek ### [Demo Speaker Store, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/speaker/) Obchod a e-commerce · 11 stránek ### [Demo Supplement Store, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/supplements/) Obchod a e-commerce · 13 stránek ### [Demo Wildroot Gear, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/gear/) Obchod a e-commerce · 14 stránek · [Co se nainstaluje: bloky a typy obsahu dema Wildroot Gear](https://docs.canvaswp.com/design-gear) ### [Demo Wine Estate, živý náhled (otevře se v nové záložce)](https://demos.canvaswp.com/wine/) Jídlo a pití · 10 stránek · [Co instaluje: bloky a typy obsahu dema Wine Estate](https://docs.canvaswp.com/design-wine) [Všech 88 dem](https://canvaswp.com/cs/demos/) Import do živého obchodu ## Vaše stránky obchodu se převezmou, nekopírují se Obvyklá obava při importu designu obchodu je, že skončíte se dvěma pokladnami. Canvas namapuje stránky WooCommerce z dema na stránky, které váš web již má. Obrazovka importu, přes kterou se nahrává každé demo obchodu, a vrácení změn, které import zruší. ### Jeden obchod, jeden košík, jedna pokladna Importér najde vaše stávající stránky WooCommerce a nasměruje menu a odkazy dema přímo na ně. ### Vratné Vše, co import vytvořil, je evidováno, takže jedna obrazovka odstraní ukázkový obsah a obnoví možnosti a menu, které tu byly dříve. ### Obsažené produkty Ukázkové produkty, kategorie, atributy a barevné swatche přicházejí s designem, takže katalog se správně zobrazí, dokud je nenahradíte vlastními. ### Nebo jen stránky Zvolíte-li import jen stránek, získáte z dema stránky bez Možností šablony, menu ani úvodní stránky. Otázky ## Prodej s Canvas Na co se majitelé obchodů ptají jako první. [Dokumentace](https://docs.canvaswp.com/setting-up-your-shop) podrobně popisuje každý blok a každou možnost. **Potřebuji ještě plugin WooCommerce?** Ano, Canvas přidává bloky, předlohy a možnosti k WooCommerce a nic z něj nenahrazuje. Objednávky, produkty, daně, doprava a platby zůstávají ve WooCommerce, kde je očekávají vaše další rozšíření. Pokud začnete od dema obchodu, průvodce nastavením nainstaluje a aktivuje WooCommerce ještě před spuštěním importu. **Nahradí import dema obchodu moje stránky obchodu a pokladny?** Ne, importér Canvas převezme stránky WooCommerce, které váš web již má, takže se neobjeví žádná druhá stránka obchodu, košíku, pokladny ani účtu. Vaše stávající produkty a objednávky zůstanou beze změny. **Mohu tyto bloky kombinovat s vlastními bloky WooCommerce?** Ano, bloky obchodu Canvas jsou běžné registrované bloky, takže fungují vedle bloků WooCommerce a základních bloků WordPressu ve stejné šabloně i na stejné stránce. Můžete je nahrazovat jeden po druhém, aniž byste se zavazovali k celému rozvržení. **Jak fungují barevné vzorky?** Přiřaďte termínu atributu produktu barvu v administraci WordPress a blok Canvas Variation Swatches zobrazí tento atribut místo rozbalovacího seznamu jako barevné tečky nebo tlačítka ve tvaru pilulek na stránce produktu i v předlohách, které jej používají. **Jsou bloky obchodu součástí mého tarifu?** Ano: všech 24 obchodních bloků Canvas jsou prémiové bloky a každý tarif obsahuje všechny prémiové bloky. Doplněk pro obchod ani tarif pro e-commerce nemáme. Jiné šablony to často rozdělují: rychlý náhled je [funkcí Astra Pro](https://canvaswp.com/cs/compare/astra/), a OceanWP prodává [svůj plugin eCommerce Pro](https://canvaswp.com/cs/compare/oceanwp/) jako samostatný produkt.