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 if you want to add additional content or functionality near the so-called “Cart Collaterals”, which typically contain things like the “Subtotal” section, coupon field or shipping information.
In this blog post, we’ll 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 hook woocommerce_cart_collaterals is called in the standard WooCommerce template cart/cart.php.
It is used to insert content within the collateral area of the shopping cart, which normally contains the grand total 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' );
Possible applications #
With this hook you can:
- Add user-defined notes or information.
- Display advertising banners or promotions.
- Implement reselling or cross-selling strategies.
- Show additional shopping cart recommendations.
Example 1: Inserting a user-defined message in the collaterals #
Let’s imagine you want to add a custom message to alert the customer to special promotions. You can do 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>Jetzt kaufen und 10% Rabatt auf die nächste Bestellung erhalten!</strong></p>';
echo '</div>';
}This code inserts a simple custom message into the collateral area of the shopping cart.
Explanation: #
The hook woocommerce_cart_collaterals is used to add the user-defined function custom_cart_collaterals_message.
An HTML structure containing the message is output within the function.
Example 2: Show cross-selling products #
WooCommerce has a built-in function to display cross-selling products in the shopping cart.
You can customize or add the display of cross-selling products by using the woocommerce_cart_collaterals hook.
remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' ); // Entfernt die standardmäßige Anzeige
add_action( 'woocommerce_cart_collaterals', 'custom_cross_sell_display' );
function custom_cross_sell_display() {
// Zeige maximal 4 Cross-Sell-Produkte an, 2 pro Reihe
woocommerce_cross_sell_display( 4, 2 );
}Explanation #
First, the default cross-sell display with remove_action is removed.
Then the custom function custom_cross_sell_display is added to display up to 4 cross-selling products in two rows.
Example 3: Adding an advertising banner for a special promotion #
If you want to advertise a special promotion or a discount code in the shopping 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="Sonderaktion" />';
echo '<p>Verwenden Sie den Code <strong>SALE20</strong> und sparen Sie 20%!</p>';
echo '</div>';
}Explanation: #
The custom_promo_banner function inserts an image and a reference to a special promotion with a discount code in the collateral area.
This can be useful to draw attention to current promotions.
Conclusion #
The woocommerce_cart_collaterals Hook offers a flexible way to integrate additional content or functions into the shopping cart area of your WooCommerce store.
Whether you want to add information, display cross-selling products or advertise promotions – this hook helps you to further personalize and optimize the checkout process.
Thanks to the simple handling with PHP, these adjustments can be implemented quickly and efficiently to improve the shopping experience for your customers.
Comments