Dostosowanie motywu WordPress do sklepu Woocommerce

Woocommerce to popularna wtyczka służąca do stworzenia sklepu internetowego na silniku WordPress.
W niniejszym artykule napiszę jak poradzić sobie z sytuacją, gdy szablon, z którego aktualnie korzystamy, nie jest dostosowany do wtyczki woocommerce oraz kilka słów w jaki sposób dokonać modyfikacji podstawowych, domyślnych szablonów woocommerce.

Deklaracja wsparcia dla wtyczki woocommerce

Chcemy na naszej stronie dodać sklep internetowy, ale nie planujemy zmiany aktualnego szablonu; instalujemy wtyczkę sklepu i w panelu administratora pojawia nam się taki oto komunikat:
woo_support
Oznacza to, że w naszym szablonie nie ma deklaracji wsparcia woocommerce i nie jest on dostosowany do obsługi tej wtyczki.
Aby pozbyć się tego komunikatu należy zmodyfikować plik naszego motywu functions.php dodając kod:
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}

Wyświetlanie zawartości sklepu w naszym szablonie

Jeżeli chcemy wyświetlić zawartość sklepu w naszym aktualnym szablonie wystarczy dodać wywołanie funkcji woocommerce_content() w pliku woocommerce.php.
W tym celu zaleca się skopiowanie zawartości pliku page.php naszego motywu i zapisanie jej do pliku woocommerce.php. Dzięki temu zachowana będzie aktualna struktura strony.

Następnie edytujemy plik woocommerce.php usuwamy cały fragment kodu zawierający pętlę:
while ( have_posts() ) : the_post();
get_template_part( 'content', 'page' );
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;

lub poprzedzony instrukcją warunkową: if ( have_posts() ) : ... endif;
i zamieniamy go jedną linjką kodu: woocommerce_content();

Inną metodą umieszczenia zawartości sklepu jest użycie haków. Metoda ta pozwala na lepsze dopasowanie wyglądu naszego szablonu. Wystarczy usunąć akcję sklepu, którą chcemy zmodyfikować np.:
remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10);
A następnie zdefiniować własną obsługę wybranej akcji w pliku functions.php.
add_action(‘woocommerce_before_main_content’, ‘my_content_wrapper_start’, 10);
function my_content_wrapper_start() {
...
}

Modyfikacje domyślnych szablonów Woocommerce

Domyślne szablony woocommerce znajdują się w katalogu wtyczki woocommerce/templates i mają mniej więcej taką zawartość:
woocommerce_templates

Jak można zauważyć dotyczą one wyglądu koszyka, pojedynczego produktu itd.

Jeżeli chcemy zmodyfikować powyższe szablony tak, aby nie utracić zmian podczas aktualizacji wtyczki, możemy zrobić to na dwa sposoby.
W pierwszym nadpisujemy skopiowany, domyślny plik styli dla sklepu custom-woocommerce.css (1).
W drugim tworzymy tzw. motyw potomny (2).

1) Modyfikacje custom-woocommerce.css
Plik styli custom-woocommerce.css tworzymy w katalogu naszego motywu WordPress na przykład w wp-content/themes/twoj-motyw/css.
Utworzony plik należy jeszcze dołączyć do naszego motywu, w tym celu w pliku functions.php dopisujemy kod:
function your_theme_woocommerce_scripts() {
wp_enqueue_style( 'custom-woocommerce-style', get_template_directory_uri() . '/css/custom-woocommerce.css' );
}
add_action( 'wp_enqueue_scripts', 'your_theme_woocommerce_scripts' );

Jeżeli chcemy całkowicie wyłączyć style domyślne woocommerce w pliku functions.php wpisujemy kod:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

2) Motyw potomny (child theme)
Motyw potomny („motyw dziecka”) to taki motyw, który dziedziczy całą funkcjonalność i style po „motywie rodzica”.
Ale o tym może już w innym artykule..
Więcej na temat motywów potomnych można znaleźć tutaj.

Nadpisywanie szablonów woocommerce
Aby nadpisać domyślne szablony sklepu woocommerce należy w pliku naszego motywu WordPress (wp-content/themes/twoj-motyw) utworzyć nowy katalog o nazwie „woocommerce”.
Następnie skopiować zawartość (lub wybrane pliki, które chcemy zmodyfikować) katalogu wp-content/plugins/woocommerce/templates do utworzonego w poprzednim kroku katalogu „woocommerce”. W przypadku podkatalogów należy zachować strukturę taką jak w oryginalnym katalogu wtyczki.
W tym momencie można już modyfikować wybrane pliki i nadpisywać domyślne szablony.

Źródło:
https://docs.woothemes.com/document/third-party-custom-theme-compatibility/
https://docs.woothemes.com/document/disable-the-default-stylesheet/

You Might Also Like

5 Comments

  1. DMati

    Planujesz może skrobnąć zestawienie free/premium motywów do WooCommerce?

    1. Anna

      W przyszłości pewnie tak i myślę, że raczej o darmowych motywach

  2. DMati

    Najlepiej przetestowane i lekkie, nie jakieś potwory z od groma funkcji.

  3. Janunsz Kamiński

    Świetny temat! Dojść często spotykam się z motywami nie zgodnymi w WooCommerce.

  4. siutek

    w tekście jest błąd. funkcja woocomerce_content(); nie istnieje, zapomniałeś o jeszcze jednej literce „m” w środku 😉

Leave a Reply