Motywy WooCommerce dla początkujących
•
0 likes•478 views
Prezentacja wraz z zadaniami o modyfikacji motywów WooCommerce. Prelekcja na WordUp.
Recommended
More Related Content
Similar to Motywy WooCommerce dla początkujących
Similar to Motywy WooCommerce dla początkujących (20)
More from Maciej Swoboda
More from Maciej Swoboda (9)
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 :)