• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Now Booking For Summer 2021

Let’s Chat

(0)

Overlock Design Co.

  • Custom Websites
  • Themes
  • Maintenance
  • Blog
  • About
  • Contact
  • Like on Facebook
  • Follow on Instagram
  • Follow on Pinterest
  • Follow on Twitter

Jetpack’s Site Accelerator May Be Breaking Your WooCommerce Styles

April 17, 2019 • WordPress

Heads up! This post contains Affiliate Links. If you make a purchase from this post, I may get a little kickback from the company. If you’d like to learn more about my use of Affiliate Links, you can do so here.

Recently, I noticed that all of my WooCommerce pages looked… weird. Mostly it was the buttons – none of my custom button styling was coming through correctly.

At best, the buttons were grey and ugly:

A screenshot showing the button. It is light grey with dark grey text that says "Add to cart". It is sad.
This is one sad button.

And at worst, they were massive and terrifying:

A screenshot of my Cart, where the "Proceed to Checkout" button is huge, dark purple, and scary.
Who needs a button this massive??

There were other layout issues (my checkout seemed a bit off) but the buttons were the worst of it.

A screenshot of my dev tools panel. It shows that woocommerce.css is overriding my theme styles.

At first, I figured that a recent WooCommerce update had changed something and I would need to re-do my custom styles. A pain, but manageable. So I opened up the dev tools on Chrome and checked out my styling. And my hypothesis was completely wrong.

You see, my custom styles were being applied. But the WooCommerce CSS was being loaded after my theme styles, overriding my custom styling. And, for some reason, they weren’t being rolled into Autoptimize correctly:

This was… puzzling. Generally, WordPress themes load after WordPress plugins. This allows all of the functionality to load first (important!) and also gives theme developers the ability to override plugin styles and scripts with their own if they wish.

Also, I use Autoptimize to compress & minify my site’s scripts and styles. So WooCommerce’s stylesheet (woocommerce.css) should have been rolled right up with the rest of the styles. It never should have been called on its own.

So why was it?

After some digging, I found that the woocommerce.css file was coming from a c0.wp.com URL. The file that wasn’t even supposed to be loading was coming from a different domain name.

Normally this would be super suspicious, but I wasn’t that worried, as it was coming from an official WordPress domain. The only question was why? Was there a Woo update that called styles from the WordPress CDN instead of your website?

Nope. Ya girl just had Jetpack’s Site Accelerator enabled.

Normally JetPack is awesome.

I love Jetpack. I know a lot of developers will poo-poo on it, but I think it’s a really great way for users to add a lot of functionality to WordPress. Especially if you’re a novice, JetPack makes it easy to set up a lot of website essentials, and manage them all in once place. Even as a Professionalâ„¢ WordPress user, I still use Jetpack on my sites.

And the Site Accelerator is usually great. I’ve used it to take a client site from 9 second load time down to 3 seconds. But how it works is very similar to a traditional CDN. Only instead of loading files from your site -> CDN for caching -> back to your site, Jetpack’s Site Accelerator will load static WordPress files directly from their own servers.

And since WooCommerce is an Automattic-owned plugin, WooCommerce files are loaded from their server as well.

Now, I don’t know if it was just my particular combination of Site Accelerator + Autoptimize that was the issue. What I do know is that I disabled Site Accelerator and my buttons looked normal again:

A screenshot showing my normal buttons. They're pill-shaped and tan, and much much smaller.
Ahh, sweet curvy buttons.

Psst… If you want to see for yourself, the shop is here.

The Verdict.

As I said, I love and regularly use Jetpack. But if you’re running into some issues with your WooCommerce store, you may want to turn Jetpack’s Site Accelerator off and see if it fixes the problem.

To do that, go to your Dashboard and to go Jetpack > Settings > Performance > Performance & Speed and make sure that “Speed up static file load times” is turned off:

The Performance & Speed section  in JetPack has a few options. We just need to make sure "Speed up static file load times" is set to "off".

And then check your shop to see if it looks normal!

If you’re concerned about the speed drop after turning it off, it might not hurt to look at a traditional CDN, like StackPath. Your host may offer a CDN as well – many managed WordPress platforms like WPengine, Kinsta, and Flywheel do.

If this helped solve your problem, let me know in the comments or share with a friend.

Kyrie Tompkins-Overlock • Leave a Comment • Jetpack, Troubleshooting, WooCommerce

You Might Also Like…

My Thoughts on Gutenberg

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hey! I’m Kyrie

A photo of Kyrie Tompkins-Overlock

I’m a freelance web developer from Central Maine. I help my clients cultivate growth in their business by getting the most out of their websites.

Learn More

WordPress Launch Master List

Let me help you launch your next WordPress website. Grab a copy of my WordPress Launch Master List - the same list I use with my projects! - and make launching a breeze.

Privacy Policy

Blog Categories

  • Announcements
  • Building A Website
  • Divi
  • Freelancing
  • GenesisWP
  • Resources
  • Social Media
  • Tutorials
  • Web Design
  • WordPress
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Let’s Connect

kyrie@overlockdesign.co
(207) 370-9271
  • Like on Facebook
  • Follow on Instagram
  • Follow on Pinterest
  • Follow on Twitter
  • Custom Websites
  • Pre-Made Themes
  • WP Maintenance
  • Hourly Work & Retainers
  • Portfolio
  • About
  • Blog
  • Resources
  • Terms of Service
  • Privacy Policy
  • Affiliate Links Disclaimer

Copyright © Overlock Design Company, LLC. | Made in Maine with love and WordPress.