Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Motywy WooCommerce 

Jak modyfikować, żeby nie
zwariować
Maciej Swoboda
WP Desk
.PL
• WordPress 4.7
• WooCommerce 2.6.9
• Storefront 2.1.6
• Motyw potomny Storefront, wszystkie omawiane
zadania są przedstaw...
• Motyw potomny
• Edycja CSS
• Firebug (inspektor kodu)
• Edytor kodu
• Klasy CSS w <body>, <div class=“product”>
Zmiana w...
• Plik style.css w motywie potomnym
• Zadanie 1 - Jak dodać obrazek do nagłówka i
dostosować tytuł
• Zadanie 2 - Jak zmody...
• Różnica pomiędzy motywem a szablonem
• Szablony WooCommerce: wp-content/plugins/
woocommerce/templates
• Skopiuj wybrany...
• Pliki w katalogu woocommerce w motywie potomnym
• Zadanie 1 - Jak dodać bestsellery na stronę pustego koszyka
(cart/cart...
• Hook - miejsce uruchomienia funkcji
• Filtr - zmiana wyniku (działania) funkcji
• Wchodzą do gry m. in. gdy edycji nie m...
• W szablonach
• https://docs.woocommerce.com/wc-apidocs/hook-
docs.html
• Wtyczka Visual Hook Reference + dodatek
WooComm...
• Plik functions.php w motywie potomnym - uwaga zadania są
wyłączone - trzeba je “odkomentować”
• Zadanie 1 - Usunięcie op...
• Czy wiesz, że większość przedstawionych tutaj zadań
możesz wykonać w panelu admina przy użyciu wtyczek?
• https://woocom...
Dzięki!
Maciek Swoboda
WP Desk
www.wpdesk.pl
@swoboda
Upcoming SlideShare
Loading in …5
×

Jak modyfikować motywy WooCommerce

9,015 views

Published on

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

Published in: Technology
  • Have u ever tried external professional writing services like ⇒ www.WritePaper.info ⇐ ? I did and I am more than satisfied.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Jak modyfikować motywy WooCommerce

  1. 1. Motywy WooCommerce 
 Jak modyfikować, żeby nie zwariować Maciej Swoboda WP Desk
  2. 2. .PL
  3. 3. • 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ć?
  4. 4. • Motyw potomny • Edycja CSS • Firebug (inspektor kodu) • Edytor kodu • Klasy CSS w <body>, <div class=“product”> Zmiana wyglądu - CSS
  5. 5. • 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
  6. 6. • 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
  7. 7. • 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
  8. 8. • 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
  9. 9. • W szablonach • https://docs.woocommerce.com/wc-apidocs/hook- docs.html • Wtyczka Visual Hook Reference + dodatek WooCommerce • Google :) Jak znaleźć hooki i filtry
  10. 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 kolejnych kroków do strony podziękowania i maili Hooki i filtry - zadania
  11. 11. • 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 :)
  12. 12. Dzięki! Maciek Swoboda WP Desk www.wpdesk.pl @swoboda

×