Add to Cart colour differs from desktop to mobile

Hey @neil_seddon – I’ve had a look at your site and I can see two different colours for the add-to-cart button:

• Red on the shop archive: https://www.kidscollections.com.au/
• Orange on the individual product page: https://www.kidscollections.com.au/product/harry-potter-emblem-rug/

I don’t see any difference between mobile and desktop.

So what kind of magic is this? (Sorry, I couldn’t resist since you’re selling Harry Potter things.)

The shop page is using the .button class, while the product page is using the .button.alt class.

Both of these are set under Customize > Buttons:

Link to image: https://cld.wthms.co/EzOrzP

Hi,

Thanks for the info.

When I check internet explorer it shows the add to cart as red.
Microsoft edge shows the add to cart as blue
Firefox shows the add to cart as blue.
The mobile shows the add to cart as red.

Orange is on the individual product pages on mobile, explorer, firefox & Microsoft edge

I would like to make the blue colour appear on all browsers and mobile instead of red as I have the sale colour set to red.

Are you able to advise how I can change the add to cart colour blue on all browsers and mobiles?

Regards

Neil

Hey @neil_seddon – I’ve checked with all of the browsers that you mention, but I can’t reproduce it. Is it possible that you have some addons or settings on those browsers that might be overriding your default settings?

Firefox:

Link to image: https://cld.wthms.co/TJqPVU

Microsoft Edge:

Link to image: https://cld.wthms.co/Sp679T

Hi,

It’s a bit confusing. I do have some addons on firefox and chrome.

Are you able to advise where I go to change the settings from red to blue? I can’t seem to find anywhere in the customise showing the red buttons?

Well, ideally, you’d inspect the code on Firefox or Edge to see where this styling is coming from. Since I can’t reproduce this, I can’t test it for you either. If you could show me a screenshot of the class that is tagged for the blue colour, I’m happy to help you further.

That said, which colour have you selected under Customize > Buttons? If it’s blue, then it indicates that there’s likely some browser caching active (a version of your site was saved in our browser, and in that case a hard browser refresh might bring the resolution).

Here’s a tutorial on how to do that: https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/#.W-6wA5MzZTY

Hi,

Well. Some progress.

All of the browsers show as red for the add to cart buttons including the mobile. I was originally logged in under firefox as admin which is why it was showing up as blue. The buttons show as blue when logged in as admin in all browsers including chrome, firefox, exprorer and edge.

Not sure why this would show as blue when logged in as admin as it’s showing up as red without being logged in.

The question now is where is the code/area where I can check why it’s showing up as red when I would like the add to cart buttons to be blue.

Also I’m happy to do a screen shot if there an e-mail where I can send the code.

You can add a screenshot here. I recommend https://snag.gy for easily sharing screenshots – please follow the instructions on the page, then paste the URL in this chat. It works with Chrome, Firefox and IE.

However, that it happens for admins only means that something on your site is blocking this. It’s not connected to WooCommerce/SF core.

Normally, the classes should give an indication why it’s different on your system. This is how I’m seeing it on my site:

Link to image: https://cld.wthms.co/mnVKmw

So here’s the blue. (Logged in as admin).

https://snag.gy/Td5Dvx.jpg

Here’s the Red. (Not logged in as admin).

https://snag.gy/ORK3vj.jpg

Any suggestion on why this is changing colour different being logged in or out and how I can resole the issue?

Hi @neil
Looking at the screenshots, you will need to recomplile the Cache for the page

When logged in Admin you will see what it should look like, until the Cache is regenerated.

Logged out you will see the cached version ( not browser cache ) the website cache module you have installed.

Thanks for the replies. How do I recompile the cache?

Thanks

Neil

Logged out you will see the cached version ( not browser cache ) the website cache module you have installed.

You should either look at the plugin that you’re using for caching or chat to your hosting company about it.

All resolved now. It was the WP-Super Cache plugin. Works as normal now. You can close this now. Thanks