In 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:
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.
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:
- Log in to your WordPress dashboard as admin.
- 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.
- Add the following code in the functions.php file:
* 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]
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:
- Log in to your WordPress dashboard as admin.
- 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.
- Add the following code in the functions.php file:
/**
* 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]
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
- How to Change WooCommerce Checkout Error Messages
- How to Add Form To Product Page WooCommerce
- WooCommerce Hooks List » Global, Cart, Checkout, Product
- How to Set Up WooCommerce Terms and Conditions Checkout
- How to Hide Cart Subtotal In WooCommerce or Remove Subtotal Row
- How to Set Up WooCommerce Cart and Checkout on the Same Page
- Change Proceed To Checkout Text In WooCommerce
- How to Show Product Stock on the Cart Page WooCommerce
- How to Customize Product Category Page In WooCommerce
- How To Edit WooCommerce Checkout Page
- How to Edit WooCommerce Checkout Page Template
- How To Set Up Cart Page WooCommerce
- How to Show Regular and Sale Price WooCommerce
- How to Add WooCommerce Shipping Calculator on Checkout Page
- How to Count Items Added to Cart WooCommerce Cart Count Code
- WooCommerce Get Total Spent By Customer
- How to Force Secure Checkout In WooCommerce
- Complete Guide to Using WordPress Custom Hooks do_action & apply_filters With Examples