Re: Cart icon vanishes from the "Add to cart" button when selecting alternative product va

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 10 (10)

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
4365 1123 1380

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 Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Sindiso
New Member
6 0 0

Store link

There is no password.

zaczee
Globetrotter
855 46 42

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.

Veluxe
Tourist
3 0 1

Ok, so we both had the exact same problem. @Sindiso If you're still alive and haven't quit Shopify yet, then I've got the solution. 

First, put the cart icon into it's own snippet folder (if it's not there already).  Go into code editor, open snippets, and if 'icon-cart' doesn't exist, just create it and do this:

<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>

Below is your own code. So now, instead of doing this:

 

<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>

 You can do this:

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
<span>
{%- render 'icon-cart' -%}
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>

 Both have the exact same effect, but the second one is more efficient, as now you can use it in multiple instances, as I will later show you how to do.

From hereon we can expand: give both the text and the icon a class. *Yes, I removed <p>, because it was useless. If you wanna know why, go search it up.*

Change it from this:

<span>
{%- render 'icon-cart' -%}
Add to cart
</span>

To this:

<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Now we can adjust the properties through CSS. You may have done this already, but since your button looks like this...e37c108c-463f-4c03-832f-13d94c3b2715.pngYou probably should make some adjustments🤷‍♀️ Anyways, you add this into section-main-product.css:

.icon-class__container {
width: 40px;
height: 40px;
}

.product-form__submit--content {
justify-content: center;
align-items: center;
display: flex;
}

And now, it should look something like this:

Veluxe_1-1720739261513.png The problem still remains though, and I have a solution. I'll proceed to break it down.

First, add another button beforehand like this:

<span class="product-form__submit--content icon-class__container">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Adding the space in the middle for class="product-form__submit--content icon-class__container" combines the properties of both classes for the icon (whereas before it would just be one). If you have braincells and an eyeball, you would probably think that something's off. Because now, it looks like this:

Veluxe_2-1720739874147.png

And then, once you start selecting variants, now it looks like this:

Veluxe_3-1720739945368.png

You see, Shopify is very weird. It targets the first icon, but not the second. Even when it's invisible. I don't know why, but that's how it works.
So knowing this, you can now simply make the first one invisible. Like this: 

<span class="product-form__submit--content icon-class__container" style="visibility: hidden;">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

So now, it will permanently look wonky:

Veluxe_4-1720740562305.png

But remember, the cart-icon has a width of 40px. So all we need to do is to reverse that change, as it has pushed us 40px to the right. We do this by moving left.

<span class="product-form__submit--content icon-class__container" style="visibility: hidden;">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content" style="margin-left: -40px;">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Now, it should go back to permanantly looking like this. Hooray!

Veluxe_1-1720739261513.png