WooCommerce Visual Hook Guide Checkout

WooCommerce is developer-friendly because it has a ton of hooks that you can use. These hooks or actions and filters are used when developing a plugin or tweaking the checkout process.

Table of Contents

In this post, I will share a WooCommerce checkout hooks guide that I created. This guide will help any developer to find the right hooks to use when customizing the checkout page.

WooCommerce Checkout Hooks Visual Guide

In the image below, you will find all the hooks available on the WooCommerce checkout page. It is worth mentioning that this guide is based on the official WooCommerce Storefront theme.

(Image)

Remove the Default Actions on the Checkout Page

WooCommerce, by default, uses some of the hooks to add:

coupon form before checkout form (woocommerce_checkout_coupon_form)
login form before checkout form (woocommerce_checkout_login_form)
payments table and the order review section (woocommerce_checkout_payment)
order review table to the order review section (woocommerce_order_review)

To remove these sections, you can paste the following code to the functions.php file in your theme or preferably child theme:

/**

 * Default WooCommerce Checkout Hooks (just an example, do not copy)

 *

 */

add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );

add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );

add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );




/**

 * How to Remove Default WooCommerce Checkout Hooks (paste into your functions.php file)

 *

 */

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

Add Custom Sections to the Checkout Page

If you want to add some texts or sections to the checkout page, there is no need to edit WooCommerce templates.

In this section, I will illustrate how to add “hello” text above the checkout form like this:

To add the section, add the following code at the bottom of the functions.php file:

add_action( 'woocommerce_before_checkout_form', 'wpdesk_checkout_hello', 5 );

/**

* Add "hello" text before WooCommerce checkout form

*

*/

function wpdesk_checkout_hello() {

echo '<h2>Hello there! Happy shopping!</h2>';

}

Conclusion

In summary, this post shares a visual hook guide for the WooCommerce checkout page. I have also shared how to remove the checkout page’s default actions using a custom PHP snippet.

It is very easy to add a custom section or text on the checkout page, as illustrated above. There is no need to edit WooCommerce templates. All you need to do is paste the code snippets to the functions.php file in your theme or preferably child theme.

If you are unfamiliar with customizing code, please consider hiring a qualified WordPress developer.

Editorial Staff

WooCommerce Visual Hook Guide Checkout

WooCommerce Checkout Hooks Visual Guide

Remove the Default Actions on the Checkout Page

Add Custom Sections to the Checkout Page

Conclusion

Similar Articles

Related