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:
And at worst, they were massive and terrifying:
There were other layout issues (my checkout seemed a bit off) but the buttons were the worst of it.
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:
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:
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.
Leave a Reply