WooCommerce Cart Page Hooks Visual Guide 2024

In this comprehensive guide, we will explore the power of WooCommerce cart page hooks and provide a step-by-step customization guide. 

Understanding cart page hooks allows you to tap into the underlying code of WooCommerce and make precise modifications to the cart page layout, functionality, and appearance.

No matter your level of coding expertise, we will cover different approaches to suit your needs. From simple changes using code snippets to user-friendly plugins offering intuitive customization options, you'll find the best method.

Without any further ado, let’s dive in and see how many WooCommerce cart page hooks are available and how we can use them to customize the cart page. 

List of WooCommerce Cart Page Hooks

The number of hooks available on the WooCommerce cart page can vary depending on the specific version of WooCommerce you are using and any customizations you have made to your theme or plugins. 

WooCommerce itself provides several hooks related explicitly to the cart page. Here is a comprehensive list of commonly used WooCommerce cart page hooks:

1. woocommerce_before_cart
2. woocommerce_before_cart_table
3. woocommerce_before_cart_contents
4. woocommerce_cart_item_name
5. woocommerce_cart_item_quantity
6. woocommerce_cart_item_price
7. woocommerce_cart_contents
8. woocommerce_cart_coupon
9. woocommerce_cart_actions
10. woocommerce_after_cart_contents
11. woocommerce_after_cart_table
12. woocommerce_cart_collaterals
13. woocommerce_cart_totals_before_shipping
14. woocommerce_before_shipping_calculator
15. woocommerce_after_shipping_calculator
16. woocommerce_cart_totals_after_shipping
17. woocommerce_cart_totals_before_order_total
18. woocommerce_cart_totals_after_order_total
19. woocommerce_proceed_to_checkout
20. woocommerce_after_cart_totals
21. woocommerce_after_cart

WooCommerce Cart Page Hooks Visual Representation

Here’s the visual representation of the cart page hooks mentioned above. 

This list covers the most commonly used hooks on the WooCommerce cart page, allowing you to add, modify, or remove content at specific sections to customize the appearance and functionality of the cart page. 

Remember that WooCommerce is highly extensible, and additional hooks can be added by third-party plugins or custom code. For more details and specific use cases, it is recommended to consult the official WooCommerce documentation.

Following is the detail and example of each hook. 

1. woocommerce_before_cart

This hook is used to display content before the cart page. It is typically used to add introductory text, notices, or promotional messages at the top of the cart page.

1.1. Add Text Using the woocommerce_before_cart Hook

To use the woocommerce_before_cart hook, we need to create a function to output the desired text before the cart. Then we need to use the add_action() to hook our custom function. 

The first parameter of the add_action() function is the hook name (woocommerce_before_cart), and the second parameter is the name of our custom function (woosuite_add_text_before_cart).

Following is the code example of using the woocommerce_before_cart hook. 

function woosuite_add_text_before_cart() {
    echo '<p>This is a custom text displayed before the cart.</p>';
}
add_action( 'woocommerce_before_cart', 'woosuite_add_text_before_cart' );

1.2. Final Results

Following is the result after adding the above code to my demo store. 

2. woocommerce_before_cart_table

This hook allows you to add content before the cart table. It can be used to display additional information, notices, or custom HTML elements above the cart items.

2.1. Add Text Using the woocoommerce_before_cart_table Hook

To use the woocommerce_before_cart_table hook, we need to create a function woosuite_add_text_before_cart_table() to output the desired text before the cart. Then we need to use the add_action() to hook our custom function. 

The first parameter of the add_action() function is the hook name (woocommerce_before_cart_table), and the second parameter is the name of our custom function (woosuite_add_text_before_cart_table).

Following is the code example of using the woocommerce_before_cart_table hook. 

function woosuite_add_text_before_cart_table() {
    echo '<p>This is a custom text before the cart table.</p>';
}
add_action( 'woocommerce_before_cart_table', 'woosuite_add_text_before_cart_table' );

