CSS for the View Cart button

Hi Chris,

Thanks for reaching out!

I have checked the CSS in the browser console, and it indeeds applies the changes. Here is the outcome on my end:

It’s possible that this could be conflicting with other custom CSS on your site. To check, you can temporarily remove any other custom CSS and see if this makes any difference?

Additionally, you can navigate to WooCommerce → Status → Tools, and do the following:

• WooCommerce transients – Clear
• Expired transients – Clear
• Clear template cache – Clear

Next, please clear your browser cache and then check if the CSS applied as expected.

Cheers!

Hi Roxy,

Thank you for helping. I’ve cleared all 3 of those settings in the Tools menu, and cleared the browser cache as well, but the css still isn’t applying.

In order to locate the conflicting CSS, should I search for one of the individual selectors, such as “.added-to-cart” or “.button.checkout”? I assume the issue is still fixable if I’m able to identity the css that overrides it.

Thanks for your time,

Chris

Hi @chrisalton11 ,

Thanks for providing an update!

Yes, searching for the individual selectors could help you locate any conflicting CSS that might be overriding your changes.

If this doesn’t help, what I’d suggest is creating a staging site using a plugin like WP Staging, and then adding the above mentioned CSS.

Next, you can remove any other custom CSS you have applied to your site, one by one, checking your site in private/incognito mode to see if the CSS is now being applied to your site. This way you do not need to clear your browser cache each time you remove CSS and update, and any styling changes you make will not affect your live site.

You can do this until you find any possible conflicting CSS.

Let us know how this goes!

Hi Roxy,

We are working to create a staging site but we need to shrink our media library and expand our hosting plan. We’re working on both.

In the meantime, we’ve noticed that there are multiple issues with our Additional CSS not working properly. For instance, we have the following code activated:

.site-footer {
display: none !important;
}
.site-info {
display: none !important;
}

Both are still working on mobile but not above a certain pixel width. Do you know what could be causing that? Our hosting provider recently deactivated and reactivated all of our plugins and the Additional CSS has started giving us a lot of trouble. Let me know if you have any suggestions in the meantime. We’re running the basic Storefront theme.

Thanks again,

Chris