Help with Dynamically Hiding Custom Order Fields Based on Cart Contents in Webflow Checkout

Design help Ecommerce
1

Hi Webflow Community,

I’m working on a Webflow e-commerce site and trying to solve an issue where I need to hide the additional information fields (like car name, year, and image upload) in the checkout page unless the cart contains a “Custom Order” product. These fields are part of a dynamic block on the checkout page, but I can’t use conditional visibility for them directly since they’re part of the checkout flow.

I’ve tried using custom code, but I’m struggling to dynamically hide the .summary-group-wrapper .additional-info section if the “Custom Order” item is not in the cart. Here’s the approach I tried with chatGPT (probably that’s why it’s not working):

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const cartItems = document.querySelectorAll('.w-commerce-commercecheckoutblockcontent .summary-content .w-commerce-cart-item');
    const additionalInfo = document.querySelector('.summary-group-wrapper .additional-info');
    let customOrderFound = false;

    cartItems.forEach(item => {
      const productName = item.querySelector('.w-commerce-cart-item-name');
      if (productName && productName.textContent.includes("Custom Order")) {
        customOrderFound = true;
      }
    });

    if (!customOrderFound && additionalInfo) {
      additionalInfo.style.display = 'none';
    }
  });
</script>

However, it doesn’t seem to be targeting the correct cart items or hiding the fields as expected.

My Questions:

• How can I properly target the cart items, ensuring that the “Custom Order” product is correctly identified?

• Is there a more reliable method for conditionally hiding or showing checkout fields based on cart content in Webflow?

If anyone has experience with custom code or other methods to solve this, I’d really appreciate your help!

Thank you!

Here is my site Read-Only: Webflow - Caronwall Ecommerce