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:
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ść:
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/
DMati
Planujesz może skrobnąć zestawienie free/premium motywów do WooCommerce?
Anna
W przyszłości pewnie tak i myślę, że raczej o darmowych motywach
DMati
Najlepiej przetestowane i lekkie, nie jakieś potwory z od groma funkcji.
Janunsz Kamiński
Świetny temat! Dojść często spotykam się z motywami nie zgodnymi w WooCommerce.
siutek
w tekście jest błąd. funkcja woocomerce_content(); nie istnieje, zapomniałeś o jeszcze jednej literce „m” w środku 😉