Creating a custom WooCommerce plugin

Πώς μπορείτε να παραμετροποιήσετε το WooCommerce και τι χρειάζεται για να δημιουργήσετε ένα custom plugin με τον κώδικά σας; Αυτή η παρουσίαση απευθύνεται σε άτομα που έχετε ελάχιστη ή μικρή εμπειρία στη δημιουργία plugins, αλλά σίγουρα θα χρειαστεί να διαθέτετε κάποιες πολύ βασικές γνώσεις σε PHP.

Είτε πρόκειται για ένα μικρό plugin, είτε για κάτι αρκετά πιο περίπλοκο, θα βρείτε ό,τι χρειάζεστε για να ξεκινήσετε, να το δομήσετε σωστά, να το κάνετε μεταφράσιμο σε άλλες γλώσσες, καθώς και χρήσιμα resources για περαιτέρω έρευνα.

[--------- english version ---------]
How can you customize WooCommerce and what does it take to create a custom plugin with your code? This presentation is aimed at people with little or no experience creating plugins, but you will definitely need to have some basic PHP knowledge.

Whether it is a small plugin or something much more complex, you will find everything you need to get started, structure it properly, internationalize it making it translatable into other languages, as well as useful resources for further research.

Transcript

1. Thessaloniki WordPress Meetup
   Creating a custom
   WooCommerce plugin
   

   View Slide

2. WooCommerce
   Is it worth developing a custom plugin?
   

   View Slide

3. Why WooCommerce
   Is it worth developing a custom plugin?
   ● 27% market share on eCommerce websites (June 2022) source
   ● Open Source - Open Code
   ● GNU GPLv2 (or later)
   ● Thousands of WooCommerce themes & plugins
   ● Huge, active community
   ● Well-written & developer friendly
   ● Customizations pay better
   

   View Slide

4. Ways to Customize WooCommerce
   

   View Slide

5. 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
   Location in WooCommerce:
   /wp-content/plugins/woocommerce/templates/checkout/form-billing.php
   Location in our child theme:
   /wp-content/themes/storefront-child/woocommerce/checkout/form-billing.php
   

   View Slide

6. 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…..
   

   View Slide

7. Ways to Customize WooCommerce
   OK.
   That’s all?
   NO!
   

   View Slide

8. 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 WooCommerce code
   ● The best way to add your customizations
   

   View Slide

9. Actions
   Ways to Customize WooCommerce > Actions, Filters, Events > Actions
   ● Allow you to hook new functions or remove existing
   ● May pass variables
   

   View Slide

10. Actions - Example
    Ways to Customize WooCommerce > Actions, Filters, Events > Actions
    
    do_action( 'woocommerce_single_product_summary' );
    ?>
    
    add_action( 'woocommerce_single_product_summary', 'wc_action_example', 6 );
    function wc_action_example() {
    echo 'Hello WordCamp Greece!';
    }
    do_action in WooCommerce Core content-single-product.php file
    add_action in your child theme or plugin $tag $function $priority
    

    View Slide

11. Actions - Example
    Ways to Customize WooCommerce > Actions, Filters, Events > Actions
    And...
    

    View Slide

12. 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
    

    View Slide

13. 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
    

    View Slide

14. Filters - Example
    Ways to Customize WooCommerce > Actions, Filters, Events > Filters
    (drum roll)
    

    View Slide

15. 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' );
    }
    //….
    };
    

    View Slide

16. Where can you find these hooks?
    Ways to Customize WooCommerce > Actions, Filters, Events
    ● Well, good luck with that…
    ● WooCommerce GitHub Code Reference
    ● Search through the core files (using a PHP IDE)
    ● Rodolfo Melogli’s awesome “Visual Hook Series”
    (Business Bloomer)
    ● Google it (with caution)
    

    View Slide

17. Creating a WordPress/WooCommerce plugin
    It’s easier than you think… :)
    

    View Slide

