Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating a custom WooCommerce plugin

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.

More Decks by WordPress Greek Community

Other Decks in Programming

Transcript

  1. Thessaloniki WordPress Meetup
    Creating a custom
    WooCommerce plugin

    View full-size slide

  2. WooCommerce
    Is it worth developing a custom plugin?

    View full-size 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 full-size slide

  4. Ways to Customize WooCommerce

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  35. Final tips & Resources

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide