How to Remove COMMA After COLOR Option in Cart Drawer? (Dawn theme)

[Senku]

How can I remove the COMMA that appears after the product option (COLOR) in the cart drawer? I'm using the Dawn theme. Would really appreciate any help!

[Mustafa_Ali]

hey @Senku share the URLs of your website plz

[Senku]

here is the website using the same theme, when you add to cart, you will see the cart drawer and the comma i want to remove: thttps://seasonalcollections.co/

[Moeed]

Hey @Senku 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<script>
document.addEventListener('DOMContentLoaded', function() {
  const productOptionDivs = document.querySelectorAll('.product-option');

  productOptionDivs.forEach(function(optionDiv) {
    const dtElement = optionDiv.querySelector('dt');
    const ddElement = optionDiv.querySelector('dd');

    if (dtElement && dtElement.textContent.trim() === 'Color:' && ddElement) {
      ddElement.innerHTML = ddElement.innerHTML.replace(/,\s*$/, '');
    }
  });
});
</script>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[tim]

Looks like your theme code is already modified and theme does not auto update, so I'd suggest you edit your theme code, go to snippets/cart-drawer.liquid and delete the following line:

 {%- unless forloop.last %}, {% endunless %}

as highlighted here:

https://github.com/Shopify/dawn/blob/release/13.0.1/snippets/cart-drawer.liquid#L174 

[namphan · Accepted solution]

Hi @Senku,

Please go to Actions > Edit code > snippets > cart-drawer.liquid file, find 'item.product.has_only_default_variant' and remove code here:

[Senku]

can you help me with custom css? i don't want to change theme code

[tim]

This is indeed commendable.

You can't fix this with CSS alone because this comma is not  a separate element.

Moeed's code would not really work because content of the drawer is changed dynamically.

Try this. It's not a theme code edit -- Add a "Custom liquid" section to the footer section group and put the code to this section setting:

<script>
window.addEventListener('load', ()=> {
  let fixOptions = () => {
    requestAnimationFrame(()=>{
      document.querySelectorAll('.product-option dd').forEach(e=>{ e.innerHTML = e.innerHTML.replace(/,\s*$/, '');});
    });
  };

  fixOptions();
  window.subscribe && subscribe(PUB_SUB_EVENTS.cartUpdate, (data) => {
    let { source } = data;
    if (source!= 'product-form') fixOptions();
    else {
      let cartDrawer = document.querySelector('cart-drawer');
      if (cartDrawer) cartDrawer.addEventListener("transitionend",fixOptions);
    }
  });
});
</script>

[DaisyVo]

Hi @Senku 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

td.cart-item__details dl .product-option:first-child {
    display: none !important;
}

Result 

Best,

DaisyVo

[Senku]

will it only remove comma and not affect other functions in website right?

[DaisyVo]

Hi @Senku 

In that case, you'll need to modify the theme's code — it can't be done with CSS alone. You should contact the theme developer to avoid any potential issues.

[Senku]

this way right? 

Step 1: Go to Edit code
Step 2: Find file base.css and add this codeat the end of the file: td.cart-item__details dl .product-option:first-child { display: none !important; }

[tim]

Nope. This is code edit and this will hide selected options completely rather than only comma.

[Senku]

Thank you so much. This is the option that only remove comma and will not affect others right? 

Looks like your theme code is already modified and theme does not auto update, so I'd suggest you edit your theme code, go to snippets/cart-drawer.liquid and delete the following line: {%- unless forloop.last %}, {% endunless %}

[tim]

Yes. If your theme code is already modified, then this is the simplest solution to your initial problem.

If, however, you want to avoid theme code modifications, then use my other suggestion, via "Custom Liquid" section.

[Senku]

Thanks a bunch!