Customizing WooCommerce (Παραμετροποιώντας το WooCommerce) - Θεόδωρος Γκίτσος

Η παρουσίαση εξηγεί σύντομα τον τρόπο λειτουργίας του WooCommerce και πώς μπορείς να επέμβεις στις διαδικασίες του. Οι 3 κύριες θεματικές θα είναι πώς και πού να γράψεις τον custom κώδικά σου, πώς να χρησιμοποιήσεις τα hooks και τα filters και πώς να κάνεις ένα template override. Απευθύνεται στον μέσο χρήστη του WP/WC, δηλαδή κυρίως σε άτομα που δεν έχουν πολλή εμπειρία με customizations και θα ήθελαν να ασχοληθούν, ή το κάνουν “στο περίπου”!

Transcript

1. April 2021, WordCamp Greece Online Customizing WooCommerce
2. WooCommerce How customizable is it after all?
3. WooCommerce Stats WooCommerce: How customizable is it after all? • 29-30% market share on eCommerce websites (2021) • Open Source - Open Code • GNU GPLv2 (or later) • Thousands of WooCommerce themes & plugins • Huge, active community
4. Where to Write your Code
5. WordPress Plugin Where to Write your Code > WordPress Plugin • Use a WordPress plugin like Code Snippets By Code Snippets Pro • Write PHP or JavaScript • Great for small snippets • User friendly • Pretty safe
6. Child Theme Where to Write your Code > Child Theme • Extends your active theme • Unchanged after theme updates • Anything goes - PHP, CSS, JS, HTML etc. • How to install (video link) • Edit via FTP, File Manager (Cpanel, Plesk etc.) or Theme Editor (Appearance > Theme Editor) • Easy to break things
7. Your Own Custom Plugin Where to Write your Code > Your Own Custom Plugin • Great for complex customizations • Anything goes - PHP, CSS, JS, HTML etc. • Easy to maintain with version control • Edit via FTP, or Plugin Editor (Appearance > Plugin Editor) • Easy to break things • Plugin Boilerplate <?php /** * Plugin Name: My Plugin Name * Plugin URI: https://yourdomain.com/ * Description: This is a plugin example. * Version: 1.0 * Author: theogk * Author URI: https://yourdomain.com/ **/
8. Ways to Customize WooCommerce
9. Template Override Ways to Customize WooCommerce > Template Override • Find WooCommerce Templates on GitHub or /wp-content/plugins/woocommerce/templates/ • PHP files - Generate the front-end HTML • Copy them in your child theme folder to override • Difficult to maintain Example /wp-content/plugins/woocommerce/templates/checkout/form-billing.php /wp-content/themes/storefront-child/woocommerce/checkout/form-billing.php
10. Function Override Ways to Customize WooCommerce > Function Override • (Some) functions can be overridden! • Redeclare the function inside your child theme’s function.php • No need in WooCommerce • Useful on bad-written WooCommerce compatible themes/plugins if ( ! function_exists( 'woocommerce_page_title' ) ) { function woocommerce_page_title( $echo = true ) { if ( is_search() ) { // function continues…..
11. Ways to Customize WooCommerce OK. That’s all? NO!
12. Actions, Filters, Events Ways to Customize WooCommerce > Actions, Filters, Events • It’s like having superpowers. But better… • Also referred as “Hooks” • Hundreds of them all over the plugin’s code • The best way to add your customizations
13. Actions Ways to Customize WooCommerce > Actions, Filters, Events > Actions • Allow you to hook new functions or remove existing • May pass variables
14. Actions - Example Ways to Customize WooCommerce > Actions, Filters, Events > Actions <div class="summary entry-summary"> <?php do_action( 'woocommerce_single_product_summary' ); ?> </div> add_action( 'woocommerce_single_product_summary', 'wc_action_example', 6 ); function wc_action_example() { echo '<div>Hello WordCamp Greece!</div>'; } do_action in WooCommerce Core content-single-product.php file add_action in your child theme or plugin $tag $function $priority
15. Actions - Example Ways to Customize WooCommerce > Actions, Filters, Events > Actions And...
16. Filters Ways to Customize WooCommerce > Actions, Filters, Events > Filters • Modify a value by returning a new value at runtime • Provide additional arguments • Must always return the filtered value + $args
17. Filters - Example Ways to Customize WooCommerce > Actions, Filters, Events > Filters public function single_add_to_cart_text() { return apply_filters( 'woocommerce_product_single_add_to_cart_text', __( 'Add to cart', 'woocommerce' ), $this ); } add_filter( 'woocommerce_product_single_add_to_cart_text', 'wc_filter_example', 10, 2 ); function wc_filter_example( $original_text, $product ) { return __( 'Αγόρασε Τώρα!', 'storefront-child' ); } apply_filters in WooCommerce Core file add_filter in your child theme or plugin $tag $function $tag $value_to_filter $arg $args_number
18. Filters - Example Ways to Customize WooCommerce > Actions, Filters, Events > Filters (drum roll)
19. Events Ways to Customize WooCommerce > Actions, Filters, Events > Events • Attach an event handler function in your JS file • May pass additional data VariationForm.prototype.onChange = function( event ) { var form = event.data.variationForm; //…. if ( form.useAjax ) { form.$form.trigger( 'check_variations' ); } else { form.$form.trigger( 'woocommerce_variation_select_change' ); form.$form.trigger( 'check_variations' ); } //…. };
20. Where can you find these hooks? Ways to Customize WooCommerce > Actions, Filters, Events • Well, good luck with that… • Search through the core files • Search using a PHP IDE • Rodolfo Melogli’s awesome “Visual Hook Series” (Business Bloomer)
21. WooCommerce Conditionals Customize where needed (only)
22. WooCommerce Conditional Tags WooCommerce Conditionals • Apply to customizations only where needed • Find them in /woocommerce/includes/wc-conditional-functions.php • Or, some of them, on the Docs: Conditional Tags Examples is_woocommerce() is_shop() is_product_category() is_product_category( 'shirts' ) is_product_tag( 'shirts' ) is_product() is_cart() is_checkout() is_account_page() is_wc_endpoint_url( 'order-received' )
23. Final Tips From the front-line...
24. Final Tips Final Tips • Use a child theme no matter what. • Don’t customize on production environment. • Prefer hooks over template/function overrides. • Keep your customizations organized. • Invest in a good IDE like PhpStorm. Seriously. • Don’t trust Stack Overflow snippets. Always refer to the core code or official WP/WC documentation.
25. April 2021, WordCamp Greece Online Thank you! Theodoros Gkitsos theodorosgkitsos.com @theogk