April 2021, WordCamp Greece Online Customizing WooCommerce

WooCommerce How customizable is it after all?

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

Where to Write your Code

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

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

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

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 Example /wp-content/plugins/woocommerce/templates/checkout/form-billing.php /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 the plugin’s 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… ● Search through the core files ● Search using a PHP IDE ● Rodolfo Melogli’s awesome “Visual Hook Series” (Business Bloomer)

WooCommerce Conditionals Customize where needed (only)

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' )

Final Tips From the front-line...

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.

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