WooCommerce Cart Action Hooks [Complete Guide]

WooCommerce Cart Action HooksIn today’s brief tutorial, we will share some of the WooCommerce cart action hooks. In addition, we will illustrate how you can use them to modify the cart page.

WooCommerce is popular because it is extremely friendly for developers. This platform has a ton of actions and filters that can be used to develop plugins and tweak different pages in your online store.

The main aim of this tutorial is to help both beginners and advanced WooCommerce developers find the right hooks to customize the cart page. It is important to note that this guide is based on the official WooCommerce theme called Storefront.

WooCommerce Cart Action Hooks

Hooks in WordPress are used to change or add code without editing the core files of your website. These hooks are used in WordPress and WooCommerce extensively.

It is important to note that action hooks allow you to insert custom code at various points. On the other hand, filter hooks allow you to manipulate and return a variable, for example, a product price.

Let us learn more about some of the cart action hooks.

WooCommerce Cart Hooks – The Complete List

In this section, we will share a complete list of all the WooCommerce cart hooks. Here is an image of the cart page visual hooks:

Cart action hooks 2

Here is a list of all the WooCommerce Cart Hooks:

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_cart_coupon
  • woocommerce_cart_actions
  • woocommerce_after_cart_contents
  • woocommerce_after_cart_table
  • woocommerce_cart_collaterals
  • woocommerce_before_cart_totals
  • woocommerce_cart_totals_before_shipping
  • woocommerce_after_shipping_rate
  • woocommerce_before_shipping_calculator
  • woocommerce_after_shipping_calculator
  • woocommerce_cart_totals_after_shipping
  • woocommerce_cart_totals_before_order_total
  • woocommerce_cart_totals_after_order_total
  • woocommerce_proceed_to_checkout
  • woocommerce_after_cart_totals
  • woocommerce_after_cart
  • woocommerce_cart_is_empty

Remove The Default Actions On The Cart Page

In this section, we will share how you can remove some of the default actions like the woocommerce_cross_sell_display, woocommerce_cart_totals, and woocommerce_button_proceed_to_checkout.cart default

To remove the cross-sells next to cart totals, cart totals next to cross-sells, and proceed to checkout button under cart totals, here are the steps you need to follow:

  1. Log in to your WordPress dashboard as admin.
  2. From the dashboard, navigate to Appearance > Theme Editor. When the Theme Editor page is opened, look for the theme functions file where we will add the function to remove the default actions on the cart page.
  3. Add the following code in the functions.php file:
[php] /**

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

*

*/

remove_action( ‘woocommerce_cart_collaterals’, ‘woocommerce_cross_sell_display’ );

remove_action( ‘woocommerce_cart_collaterals’, ‘woocommerce_cart_totals’, 10 );

remove_action( ‘woocommerce_proceed_to_checkout’, ‘woocommerce_button_proceed_to_checkout’, 20 );
[/php]

  1. This is the outcome:Outcome 1

Add Your Own Sections To The Cart Page

It is worth mentioning that you can use the cart action hooks to add sections to the cart page. In this section, we will illustrate how this can be achieved.

When you want to add text or sections to the cart page, you do not need to edit WooCommerce templates. Here are the steps you need to follow:

  1. Log in to your WordPress dashboard as admin.
  2. From the dashboard, navigate to Appearance > Theme Editor. When the Theme Editor page is opened, look for the theme functions file where we will add the function to add a “free shipping” text before the WooCommerce cart table.
  3. Add the following code in the functions.php file:
[php] add_action( ‘woocommerce_before_cart_table’, ‘njengah_cart_free_shipping_text’ );
/**
* Add "free shipping" text to the WooCommerce cart page
*
*/
function njengah_cart_free_shipping_text() {
echo ‘<div class="woocommerce-info">Free Shipping available from $299!</div>’;
}

[/php]
  1. This is the outcome:outcome 2

It is important to note that you can use the same procedure to add text or a section to the cart page.

Conclusion

The cart page is one of the most important pages in your WooCommerce store. Therefore, it is important to learn how to customize this page to increase sales in your store.

We have shared all the action hooks that can be used to customize the cart page. It is important to test each one if you want to be an advanced WordPress developer. It will help you to create plugins or modify different sections.

We hope that this post helped you to edit the cart page.

Similar Articles