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.
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.
Similar Articles
- How to Hide Tax On Checkout If Field Value Exists WooCommerce
- How to Put WooCommerce Cart and Checkout on One Page
- What is WooCommerce Storefront Theme ? [Answered]
- How to Hide Shipping Rates if Free Shipping Available WooCommerce
- How to Remove Cart Page WooCommerce Storefront Theme
- How to Hide Price If Zero In WooCommerce
- How Add Text Before the Price in WooCommerce » Add Text Before Price
- How to Set up WooCommerce Storefront Footer Widgets
- How to Use WooCommerce Product Attributes Step by Step [Complete Guide]
- How to Hide Quantity In Stock In WooCommerce
- How to Hide Update Cart Button WooCommerce Cart Page
- How to Hide Weight of Product in WooCommerce
- WooCommerce Logout PHP Snippet to Create Logout Button
- How to Get Payment Methods in WooCommerce » Code Example
- How to Hide WooCommerce Product from Search Results
- How to Add Extra Field in WooCommerce Checkout Form
- How to Hide WooCommerce Registration Form
- How to Hide Any Tab My Account Page WooCommerce