Slide 1

Slide 1 text

April 2021, WordCamp Greece Online Customizing WooCommerce

Slide 2

Slide 2 text

WooCommerce How customizable is it after all?

Slide 3

Slide 3 text

WooCommerce Stats WooCommerce: How customizable is it after all? ● 29-30% market share on eCommerce websites (2021) ● Open Source - Open Code ● GNU GPLv2 (or later) ● Thousands of WooCommerce themes & plugins ● Huge, active community

Slide 4

Slide 4 text

Where to Write your Code

Slide 5

Slide 5 text

WordPress Plugin Where to Write your Code > WordPress Plugin ● Use a WordPress plugin like Code Snippets By Code Snippets Pro ● Write PHP or JavaScript ● Great for small snippets ● User friendly ● Pretty safe

Slide 6

Slide 6 text

Child Theme Where to Write your Code > Child Theme ● Extends your active theme ● Unchanged after theme updates ● Anything goes - PHP, CSS, JS, HTML etc. ● How to install (video link) ● Edit via FTP, File Manager (Cpanel, Plesk etc.) or Theme Editor (Appearance > Theme Editor) ● Easy to break things

Slide 7

Slide 7 text

Your Own Custom Plugin Where to Write your Code > Your Own Custom Plugin ● Great for complex customizations ● Anything goes - PHP, CSS, JS, HTML etc. ● Easy to maintain with version control ● Edit via FTP, or Plugin Editor (Appearance > Plugin Editor) ● Easy to break things ● Plugin Boilerplate

Slide 8

Slide 8 text

Ways to Customize WooCommerce

Slide 9

Slide 9 text

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 Example /wp-content/plugins/woocommerce/templates/checkout/form-billing.php /wp-content/themes/storefront-child/woocommerce/checkout/form-billing.php

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 the plugin’s code ● The best way to add your customizations

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 '
Hello WordCamp Greece!
'; } do_action in WooCommerce Core content-single-product.php file add_action in your child theme or plugin $tag $function $priority

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

WooCommerce Conditionals Customize where needed (only)

Slide 22

Slide 22 text

WooCommerce Conditional Tags WooCommerce Conditionals ● Apply to customizations only where needed ● Find them in /woocommerce/includes/wc-conditional-functions.php ● Or, some of them, on the Docs: Conditional Tags Examples is_woocommerce() is_shop() is_product_category() is_product_category( 'shirts' ) is_product_tag( 'shirts' ) is_product() is_cart() is_checkout() is_account_page() is_wc_endpoint_url( 'order-received' )

Slide 23

Slide 23 text

Final Tips From the front-line...

Slide 24

Slide 24 text

Final Tips Final Tips ● Use a child theme no matter what. ● Don’t customize on production environment. ● Prefer hooks over template/function overrides. ● Keep your customizations organized. ● Invest in a good IDE like PhpStorm. Seriously. ● Don’t trust Stack Overflow snippets. Always refer to the core code or official WP/WC documentation.

Slide 25

Slide 25 text

April 2021, WordCamp Greece Online Thank you! Theodoros Gkitsos theodorosgkitsos.com @theogk