Adding custom functionality to a WooCommerce checkout

By sjoerd Posted on 28/4, 2016 in Tech

WooCommerce has an awful lot of hooks! Very useful if you want to customize a webshop without touching the WooCommerce core – so you’re safe when updating it. Check out the availability in the documentation!

Here’s an example:
In some occasions you want to do something extra with the WooCommerce checkout form. This could either be adding some HTML, or a while Javascript file just for this occasion, or something completely different.
You can use ‘woocommerce_after_checkout_form’ or ‘woocommerce_before_checkout_form’ from your plugin or (child-)theme.

function add_scripts_checkout() {
wp_enqueue_script(
'checkout-script',
get_stylesheet_directory_uri() . '/includes/js/checkout.js',
array( 'jquery' )
);
}
function add_html_checkout(){
$img_src = get_stylesheet_directory_uri() . '/img/certified-something.png'
echo '<img src="'.$img_src.'"';
echo ' class="certified-something">';
}

add_action( 'woocommerce_before_checkout_form', 'add_html_checkout' );
add_action( 'woocommerce_after_checkout_form', 'add_scripts_checkout');

As you can see, you can either output HTML straight away by echo’ing right before / after the markup of the checkout-form, or handle things programatically like enqueing a javascript file. This Javascript file will only be loaded wherever there’s a WooCommerce checkout-form present, and thus you can target those checkout forms directly with your Javascript functionality.