How can I hide bundle contents on customer orders?

Use JavaScript to hide the bundle contents on a customer's status pages

If you would like to hide products that are part of a bundle, you can do so by modifying the Additional scripts on your status page.

1. Navigate to the Settings page.

2. Click on the Checkout section on the page.

3. Scroll down to the Order status page scripts section.

4. Add the following code to the Order status page scripts section:

<style>.notice.notice--info, .notice.notice--warning{display: none}</style><script>function removeBundleItems(){for(var e=document.querySelectorAll("[data-product-id]"),t=0;t<e.length;t++){var n=e[t];if(n.innerText.includes("SIMPLE BUNDLES:")){n.remove();for(var i=n.querySelector(".product__description__name").innerText,o=n.querySelector(".product__description__variant").innerText,r=document.querySelectorAll(".shipment-information__items .shipment-information__item"),m=0;m<r.length;m++){var l=r[m];l.innerText.includes(i)&&l.innerText.includes(o)&&l.remove()}}}var u=Shopify.checkout.line_items,c=document.querySelectorAll(".shipment-information__items .shipment-information__item");for(m=0;m<c.length;m++){for(var d=c[m],s=!0,a=0;a<u.length;a++){const e=u[a];d.innerText.includes(e.title)&&d.innerText.includes(e.variant_title)&&(s=!1)}s&&d.remove()}document.querySelector(".shipment-information--unfulfilled .shipment-information__items tr.shipment-information__item")||document.querySelector(".shipment-information--unfulfilled").closest(".content-box").remove()}document.addEventListener("DOMContentLoaded",function(){setTimeout(removeBundleItems,100)}),document.querySelector(".order-summary-toggle").addEventListener("click",function(){setTimeout(removeBundleItems,100)});</script>

Once added, your bundle items should be removed from the order status page that customers can view after the order is placed.

Before adding the additional scripts

After adding the additional script