WooCommerce Visual Hook Guide Checkout

WooCommerce Visual Hook Guide CheckoutWooCommerce 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.

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:Add a custom section on the WooCommerce Checkout page

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.

Similar Articles

  1. How to Hide Any Tab My Account Page WooCommerce

Customer Reviews

NJENGAH

Customer Reviews

Jeffrey Todd 04/07/2020

Exceptional Plugin & Service

I'm in the process of building my new website, and I had a question about changing some text within the WooCommerce plugin. I was spinning my wheels trying to figure it out. Joe reached back and worked with me - going above and beyond! - until I fully understood how to effectively change what I wanted. How can you ask for more than that? I highly recommend WooCommerce (and Joe!), the plugin and service are exceptional!
-Jeffrey Todd (MyLifeChart.com)