Jak modyfikować motywy WooCommerce

12

Click here to load reader

Transcript of Jak modyfikować motywy WooCommerce

Page 1: Jak modyfikować motywy WooCommerce

Motywy WooCommerce Jak modyfikować, żeby nie

zwariować

Maciej Swoboda WP Desk

Page 2: Jak modyfikować motywy WooCommerce

.PL

Page 3: Jak modyfikować motywy WooCommerce

• WordPress 4.7

• WooCommerce 2.6.9

• Storefront 2.1.6

• Motyw potomny Storefront, wszystkie omawiane zadania są przedstawione w motywie na Github: https://github.com/swoboda/storefront-child-examples -

Z czego będziemy korzystać?

Page 4: Jak modyfikować motywy WooCommerce

• Motyw potomny

• Edycja CSS

• Firebug (inspektor kodu)

• Edytor kodu

• Klasy CSS w <body>, <div class=“product”>

Zmiana wyglądu - CSS

Page 5: Jak modyfikować motywy WooCommerce

• Plik style.css w motywie potomnym

• Zadanie 1 - Jak dodać obrazek do nagłówka i dostosować tytuł

• Zadanie 2 - Jak zmodyfikować kolory przycisków

• Zadanie 3 - Jak zmodyfikować stronę produktu (dla każdego produktu i tylko wybranego)

• Zadanie 4 - Jak zmienić widok zamówienia z dwóch na jedną kolumnę

Zmiana wyglądu - zadania

Page 6: Jak modyfikować motywy WooCommerce

• Różnica pomiędzy motywem a szablonem

• Szablony WooCommerce: wp-content/plugins/woocommerce/templates

• Skopiuj wybrany szablon do katalogu motywu:

• z: woocommerce/templates/single-product.php

• do : motyw/woocommerce/single-product.php

Nadpisywanie szablonów

Page 7: Jak modyfikować motywy WooCommerce

• Pliki w katalogu woocommerce w motywie potomnym

• Zadanie 1 - Jak dodać bestsellery na stronę pustego koszyka (cart/cart-empty.php)

• Zadanie 2 - Jak zmienić treść przycisku "do kasy” (cart/proceed-to-checkout-button.php)

• Zadanie 3 - Jak dodać kolejne kroki na "thankyou page” (checkout/thankyou.php)

• Zadanie 4 - Jak dodać kolejne kroki do maila klienta (emails/customer-processing-order.php)

Szablony - zadania

Page 8: Jak modyfikować motywy WooCommerce

• Hook - miejsce uruchomienia funkcji

• Filtr - zmiana wyniku (działania) funkcji

• Wchodzą do gry m. in. gdy edycji nie można zrobić w szablonach

• Można zmodyfikować ogromną część WooCommerce

• Nie trzeba edytować szablonów

Hooki i filtry

Page 9: Jak modyfikować motywy WooCommerce

• W szablonach

• https://docs.woocommerce.com/wc-apidocs/hook-docs.html

• Wtyczka Visual Hook Reference + dodatek WooCommerce

• Google :)

Jak znaleźć hooki i filtry

Page 10: Jak modyfikować motywy WooCommerce

• Plik functions.php w motywie potomnym - uwaga zadania są wyłączone - trzeba je “odkomentować”

• Zadanie 1 - Usunięcie opcji sortowania

• Zadanie 2 - Zmiana wyświetlanej liczby produktów w sklepie

• Zadanie 3 - Usunięcie pokrewnych produktów na stronie produktu

• Zadanie 4 - Dodanie bestsellerów w miejsce pokrewnych produktów

• Zadanie 5 - Zmiana kolejności elementów na stronie produktu

• Zadanie 6 - Dodanie kolejnych kroków do strony podziękowania i maili

Hooki i filtry - zadania

Page 11: Jak modyfikować motywy WooCommerce

• Czy wiesz, że większość przedstawionych tutaj zadań możesz wykonać w panelu admina przy użyciu wtyczek?

• https://woocommerce.com/products/storefront-designer/

• https://woocommerce.com/products/storefront-woocommerce-customiser/

• https://woocommerce.com/products/storefront-checkout-customiser/

• Niestety wtyczki są płatne :(

Wisienka :)

Page 12: Jak modyfikować motywy WooCommerce

Dzięki!

Maciek Swoboda WP Desk

www.wpdesk.pl @swoboda