Showing an add-ons product feature inside the mini cart WooCommerce

Hello guys how are you? Welcome back to my blog therichpost.com. Guys today in this post, I will be Showing an add-ons product feature inside the mini cart WooCommerce.

Guys if you are new in WordPress or in WooCommerce then please check the below links for some good tutorials:

1. WooCommerce Hooks
2. WordPress Tricks
3. WordPress Hooks
4. Dokan

Here is the working steps and please follow carefully:

Guys to show an add-ons product feature inside the mini cart in WooCommerce, you need to customize the mini cart template and possibly modify the cart item data. Here’s how you can do it:

1. Ensure Add-ons Data is Stored in the Cart

Guys if you’re using a WooCommerce product add-ons plugin, ensure the add-ons data is stored when a product is added to the cart. If needed, modify the woocommerce_add_cart_item_data filter:

add_filter('woocommerce_add_cart_item_data', function($cart_item_data, $product_id, $variation_id) {
    if (!empty($_POST['custom_addon_field'])) {
        $cart_item_data['custom_addon'] = sanitize_text_field($_POST['custom_addon_field']);
    }
    return $cart_item_data;
}, 10, 3);

2. Display Add-ons in the Mini Cart

Edit the mini-cart.php template by overriding it in your theme:
Copy the file:
wp-content/plugins/woocommerce/templates/cart/mini-cart.php
to:
wp-content/themes/your-theme/woocommerce/cart/mini-cart.php

Then modify the file to include the add-ons data:

<?php
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
    $product = $cart_item['data'];
    $product_permalink = $product->get_permalink( $cart_item );

    echo '<li class="woocommerce-mini-cart-item">';
    echo '<a href="' . esc_url($product_permalink) . '">' . $product->get_name() . '</a>';

    // Display Add-on data if available
    if (!empty($cart_item['custom_addon'])) {
        echo '<p class="addon-text"><strong>Addon:</strong> ' . esc_html($cart_item['custom_addon']) . '</p>';
    }

    echo '</li>';
}
?>

3. Style the Add-ons in the Mini Cart (Optional)

Add custom styles to your theme’s style.css:

.woocommerce-mini-cart-item .addon-text {
    font-size: 12px;
    color: #777;
    margin-top: 5px;
}

4. Clear Sessions After Checkout (Optional)

To prevent leftover data, clear custom fields after checkout:

add_action('woocommerce_checkout_order_processed', function($order_id) {
    foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) {
        unset($cart_item['custom_addon']);
    }
}, 10, 1);

This should ensure your add-on data appears inside the mini cart while keeping it clean and functional. Let me know if you need further customization! 🚀

Ajay

Thanks