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
2. WooCommerce Is it worth developing a custom plugin?
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
4. Ways to Customize WooCommerce
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
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…..
7. Ways to Customize WooCommerce OK. That’s all? NO!
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
9. Actions Ways to Customize WooCommerce > Actions, Filters, Events > Actions • Allow you to hook new functions or remove existing • May pass variables
10. 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
11. Actions - Example Ways to Customize WooCommerce > Actions, Filters, Events > Actions And...
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
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
14. Filters - Example Ways to Customize WooCommerce > Actions, Filters, Events > Filters (drum roll)
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' ); } //…. };
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)
17. Creating a WordPress/WooCommerce plugin It’s easier than you think… :)
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.
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
20. Step 2 - More complex plugins Plugin Development > Step 2 - More complex plugins • OOP • PHP files • CSS files • JS files • Assets • i18n Plugin Boilerplate
21. Step 3 - Developing our plugin Plugin Development > Step 3 - Developing our plugin The journey begins here…
22. Adding the select field Plugin Development > Step 3 - Developing our plugin > Adding the select field
23. Finding the bank names Plugin Development > Step 3 - Developing our plugin > Finding the bank names
24. Ta-da! Plugin Development > Step 3 - Developing our plugin > Ta-da!
25. Saving customer selection Plugin Development > Step 3 - Developing our plugin > Saving customer selection
26. Validating customer selection Plugin Development > Step 3 - Developing our plugin > Validating customer selection
27. Showing bank selection to shop managers Plugin Development > Step 3 - Developing our plugin > Showing bank selection to shop managers
28. Showing bank selection to shop managers Plugin Development > Step 3 - Developing our plugin > Showing bank selection to shop managers
29. Showing only selected bank details Plugin Development > Step 3 - Developing our plugin > Showing only selected bank details
30. Adding bank name to payment title Plugin Development > Step 3 - Developing our plugin > Adding bank name to payment title
31. What customer finally sees Plugin Development > Step 3 - Developing our plugin > What customer finally sees
32. What customer finally sees Plugin Development > Step 3 - Developing our plugin > What customer finally sees
33. What customer finally sees Plugin Development > Step 3 - Developing our plugin > What customer finally sees
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)
35. Final tips & Resources
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
37. Resources Resources • Plugin Handbook • WordPress Developer Resources • WooCommerce Github wiki • WooCommerce Code Reference • Internationalization • Plugin Security • Bank Transfer Select for WooCommerce (full code)
38. Thessaloniki WordPress Meetup Thank you! Theodoros Gkitsos theodorosgkitsos.com @theogk https://github.com/theo-gk