Fixing WordPress & WooCommerce Mixed Content Errors

Fixing WordPress & WooCommerce Mixed Content Errors

Chrome has recently updated its browser to support SSL connections more strictly, showing many users the mixed content error in their URL bar instead of the Green Lock even when they have setup SSL. We have seen a swarm of questions throughout the internet with users trying to fix this but very few solid answers. We have the solution for you below and it is a lot easier than you think!

What is SSL? SSL (Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browsers remain private and integral.

There are many ways to setup SSL on your website, We recommend using letsencrypt.org or using https://serverpilot.io’s built in SSL system. Most cPanel hosts now provide SSL free with LetsEnrypt and each have directions on their websites instructing how to properly set it up. Just installing an SSL Certificate will not fix mixed content errors.

Many WordPress sites suffer from older content not properly being rewritten to https, so the solution is to use your .htaccess to force a rewrite on the server level. You can back this with additional protections like CloudFlares built in rewriting option to ensure compatibility.

To fix your Mixed Content Errors, you will need to make a change to your .htaccess as shown below. Your .htaccess will be located in your root folder public web directory, with your wp-content folder. Find it and remove any existing SSL redirection methods, replace them with one of the two options below depending on how your website’s URL structure is setup.

Fix for Non-WWW Websites

# Replace ‘www.example.com’ with your domain name
# (as it appears on your SSL certificate)

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://example.com/$1 [L,R=301]
RewriteCond %{SERVER_PORT} 443
RewriteCond %{HTTP_HOST} ^www[.].+$
RewriteRule ^(.*)$ https://example.com/$1 [L,R=301]

Fix for WWW Websites

# Replace ‘www.example.com’ with your domain name
# (as it appears on your SSL certificate)

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.example.com/$1 [L,R=301]
RewriteCond %{SERVER_PORT} 443
RewriteCond %{HTTP_HOST} ^www[.].+$
RewriteRule ^(.*)$ https://www.example.com/$1 [L,R=301]
OPTIONAL ADDITIONAL STEP: If you have CloudFlare, enable the option for Automatic HTTPS Rewrites. Keep in mind, this option alone will not fix the problem without the .htaccess change. You must add that first, we have found the CloudFlare option to not fix this problem in many cases and we just add this for redundancy.


I have worked in the Web Design & Development industry for over 15 years and created over 300 websites(I lost count a while ago). I have held positions at the executive level(CTO & CTO) with 3 separate tech companies. I have helped several Fortune 500 companies and hundreds of small-mid sized businesses in establishing a brand and creating beautiful interactive websites. I frequently find myself managing LAMP stacks, learning new programming languages and working on amazing new ideas! I love spending time with my amazing wife and son, and helping business owners expand! Currently working on a top secret project that will change the world.

Comments

  1. Hello Anthony seems Cloudflare made relative URIs but, not always fixed right. I will recommend force HTTPS in the images and static resources, its working good: https://wordpress.org/plugins/force-https-littlebizzy/

Leave a Reply