Cart icon vanishes from the "Add to cart" button when selecting alternative product variation - DAWN

Sindiso
New Member
6 0 0

I aim to include the cart icon alongside the "Add to cart" button. I implemented the solution provided in this guide. This solution works correctly when the product page loads initially. However, when I choose a different product variation after the page has already loaded, the cart icon disappears from the "Add to cart" button. Does anyone know why this is happening? - below I have attached two screenshot demonstrating this.

Please help. Thanks in advance!initial-load.pngafter-selecting-varient.png

 

 

 

Replies 9 (9)

dbuglab
Shopify Partner
473 51 50

Hi @Sindiso 


Can you please provide your Store URL and Password too?


With Regards,
Dbuglab

banned
Sindiso
New Member
6 0 0

Store link 

There is no password.

dbuglab
Shopify Partner
473 51 50

Hi @Sindiso 

While changing the variants button HTML changed

before

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
            <span><svg class="icon icon-cart" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
  <path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"></path>
</svg>
<p>Add to cart</p></span>
            <div class="loading-overlay__spinner hidden">
              <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
          </button>

 

 

After

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
            <span>Add to cart</span>
            <div class="loading-overlay__spinner hidden">
              <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
          </button>

 

 

 

Please check the on change function.

Thanks
Dbuglab 

banned
Sindiso
New Member
6 0 0

Hi @dbuglab,

 

Uhm, where do I find this function? - also, any specific details I should be looking for?

 

Thanks,

Sindiso.

dbuglab
Shopify Partner
473 51 50

@Sindiso 

product-form.liquid
prodcut-card.liquid
product-price.liquid


Please check code in these files.

banned

Moeed
Shopify Partner
3542 892 1107

Hey @Sindiso 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
Sindiso
New Member
6 0 0

Store link

There is no password.

zaczee
Globetrotter
848 46 44

HI,

 

We need to check your product.liquid code to fix the issue

 

Sindiso
New Member
6 0 0

Hi,

 

There is no file called product.liquid. There is card-product.liquid, main-product.liquid, featured-product.liquid, cart-notification-product.liquid. Which one exactly do you need to see?

 

Thanks,

Sindiso.