Vlastní WooCommerce šablony - jak je používat?

Plugin WooCommerce funguje s jakoukoliv WordPress šablonou, právě díky šablonám, které obsahuje. A my si ukážeme, jak s nimi správně pracovat.

Pokud si nainstalujete WooCommerce plugin, na vašem webu se objeví několik stránek, které defaultní WordPress neobsahuje.

Jsou to:

Obchod
Košík
Pokladna
Můj účet
Kategorie produktu
Detail produktu

Obchod

Obchod je výpis produktů, které jsou v eshopu. Přestože se jedná o výpis, nejedná se o archív (výpis příspěvků), ale statickou stránku, kam WooCommerce vypisuje produkty. Díky tomu, že Obchod je stránka, používá se často, jako hlavní strana eshopu.

Košík

Košík je statická stránka, jenž obsahuje shortcode, starající se o funkce košíku.

Pokladna

Pokladna je technicky stejná, jako košík, liší se pouze použitým shortcodem a funkcemi. Součástí pokladny je i děkovná stránka, což občas řadu uživatelů mate.

Můj účet

Stejně, jako u Košíku a Pokladny, jde o statickou stránku, s výpisem osobních údajů zákazníka a jeho objednávek.

Kategorie produktu a štítky produktu

Zde je potřeba říci, že produkty ve WooCommerce jsou custom post type a jako takové mají i vlastní výpis archívu. Stejně, jako například kategorie článků, lze vypsat i kategorie produktů.

Detail produktu

Podobně, jako u detailu článku, má produkt svůj vlastní detail. Liší se jen v zobrazení a funkcích, technicky se jedná o detail custom post type.

Proč ale vypadají stránky eshopu jinak, než zbytek webu? Odpovědí jsou právě custom templates, které plugin WooCommerce obsahuje.

Každá stránka je totiž složená ze samostatných šablon (souborů) a vypadat to může i takto:

Každý obdélník na obrázku, prezentuje jeden soubor šablony, nebo přinejmenším funkci zavěšenou do hooku v příslušném souboru šablony. Například cenu v tomto výpisu, zobrazuje kód, umístěný v souboru price.php, ve složce loop.

<?php if ( $price_html = $product->get_price_html() ) : ?>
 <span class="price"><?php echo $price_html; ?></span>
<?php endif; ?>

Kde jsou soubory šablon umístěny?

Jako každý jiný plugin, se WooCommerce nainstaluje do složky plugins a tam je lze najít:

/wp-content
/plugins
/woocommerce
/templates

Pro pochopení způsobu načítání souborů šablon si ukážeme část kódu z template loader třídy:

if ( is_single() && get_post_type() == 'product' ) {

  $file = 'single-product.php';
  $find[] = $file;
  $find[] = WC()->template_path() . $file;

Tato podmínka zjišťuje, zda se aktuálně nacházíme na detailu produktu a pokud ano, tak do pole definuje jméno souboru a poté cestu ke kopii souboru v šabloně webu. Následující kód se postará o zjištění, zda v šabloně webu, existuje kopie souboru z pluginu:

if ( $file ) {
  $template = locate_template( array_unique( $find ) );
    if ( ! $template || WC_TEMPLATE_DEBUG_MODE ) {
      $template = WC()->plugin_path() . '/templates/' . $file;
    }
 }

Funkce locate_template nejprve zjišťuje, zda existuje kopie souboru a pokud ne, tak načte originální soubor z pluginu.

Celé toto vysvětlování má jediný důvod. Ukázat, proč, pro úpravu custom souborů pluginu v šabloně, je nutné, uložit je do složky:

/wp-content
/themes
/theme-name
/woocommerce

Díky tomu, můžete vzít, výše zmíněný soubor price.php, původně umístěný v

wp-content/plugins/woocommerce/templates/loop/price.php

a přesunout jej do

wp-content/themes/theme-name/woocommerce/loop/price.php

Důvod je jednoduchý. Vy můžete soubor upravovat, dle libosti a aktualizace pluginu samotného se vašich úprav nedotknou.

<?php if ( $price_html = $product->get_price_html() ) : ?>
 <div class="my-custom-class"><span class="price"><?php echo $price_html; ?></span></div>
 <?php endif; ?>

Zde jsem přidal div kolem tlačítka, pokud jej budete chtít upravit. Můžete nahradit v podstatě všechny soubory z pluginu a upravit je, ale doporučuji, u souborů checkoutu (pokladny), postupovat opatrně, protože na html kód je navázána řada jQuery funkcí.

Přesunujte pouze ty soubory, které upravujete!

Protože jsme bytosti pohodlné, bývá jednoduché, vzít složku templates, přesunout ji do šablony a přejmenovat na woocommerce. Práce kvapná, málo platná. Každý soubor šablony má v hlavičce číslo verze:

* @see http://docs.woothemes.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 1.6.4

Pokud dojde k aktualizaci a vy máte v šabloně starší soubory, i když jste je neupravovali, aktualizace se jich nebude týkat, protože aktualizované soubory pluginu, budou přepisovány těmi zastaralými ze šablony.

Navíc se ve stavu systému, budou zobrazovat podobná hlášení:

Takže si vytvořte strukturu složky a přesuňte pouze ty souboru, se kterými pracujete.

A nakonec upozornění:

Nikdy neupravujte soubory v pluginu!