Προσαρμόζοντας το WooCommerce στα μέτρα μας, Αρχιμήδης Μερτζάνος - WordPress Athens 21st meetup

Transcript

1. Προσαρμόζοντας το Στα μέτρα μας! Μία ομιλία του Αρχιμήδη Μερτζάνου Lead WordPress Developer στην Hellenic Technologies
2. Μία φανταστική ιστορία… - Συνεργάτες!!! παίζει νέο project ΑΠΛΟ, ΓΡΗΓΟΡΟ, ΚΑΛΟΠΛΗΡΩΜΕΝΟ - …..Τι project…..; - Eshop (το λένε και eshop-aki) για τον κ. Εμπορόπουλο - ……(Σιγή) - Πανεύκολο είναι . Ένα theme, ένα Woo , λίγο demo content και έξω από την πόρτα…
4. Κάπου εδώ ξεκινούν οι ερωτήσεις…. - Δικό μας ή έτοιμο theme; - Τι θα πουλάει; - Έχει κάτι συγκεκριμένου κατά νου σχετικά με την εμφάνιση; Του αρέσει κάποιο site ; (Σε αυτό το τελευταίο η απάντηση είναι ναι και συνήθως το site αυτό θα κόστιζε 3πλασιo ποσό τουλάχιστον από τη τιμή που δώσατε) - (ΞΑΝΑ) - Δικό μας ή έτοιμο theme; - Χρώματα; Κάποια συγκεκριμένη απαίτηση στο στήσιμο του προϊόντος? Στη σελίδα του καλαθιού θα ήθελε να κάνει κάτι συγκεκριμένο πχ να εμφανίζει πόσο μένει ακόμα για τη δωρεάν αποστολή; …..Και άλλες 1.000.000 ερωτήσεις.
5. Μετά από κάποιο χρονικό διάστημα… - Βρίσκουμε theme ή φτιάχνουμε ένα δικό μας from scratch. - Ενεργοποιούμε το WooCommerce - Κάνουμε βασικές ρυθμίσεις+demo content (ειδικά αν είναι αγορασμένο theme) - Και NAIείναι όλα έτοιμα.
6. Σκοπός της παρουσίασης αυτής είναι… - Να δούμε πώς μπορούμε προγραμματιστικά να προσαρμόσουμε το WooCommerce στα θέλω του πελάτη ώστε να μειωθεί η απίστευτα μεγάλη χρήση των plugins. - Να δούμε κάποια παραδείγματα από αληθινά requests πελατών - Να κατανοήσουμε πώς το WooCommerce δεν είναι τόσο δύσκολο να επεκταθεί. - Να δούμε τρόπους επέκτασης μέσω template files είτε μέσω Action + Filter hooks
7. Προσαρμογή του WooCommerce γίνεται.. - Με χρήση Plugins. Ναι υπάρχουν σχεδόν άπειρα ☺ - Με χρήση action + filter hooks. - https://docs.woocommerce.com/wc-apidocs/hook-docs.html - Με overriding των templates του WooCommerce μέσα στο δικό μας theme Πότε και πώς επιλέγω τρόπο προσαρμογής; - Αυτό είναι αναλόγως του request και των γνώσεων φυσικά.
8. Προσαρμογή μέσω templates • Μέσα στο theme directory δημιουργούμε φάκελο WooCommerce και τοποθετούμε όποιο template file θέλουμε αντιγράφοντάς του από το “templates” directory. • Πχ ο φάκελος cart περιλαμβάνει όλα τα template αρχεία που συνθέτουν τη σελίδα του καλαθιού.
9. Προσαρμογή του μέσω hooks. - Βρίσκονται και στα template αλλά και σε core κομμάτια του WooCommerce - Μπορούμε να τα κάνουμε override και να αλλάξουμε τις λειτουργίες τους στο functions.php Για παράδειγμα αν γράψουμε: remove_action(΄woocommerce_archive_description’, woocommerce_taxonomy_archive_description’ ,10); Τότε σε αρχείο προϊόντων πχ μία κατηγορία εξαφανίζεται η περιγραφή της κατηγορίας.
10. Παράδειγμα 1. • Κύριος ο οποίος εμπορεύεται έργα τέχνης ζητάει να μην φαίνεται ο τίτλος στα προϊόντα που βρίσκονται στα διάφορα archives, μόνο στο single product. Σκεφτόμαστε: Υπάρχει τρόπος να προσαρμόσω το WooCommerce ώστε να τον αφαιρέσω και να μην χρησιμοποιήσω και CSS;
11. Παράδειγμα 1. Πιθανή λύση: Το αρχείο που φέρνει αυτό το αποτέλεσμα είναι το content-product.php. Μέσα στο αρχείο υπάρχει function που αν αφαιρεθεί τότε αφαιρείται και ο τίτλος. Στο functions.php γράφουμε: remove_action(‘ woocommerce_shop_loop_item_title’, ‘woocommerce_template_loop_product_title’,10);
12. Παράδειγμα 1. Επεξήγηση: Βρίσκουμε το συγκεκριμένο κομμάτι στο αρχείο που θέλουμε να αφαιρέσουμε. Βλέπουμε πως πρόκειται για function που είναι δεμένη σε hook και το αφαιρούμε μέσω remove_action.
13. Παράδειγμα 2. • Πελάτης ζήτησε στην κατηγορία ενός προϊόντος να εμφανίζεται κάτω από τον τίτλο το τελευταίο άρθρο από το blog του και φυσικά αν έχει κάποια περιγραφή η κατηγορία να μην την εμφανίζει. Πιθανή λύση: Αφού μέσω remove_action εξαφανίσαμε την περιγραφή Στη συνέχεια δέσαμε το blog item εκεί. remove_action(‘ woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’,10);
14. Παράδειγμα 2. add_action(‘woocommerce_archive_description’, ‘meetup_show_latest_blog_item’,10);
15. Παράδειγμα 3. • Πελάτης ζήτησε σε 1 κατηγορία που ήθελε να εμφανίζονται 6 προϊόντα ανά γραμμή και όχι 4.. Πιθανή λύση: Εδώ θα χρησιμοποιήσουμε το loop_shop_columns filter add_filter(‘loop_shop_columns’, ‘meetup_change_cols_for_tshirts’,10,1);
17. Παράδειγμα 4. Πελάτης ζήτησε να αλλάξει θέση στα cross sells προϊόντα. Σημείωση: Τα cross sells εμφανίζονται στη σελίδα καλαθιού αλλά το πώς εμφανίζονται έχει να κάνει με το theme. Στο theme του ήταν εδώ κάτω από τον πίνακα του καλαθιού:
18. Παράδειγμα 4. Μπορούμε απλά να μετακινήσουμε τα cross sells με χρήση απλών functions σε hooks που βρίσκονται στο αρχείο cart.php
19. Παράδειγμα 4. Αφαιρούμε τα hooks από τη θέση του μέσω hook. remove_action(‘woocommerce_cart_collaterals’,‘woocommerce_cross_sells_display’); Βρίσκουμε hook για να δέσουμε την woocommerce_cross_sells_display function add_action(‘woocommerce_before_cart’,‘woocommerce_cross_sells_display’,30); Έτσι εμφανίζουμε τα cross sells πάνω από το καλάθι. Το 30 είναι η priority που θα τρέξει το function .
20. Παράδειγμα 5. Πελάτης επιθυμεί στη σελίδα καλαθιού να φαίνεται σε κάποιο σημείο αν έχει free shipping και πόσο απομένει για αυτό. Πιθανή λύση: Ψάχνουμε στο αρχείο cart-totals.php και θα φτιάξουμε ένα custom function που να υπολογίζει το πόσο μένει για δωρεάν αποστολή και να το εμφανίζει κάπου εμφανώς, πχ πάνω από το Checkout Button. Το που θα τοποθετηθεί θα το ψάξουμε. Μία καλή θέση είναι ακριβώς πάνω από το checkout button.
21. Παράδειγμα 5.
22. Παράδειγμα 5. Για να το επιτύχουμε αυτό: add_action(‘woocommerce_proceed_to_checkout’,‘meetup_show_remaining_for_free_shipping’,18);
23. Παράδειγμα 6. Ο πελάτης θέλει εντελώς custom styling να «εξαφανιστεί» ό,τι εμφανισιακά του θυμίζει το WooCoomerce. Πιθανή λύση: Συνήθως σε τέτοιες φάσεις έχουμε πλήρως custom theme και επειδή το WooCommerce φορτώνει δικά του styles μπορούμε να το σταματήσουμε αυτό πλήρως.
24. Παράδειγμα 6. Γράφουμε την εξής γραμμή κώδικα: add_filter(‘woocommerce_enqueue_styles’,’__return_em pty_array’);
25. Παράδειγμα 7. Ο πελάτης θέλει να μετονομάσει πεδία στο checkout Πιθανή λύση: Συνήθως ο πελάτης θέλει να τοποθετήσει κάποιο placeholder σε κάποιο πεδίο ή να αλλάξει το label . Επίσης μπορεί να θέλει την προσθήκη πεδίου. add_filter(‘woocommerce_checkout_fields’,‘meetup_change_checkout_fields’); Το βασικό filter είναι αυτό: $fields['billing']['billing_last_name’][‘label'] = ‘Your super duper last name'; Για να αλλάξουμε για παράδειγμα το label στο επώνυμο μέσα στην παραπάνω function γράφουμε:
26. Επίλογος. Είναι βέβαιο πώς οι δυνατότητες προσαρμογής του WooCommerce με χρήση των δυνατότητων που μας δίνει το ίδιο το plugin είναι απίστευτα πολλές. Την επόμενη φορά λοιπόν που θα σας ζητηθεί ένα feature πριν ψάξετε για plugin αναρωτηθείτε… Μπορώ για αυτό το feature να φέρω το WooCommerce στα μέτρα μου? Η απάντηση θα είναι κατά 99% ναι.
27. Σας ευχαριστώ πολύ!!! Αρχιμήδης Μερτζάνος admin@mertzanos.gr mertzanos@hellenictechnologies.com https://mertzanos.gr