2.2. Final Results

Following is the result after adding the above code to my demo store. I have displayed the results of both hooks to give you a better understanding.

3. woocommerce_before_cart_contents

This hook is used to display content before the cart items. It is placed inside the cart table below the column titles. It can be utilized to add custom elements, such as a table header or a notice specific to the cart's contents.

3.1. Add Content Using the woocommerce_before_cart_contents Hook

To use the woocommerce_before_cart_contents hook, we need to create a function woosuite_custom_content_before_cart_items() to output the desired text before the cart. Then we need to use the add_action() to hook our custom function. 

The first parameter of the add_action() function is the hook name (woocommerce_before_cart_contents), and the second parameter is the name of our custom function (woosuite_custom_content_before_cart_items).

Following is the code example of using the woocommerce_before_cart_contents hooks. 

function woosuite_custom_content_before_cart_items() {
    echo '<div class="custom-content">This is my custom content. You can add whatever you want according to your needs. </div>';
}
add_action( 'woocommerce_before_cart_contents', 'woosuite_custom_content_before_cart_items' );

3.2. Final Results

Following is the result after adding the above code to my demo store. 

4. woocommerce_cart_item_name

This hook allows you to add content inside each cart item's name. It can display additional details, such as variations, attributes, or custom labels alongside the product name.

4.1. Customize the Product Name Using the woocommerce_cart_item_name Hook

The following code defines a function named woosuite_custom_cart_item_name that accepts three parameters: $product_name, $cart_item, and $cart_item_key. This function will be called when the woocommerce_cart_item_name filter hook is triggered.

Inside the function, the product ID is extracted from the $cart_item array using $cart_item['product_id'] and stored in the $product_id variable.

The product name is then modified by adding a custom prefix using the concatenation operator (.). The modified product name is stored back in the $product_name variable.

Finally, the modified product name is returned using the return statement from the function.

The add_filter() function registers the woosuite_custom_cart_item_name function as a filter callback for the woocommerce_cart_item_name hook. The priority is set to 10, and the number of accepted arguments is set to 3 (matching the parameters of the callback function).

Code: 

function woosuite_custom_cart_item_name($product_name, $cart_item, $cart_item_key) {
    // Get the product ID
    $product_id = $cart_item['product_id'];
    
    // Modify the product name
    $product_name = 'Custom Prefix: ' . $product_name;
    
    // Return the modified product name
    return $product_name;
}
add_filter('woocommerce_cart_item_name', 'woosuite_custom_cart_item_name', 10, 3);

4.2. Final Results

After adding the above code to my demo store, here are the final results.

5. woocommerce_cart_item_quantity

This hook displays content for the quantity field of each cart item. It can modify the quantity input field or add custom elements related to the item quantity.

5.1. Add Custom Label Before Each Item’s Quantity 

The code defines a function named woosuite_custom_cart_item_quantity that modifies the display of the quantity for each item in the WooCommerce cart. It takes three parameters: $product_quantity, $cart_item_key, and $cart_item.

Inside the function, it retrieves the product title associated with the cart item using the get_the_title function and stores it in the variable $product_name.

Then, it adds a label before the quantity value by modifying the $product_quantity variable. The label is created using an HTML span element with a class of "quantity-label" and the text "Quantity:".

Finally, the modified $product_quantity is returned.

The code also includes a hook that adds the woosuite_custom_cart_item_quantity function as a filter for the woocommerce_cart_item_quantity hook with a priority of 10 and a parameter count of 3. 

This ensures that the woosuite_custom_cart_item_quantity function is called when the cart item quantity is displayed, allowing it to modify the output.

Code: 

function woosuite_custom_cart_item_quantity($product_quantity, $cart_item_key, $cart_item) {
    $product_name = get_the_title($cart_item['product_id']);
    
    // Add a label before the quantity
    $product_quantity = '<span class="quantity-label">Quantity:</span> ' . $product_quantity;

    return $product_quantity;
}
add_filter('woocommerce_cart_item_quantity', 'woosuite_custom_cart_item_quantity', 10, 3);

