ݺߣ

ݺߣShare a Scribd company logo

Motywy WooCommerce dla początkujących

•
•
Maciej Swoboda
Maciej Swoboda

Prezentacja wraz z zadaniami o modyfikacji motywów WooCommerce. Prelekcja na WordUp.

1 of 13
Download to read offline
Motywy WooCommerce 
 Jak modyfikować, żeby nie zwariować Maciej Swoboda
• WordPress 4.9.4 • WooCommerce 3.3.1 • Storefront 2.2.8 • Motyw potomny Storefront, wszystkie omawiane zadania są przedstawione w motywie na Github: https://github.com/ swoboda/storefront-child-examples • Ulubiona przeglądarka internetowa • Ulubiony edytor kodu Z czego będziemy korzystać?
• Motywy potomne: https://wpde.sk/child-themes • Motyw potomny dziedziczy wszystko od motywu nadrzędnego i umożliwia bezpieczne modyfikacje. • Zawsze używaj motywu potomnego do zmian. Nigdy nie edytuj bezpośrednio kodu motywów lub wtyczek. • Edycja CSS • Klasy CSS w <body>, <div class=“product”> Zmiana wyglądu - CSS
• 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
• 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
• 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
• Akcja - miejsce uruchomienia funkcji • Filtr - zmiana wyniku (działania) funkcji • Wchodzą do gry m. in. gdy nie możemy (lub nie chcemy) zrobić zmian w szablonach • Nie trzeba edytować szablonów (co bardzo zmniejsza ryzyko problemów przy aktualizacji WooCommerce) • Można zmodyfikować ogromną część WooCommerce Hooki - akcje i filtry
• W szablonach i plikach źródłowych: • do_action() - akcja • apply_filters() - filtr • https://docs.woocommerce.com/wc-apidocs/hook-docs.html • Wtyczka Visual Hook Reference + dodatek WooCommerce • Google :) • https://wpde.sk/hooks Jak znaleźć hooki?
Wizualny Przewodnik Hooków
• 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 następnych kroków do strony podziękowania i maili Hooki i filtry - zadania
• Czy wiesz, że większość przedstawionych tutaj zadań możesz wykonać w panelu admina przy użyciu wtyczki? • https://wpde.sk/storefront-powerpack • Idealnie sprawdza się przy niezdecydowanych klientach • Szybkie MVP lub mockupy • Niestety wtyczka jest płatna ($59) :( Wisienka :)
https://fb.com/groups/WooCommercePL/
Dzięki! Maciek Swoboda WP Desk www.wpdesk.pl @swoboda

More Related Content

Motywy WooCommerce dla początkujących

  • 1. Motywy WooCommerce 
 Jak modyfikować, żeby nie zwariować Maciej Swoboda
  • 2. • WordPress 4.9.4 • WooCommerce 3.3.1 • Storefront 2.2.8 • Motyw potomny Storefront, wszystkie omawiane zadania są przedstawione w motywie na Github: https://github.com/ swoboda/storefront-child-examples • Ulubiona przeglądarka internetowa • Ulubiony edytor kodu Z czego będziemy korzystać?
  • 3. • Motywy potomne: https://wpde.sk/child-themes • Motyw potomny dziedziczy wszystko od motywu nadrzędnego i umożliwia bezpieczne modyfikacje. • Zawsze używaj motywu potomnego do zmian. Nigdy nie edytuj bezpośrednio kodu motywów lub wtyczek. • Edycja CSS • Klasy CSS w <body>, <div class=“product”> Zmiana wyglądu - CSS
  • 4. • 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
  • 5. • 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
  • 6. • 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
  • 7. • Akcja - miejsce uruchomienia funkcji • Filtr - zmiana wyniku (działania) funkcji • Wchodzą do gry m. in. gdy nie możemy (lub nie chcemy) zrobić zmian w szablonach • Nie trzeba edytować szablonów (co bardzo zmniejsza ryzyko problemów przy aktualizacji WooCommerce) • Można zmodyfikować ogromną część WooCommerce Hooki - akcje i filtry
  • 8. • W szablonach i plikach źródłowych: • do_action() - akcja • apply_filters() - filtr • https://docs.woocommerce.com/wc-apidocs/hook-docs.html • Wtyczka Visual Hook Reference + dodatek WooCommerce • Google :) • https://wpde.sk/hooks Jak znaleźć hooki?
  • 10. • 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 następnych kroków do strony podziękowania i maili Hooki i filtry - zadania
  • 11. • Czy wiesz, że większość przedstawionych tutaj zadań możesz wykonać w panelu admina przy użyciu wtyczki? • https://wpde.sk/storefront-powerpack • Idealnie sprawdza się przy niezdecydowanych klientach • Szybkie MVP lub mockupy • Niestety wtyczka jest płatna ($59) :( Wisienka :)