Do you dynamically disable the theme's WooCommerce CSS files via JS?

Support
#1

Hey! I’m using a third-party plugin that woocommerce.com sells to create a one-page checkout experience for a particular product. All good there. However, I notice that while the webpage is indeed loading Pro’s WooCommerce CSS file…

<link rel="stylesheet" id="x-woocommerce-css" href="http://texga.deeproots.marketing/wp-content/themes/pro/framework/dist/css/site/woocommerce/integrity-light.css?ver=2.3.8" type="text/css" media="all">

…that none of the CSS from that file is impacting the page, including the fact that ::before and ::after pseudo elements aren’t being added to the WooCommerce form. After doing a quick Google search, I came upon a StackOverflow question asking if it’s okay to add an ID to a link tag, specifically so they could dynamically disable (via JavaScript) the CSS from loading, which got me wondering if you guys happen to be doing that very thing in order to make webpages more performant that aren’t typical WooCommerce pages.

Could you guys point me in the right direction of the code that’s doing that? Or perhaps provide a snippet I could add to my page’s JS in the Pro builder so that one page can load the CSS?

Thanks!

#2

Hi Philip,

Thanks for writing in! Could you please provide us with the link your referenced page with a screenshot of your issue, so that we can see your issue.

In the meantime, you can use Pro -> Theme Options -> CSS to add your global CSS and Pro -> Theme Options -> JS to add your custom JavaScript codes. When you’re adding custom JS, you don’t need to add <script> or </script> tags.

Thanks!

#3

Hey there. I noticed I formatted the code incorrectly in my first message. That’s been fixed. Sorry!

The page it’s affecting is http://texga.deeproots.marketing/our-beef/. While it does load the CSS file I showed in the first message, it doesn’t actually use that CSS.

Thanks for mentioning the global CSS and JS locations, but what I’m really after is simply getting the stylesheet at http://texga.deeproots.marketing/wp-content/themes/pro/framework/dist/css/site/woocommerce/integrity-light.css?ver=2.3.8 to actually be getting used on this page.

It’s looking like you guys are using JavaScript or some other means to dynamically disable the WooCommerce CSS file from being applied to pages that are not typically classified as WooCommerce pages, if that makes sense.

I’ve made a video going over it in detail here! Thanks for any thoughts. :slight_smile:

#4

Hi There,

Upon checking your website, I could see that the Our Beef is a default WordPress page(not WooCommerce pages).

So in the body tag of that page there is no woocommerce-checkout class:

To fix this issue, please manually add the woocommerce-checkout class to your page, then the CSS will apply to the forms:

Hope it helps :slight_smile:

1 Like
#5

Awesome catch, @thai! Thank you. The class is actually on the page, but the plugin I’m using adds it to the form’s CSS class, which messes with the way you guys have it targeted. Either way, your solution worked great. Thank you so much!

#6

You are most welcome. :slight_smile:

#7

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