5.2. Final Results

Following is the result after adding the above code to my demo store. 

6. woocommerce_cart_item_price

This hook is responsible for displaying content for the price of each cart item. It is commonly used to modify how the item price is displayed, add custom formatting, or include additional pricing information or text.

6.1. Add Custom Text Before the Price Using the woocommerce_cart_item_price Hook

The code defines a function named woosuite_modify_cart_item_price that modifies the item's displayed price in the WooCommerce cart. It takes three parameters: $price, $cart_item, and $cart_item_key.

The function appends a custom text "(Special Offer: Purchase 3 and Get 20% Off)" before the original price. The modified price is stored in the variable $modified_price.

Finally, the modified price is returned from the function, and the function is hooked to the woocommerce_cart_item_price filter with a priority of 10 and 3 parameters. This means that whenever the cart item price is displayed, this function will be called to modify and return the price.

Code:

function woosuite_modify_cart_item_price($price, $cart_item, $cart_item_key) {
    
    // Example: Add a custom text before the cart item price.
    $modified_price = '(Special Offer: Purchase 3 and Get 20% Off)  ' . $price;

    return $modified_price;
}
add_filter('woocommerce_cart_item_price', 'woosuite_modify_cart_item_price', 10, 3);

6.2. Final Results

Following is the result after adding the above code to my demo store. 

7. woocommerce_cart_contents

This hook is responsible for displaying content for each cart item. It is commonly used to modify the appearance or layout of individual cart items, such as adding custom fields, adjusting the product image size, or displaying additional information.

This hook is placed inside the cart table before the ‘Update Cart’ button. 

8. woocommerce_cart_coupon

This hook allows you to display content for the coupon section. It is used to customize the appearance of the coupon input field, display coupon-related messages, or add custom elements to the coupon section.

It is placed below the ‘Apply Coupon’ button.

8.1. Add Custom Message Below the Coupon Field 

I simply created a function(woosuite_add_custom_coupon_message()) and added the content I wanted to display below the coupon button. After that, using the add_action() function, I specified the location(woocommerce_cart_coupon) where I wanted to display the content and called the function. 

It is a very simple example, but you can add whatever code you want inside the function. 

Code:

// Add a custom message below the coupon field on the cart page
function woosuite_add_custom_coupon_message() {
    echo '<p>This is a custom coupon message.</p>';
}
add_action('woocommerce_cart_coupon', 'woosuite_add_custom_coupon_message');

8.2. Final Results

Following is the result after adding the above code to my demo store. 

9. woocommerce_cart_actions

This hook displays content for the cart actions, such as the update cart button, apply coupon button, or continue shopping button. It can be used to modify the appearance or layout of these buttons or add custom functionality.

It is placed inside the cart item table beside the ‘Update Cart’ button. 

9.1. Add a Custom Button on the Cart Page

You can use the following code to add a custom button on the cart page beside the ‘Update Cart’ button. 

You can display the content you want by making little changes to the code. The code is very straightforward to understand, similar to the above ones. 

Code:

// Add a custom button
function woosuite_add_custom_cart_action_button() {
    // Output your custom action button HTML here
    echo '<a href="#" class="button custom-action">Custom Action</a>';
}
add_action( 'woocommerce_cart_actions', 'woosuite_add_custom_cart_action_button' );

9.2. Final Results

Following is the result after adding the above code to my demo store. 

10. woocommerce_after_cart_contents

This hook is used to display content after the cart items. It can be utilized to add additional information, notices, or custom HTML elements below the cart items.

It is placed outside the cart item table. 

11. woocommerce_after_cart_table

The woocommerce_after_cart_table hook is an action hook in WooCommerce that allows developers to add or modify content immediately after the cart table on the cart page.

