Woocommerce shop not following site-wide CSS

Support
#1

Can anyone explain why my shop (https://goodandgolden.co/shop/) isn’t following the site-wide CSS? Especially the body and header fonts are not displaying properly.

#2

I fixed this with custom Global CSS, but I’d still like to know why it doesn’t simply go with the site-wide CSS

#3

Hello Josh,

Thanks for writing in! Before anything else, please remove this code in your custom css because it is incorrect:

<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/b402681cbea84ba5aee7f6f8e/651874e185f4985f45a8c7147.js");</script>
if (/iPad|iPhone|iPod/.test(navigator.userAgent)){window.document.addEventListener('touchmove',e =>{if(e.scale !== 1){e.preventDefault();}},{passive:false});}

There is a hierarchy of styles being applied to the page. The order is this:

  • Stack Styles
  • Child theme’s style.css
  • Wordpress Additional CSS or Appearance > Customize > Additional CSS
  • Theme Option Settings
  • Theme Option’s Custom CSS
  • Cornerstone/Pro Editor Custom CSS

Where did you insert your custom css? Maybe you can also post your custom css so that we can check it.

Hope this helps.

#4

Thanks, that hierarchy breakdown was very helpful.

Here’s the code I added:

/* Product listing page */
.woocommerce li.product .entry-header h3 {
font-family: 'Maxwell'; /*Change this to your preferred font*/
}
.archive.woocommerce .price {
font-family: 'Lovelo'; /*Change this to your preferred font*/
}
.woocommerce li.product .entry-header .button, button.single_add_to_cart_button {
font-family: 'Maxwell'; /*Change this to your preferred font*/
}

/* Product details page page */
.woocommerce .entry-title {
 font-family: 'Lovelo'; /*Change this to your preferred font*/
}
.woocommerce .woocommerce-product-details__short-description {
font-family: 'Maxwell'; /*Change this to your preferred font*/
}
.woocommerce li.product .entry-header .button, button.single_add_to_cart_button {
font-family: 'Maxwell'; /*Change this to your preferred font*/
}

.woocommerce-product-gallery__trigger {
 display: none !important;
}

.woocommerce {
font-family: 'Maxwell'; /*Change this to your preferred font*/
}

.woocommerce-page .h-landmark {
    font-family: 'Lovelo';
}

.entry-title {
 font-family: 'Lovelo'; /*Change this to your preferred font*/
}
#5

It turns out this actually does not fix the issue on iphones and safari. I’m banging my head against the wall here…

#6

Deleted all custom CSS and it fixed everything. I think the faulty code from Mailchimp was causing the issue from the beginning.

#7

We’re glad that your issue is now resolved, Josh.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.