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. 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
  2. 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
  3. 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…..
  4. 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
  5. Actions Ways to Customize WooCommerce > Actions, Filters, Events >

    Actions • Allow you to hook new functions or remove existing • May pass variables
  6. 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
  7. 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
  8. 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
  9. 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' ); } //…. };
  10. 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)
  11. 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.
  12. 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
  13. Step 2 - More complex plugins Plugin Development > Step

    2 - More complex plugins • OOP • PHP files • CSS files • JS files • Assets • i18n Plugin Boilerplate
  14. Step 3 - Developing our plugin Plugin Development > Step

    3 - Developing our plugin The journey begins here…
  15. Adding the select field Plugin Development > Step 3 -

    Developing our plugin > Adding the select field
  16. Finding the bank names Plugin Development > Step 3 -

    Developing our plugin > Finding the bank names
  17. Showing bank selection to shop managers Plugin Development > Step

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

    3 - Developing our plugin > Showing bank selection to shop managers
  19. Showing only selected bank details Plugin Development > Step 3

    - Developing our plugin > Showing only selected bank details
  20. Adding bank name to payment title Plugin Development > Step

    3 - Developing our plugin > Adding bank name to payment title
  21. What customer finally sees Plugin Development > Step 3 -

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

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

    Developing our plugin > What customer finally sees
  24. 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)
  25. 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
  26. Resources Resources • Plugin Handbook • WordPress Developer Resources •

    WooCommerce Github wiki • WooCommerce Code Reference • Internationalization • Plugin Security • Bank Transfer Select for WooCommerce (full code)