12. woocommerce_cart_collaterals

This hook allows you to display content in the cart collaterals section. It is commonly used to add custom elements, such as a cart total summary, shipping calculator, related products, or additional notices.

It is placed below the cart table and above the cart totals. 

12.1. Add Custom Content

To show you the working and location of the hook, I used a simple example in which I just displayed a message in the cart collaterals section (outside the cart item table and above the cart totals.).

You can use and modify the following code according to your needs. 

Code:

function woosuite_custom_cart_collaterals() {
    // Add custom content or modifications to the cart collaterals section
    echo '<p>This is my custom content in the cart collaterals section.</p>';
}
add_action( 'woocommerce_cart_collaterals', 'woosuite_custom_cart_collaterals' );

12.2. Final Results

Following is the result after adding the above code to my demo store. 

13. woocommerce_cart_totals_before_shipping

The woocommerce_cart_totals_before_shipping hook is triggered before the shipping options are displayed in the cart totals section on the WooCommerce cart page. 

It allows developers to add or modify content at that specific point by executing custom code or functions.

14. woocommerce_before_shipping_calculator

The woocommerce_before_shipping_calculator hook is triggered before the shipping calculator is displayed on the cart page in WooCommerce. It is displayed above the ‘Calculate Shipping’ text and below the shipping options on the cart page. 

It allows developers to add or modify content at that specific point by executing custom code or functions.

15. woocommerce_after_shipping_calculator

The woocommerce_after_shipping_calculator hook is an action hook in WooCommerce that allows developers to add or modify content after the shipping calculator is displayed on the cart page. 

It is displayed below the ‘Calculate Shipping’ text and above the cart total. 

It allows inserting custom content or performing additional actions related to the shipping calculator area.

16. woocommerce_cart_totals_after_shipping

It is an action hook in WooCommerce that allows developers to add or modify content after the shipping options are displayed in the cart totals section on the cart page. It provides a way to customize the content immediately following the shipping options.

17. woocommerce_cart_totals_before_order_total

The woocommerce_cart_totals_before_order_total hook is an action hook in WooCommerce that allows developers to add or modify content before the order total is displayed in the cart totals section on the cart page.

By hooking into woocommerce_cart_totals_before_order_total, you, as a developer, can insert custom content, perform calculations, or modify the order total area.

18. woocommerce_cart_totals_after_order_total

The woocommerce_cart_totals_after_order_total hook is an action hook in WooCommerce that allows developers to add or modify content after the order total is displayed in the cart totals section on the cart page.

19. woocommerce_proceed_to_checkout

The woocommerce_proceed_to_checkout hook is triggered when the "Proceed to Checkout" button is displayed on the cart page in WooCommerce. 

It allows developers to add custom functionality or modify the button text or the checkout process by executing code or functions at that specific point.

20. woocommerce_after_cart_totals

The woocommerce_after_cart_totals hook is an action hook in WooCommerce that allows developers to add or modify content immediately after the cart totals section is displayed on the cart page.

Here’s a straightforward example of this hook. 

function woosuite_custom_after_cart_totals() {
    // Add custom content or modifications after the cart totals
    echo '<p>This is my custom content after the cart totals.</p>';
}
add_action( 'woocommerce_after_cart_totals', 'woosuite_custom_after_cart_totals' );

21. woocommerce_after_cart

The woocommerce_after_cart hook is an action hook in WooCommerce that allows developers to add or modify content immediately after the cart items and cart totals are displayed on the cart page. 

It allows inserting custom content and additional elements or performing actions related to the cart display.

Conclusion

I hope this guide was helpful to you and you were able to learn the cart page hooks and customize the cart page.

It is one of the most important pages on a WooCommerce online store, and as a developer, you should know how to customize it according to your client’s requirements.  
I have covered the important hooks you should know about to customize the cart page. You should know how to work with each hook if you want to be a WordPress developer and build plugins and themes.