WooCommerce Hook: woocommerce_cart_collaterals

WooCommerce offers a variety of hooks and filters to extend the functionality of an online store. One of these hooks is woocommerce_cart_collaterals. This hook is useful when you want to add additional content or features near the so-called "Cart Collaterals," which typically include things like the "Subtotal" section, coupon field, or shipping information.

In this blog post, we will look at how this hook works and go through some practical PHP examples that show how to use it.

What is the woocommerce_cart_collaterals hook?

The woocommerce_cart_collaterals hook is called in the standard WooCommerce template cart/cart.php. It is used to insert content within the cart's collateral area, which usually contains the totals area and shipping options.

Position of the hook in the template:

/**
 * Cart collaterals hook.
 *
 * @hooked woocommerce_cross_sell_display
 * @hooked woocommerce_cart_totals - 10
 */
do_action( 'woocommerce_cart_collaterals' );

Use Cases

With this hook, you can:

• Add custom notices or information.
• Display promotional banners or promotions.
• Implement upselling or cross-selling strategies.
• Show additional cart recommendations.

Example 1: Insert a custom message in the collaterals

Let's say you want to add a custom message to alert customers about special promotions. You can achieve this with the following code:

add_action( 'woocommerce_cart_collaterals', 'custom_cart_collaterals_message' );

function custom_cart_collaterals_message() {
    echo '<div class="custom-cart-message">';
    echo '<p><strong>Buy now and get 10% off your next order!</strong></p>';
    echo '</div>';
}

This code adds a simple custom message to the cart's collateral area.

Explanation:

The woocommerce_cart_collaterals hook is used to add the custom function custom_cart_collaterals_message. Within the function, an HTML structure is output that contains the message.

Example 2: Display cross-selling products

WooCommerce has a built-in function to display cross-selling products in the cart. You can customize or enhance the display of cross-selling products by using the woocommerce_cart_collaterals hook.

remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' ); // Removes the default display

add_action( 'woocommerce_cart_collaterals', 'custom_cross_sell_display' );

function custom_cross_sell_display() {
    // Show a maximum of 4 cross-sell products, 2 per row
    woocommerce_cross_sell_display( 4, 2 );
}

Explanation

First, the default cross-sell display is removed with remove_action. Then, the custom function custom_cross_sell_display is added to display up to 4 cross-selling products in two rows.

Example 3: Add a promotional banner for a special offer

If you want to promote a special offer or discount code in the cart, you can insert a banner with the hook.

add_action( 'woocommerce_cart_collaterals', 'custom_promo_banner' );

function custom_promo_banner() {
    echo '<div class="promo-banner">';
    echo '<img src="https://yourwebsite.com/promo-banner.jpg" alt="Special Offer" />';
    echo '<p>Use the code <strong>SALE20</strong> and save 20%!</p>';
    echo '</div>';
}

Explanation:

The function custom_promo_banner adds an image and a note about a special offer with a discount code to the collateral area. This can be useful to draw attention to current promotions.

Conclusion

The woocommerce_cart_collaterals hook provides a flexible way to integrate additional content or features into the cart area of your WooCommerce store. Whether you want to add information, display cross-selling products, or promote offers – this hook helps you further personalize and optimize the checkout process.

With its simple handling in PHP, these customizations can be implemented quickly and efficiently to enhance the shopping experience for your customers.