18. Step 0 - You need an idea
    Plugin Development > Step 0 - You need an idea
    Today's project:
    Bank Transfer Select for WooCommerce
    Θα θέλαμε όταν ένας πελάτης επιλέγει στο checkout ως
    τρόπο πληρωμής την τραπεζική κατάθεση, να του
    εμφανίζουμε τις διαθέσιμες τράπεζες και να τον
    “αναγκάζουμε” να επιλέξει μία από αυτές για να κάνει την
    κατάθεσή του.
    ---------------------------------------------------------------------------------
    When a customer selects bank deposit as a payment
    method, a select input should appear with the available
    bank options, forcing him/her to select a specific bank to
    make the deposit.
    

    View Slide

19. Step 1 - Bare essentials for a plugin
    Plugin Development > Step 1 - Bare Essentials for a plugin
    ● Plugin name
    ● Plugin slug
    ● Base PHP file + Headers
    ● Plugin folder inside /plugins/
    ● License
    WP Plugin Basics
    Header requirements
    

    View Slide

20. Step 2 - More complex plugins
    Plugin Development > Step 2 - More complex plugins
    ● OOP
    ● PHP files
    ● CSS files
    ● JS files
    ● Assets
    ● i18n
    Plugin Boilerplate
    

    View Slide

21. Step 3 - Developing our plugin
    Plugin Development > Step 3 - Developing our plugin
    The journey begins here…
    

    View Slide

22. Adding the select field
    Plugin Development > Step 3 - Developing our plugin > Adding the select field
    

    View Slide

23. Finding the bank names
    Plugin Development > Step 3 - Developing our plugin > Finding the bank names
    

    View Slide

24. Ta-da!
    Plugin Development > Step 3 - Developing our plugin > Ta-da!
    

    View Slide

25. Saving customer selection
    Plugin Development > Step 3 - Developing our plugin > Saving customer selection
    

    View Slide

26. Validating customer selection
    Plugin Development > Step 3 - Developing our plugin > Validating customer selection
    

    View Slide

27. Showing bank selection to shop managers
    Plugin Development > Step 3 - Developing our plugin > Showing bank selection to shop managers
    

    View Slide

28. Showing bank selection to shop managers
    Plugin Development > Step 3 - Developing our plugin > Showing bank selection to shop managers
    

    View Slide

29. Showing only selected bank details
    Plugin Development > Step 3 - Developing our plugin > Showing only selected bank details
    

    View Slide

30. Adding bank name to payment title
    Plugin Development > Step 3 - Developing our plugin > Adding bank name to payment title
    

    View Slide

31. What customer finally sees
    Plugin Development > Step 3 - Developing our plugin > What customer finally sees
    

    View Slide

32. What customer finally sees
    Plugin Development > Step 3 - Developing our plugin > What customer finally sees
    

    View Slide

33. What customer finally sees
    Plugin Development > Step 3 - Developing our plugin > What customer finally sees
    

    View Slide

34. Internationalization (i18n)
    Plugin Development > Step 3 - Developing our plugin > Internationalization (i18n)
    ● Use gettext functions
    ● Load textdomain
    ● Add to plugin header
    ● Create your .pot file
    ● Translate (optional)
    

    View Slide

35. Final tips & Resources
    

    View Slide

36. Final Tips
    Final Tips
    ● Invest in a good IDE like PhpStorm
    ● Use a boilerplate and OOP
    ● Performance, security, i18n
    ● Load assets only where needed
    ● Test thoroughly
    ● Don’t trust Stack Overflow snippets
    ● Join Open-source projects / co-operate
    

    View Slide

37. Resources
    Resources
    ● Plugin Handbook
    ● WordPress Developer Resources
    ● WooCommerce Github wiki
    ● WooCommerce Code Reference
    ● Internationalization
    ● Plugin Security
    ● Bank Transfer Select for WooCommerce (full code)
    

    View Slide

38. Thessaloniki WordPress Meetup
    Thank you!
    Theodoros Gkitsos
    theodorosgkitsos.com
    @theogk
    https://github.com/theo-gk
    

    View Slide