How to remove CPB product with 0 price if you use bundle mode

If you are using CPB with the Bundle mode or the Fast bundle mode, you can see the base CPB product appear in the cart. It contains information about the selections, including information that is not connected to any SKU.

It's pretty easy to hide it by following these few steps:

1. In the cart template (usually cart.liquid or cart-template.liquid file), you need to add an attribute to the products we want to get rid of. Find code similar to this:

{% for item in cart.items %}
<div class="cart__row">

And add if statement to have this:

{% for item in cart.items %}
<div class="cart__row" {% if item.product.type contains 'cpb_' and item.product.price == 0 %}data-cpb-null-product="{{item.key}}"{% endif%}>

2. At the bottom of the file, add scripts:

<!-- script placed in cart template -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
;(function($) {
$('[data-cpb-null-product]').each(function() {
$.post('/cart/change.js', {
id: $(this).attr('data-cpb-null-product'),
quantity: 0
});
});
})(jQuery);
</script>

You don't need to add "<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>" if jQuery is already turned on before in your theme (usually it is)

3) We need to hide the product from the cart before it is removed. To do so, add style to your theme (usually theme.css.liquid file)

[data-cpb-null-product] {
display: none;
}

Done! Now, the base products with zero price won't appear in the cart.