Thessaloniki WordPress Meetup Creating a custom WooCommerce plugin

WooCommerce Is it worth developing a custom plugin?

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

Ways to Customize WooCommerce

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

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

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

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

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

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

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

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

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

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

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

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)

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)

Final tips & Resources

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

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

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