The Issue

I have a WordPress site using the Divi Theme (from elegantthemes.com) that also has an online store using WooCommerce. A SSL cert is installed and needs to be configured so that the checkout page of WooCommerce is secured, but no other pages are secured. Plus, the checkout page needs to show up in browsers as being fully secure.

WooCommerce Security

The checkout page is easily secured at WooCommerce > Settings > Checkout where it’s just a matter if clicking the boxes for “Force secure checkout” and ”Force HTTP when leaving the checkout.”  The page will immediately be secured, but browsers won’t fully accept this because the images on the page are not coming from a secure site.  This is called “mixed content” – where some of the code is coming from a secure source and some isn’t.

Identifying Mixed Content

The easiest way to identify mixed content is to open the source code for the page as displayed in your browser.  Then search for “http:” – if this is found anywhere except in href tags in anchor elements (i.e. <a href=”http:// . . .”) it is considered insecure.   In my example there is a header image and a logo that are not secure, so the padlock icon won’t show up with the page.  You may have other content coming from an insecure source.  If you have concerns with other pages you can use the tool at https://www.whynopadlock.com/ to check for issues.  This, however, will not work with the checkout page because if you feed that URL to whynopadlock.com it will have nothing in the cart and forward directly to the cart page , thus confusing the tool.

Fixing Mixed Post Content

In the case of the header graphic it’s a matter of editing the post content in the database.  Log into phpMyAdmin on the server and open the wordpress_posts table in the WordPress database. Run a query that looks like this:

Depending upon the number of revisions, there will be several lines from the database.  Typically it will be the line with the lowest ID number that we want to edit.  Click ‘Edit’ and scan through the post-content element for any use of ‘http:’

There I found that the header graphic was at http://www.mywebsite.com/wp-content/uploads . . .   I simply edited the out the ‘http:’ so the URL begins with ‘//’ and saved the change.  This tells the browser to load the graphic securely, or not, depending upon whether the main page was loaded securely.  Be sure to check the code for other uses of ‘http:’ and change them the same way.

Another way to fix URL’s that’s especially handy if you want to make all your pages and posts secure is the Better Search Replace plugin:

• Load and activate the plugin
• Go to Tools > Better Search Replace
• change http: to https:
• Select the WordPress posts table
• Run the Search/Replace (you may want to make a dry run first to see if things seem to be working ok)

Fixing SSL of the Logo in the Menu

The Divi theme sets up the menu with a graphical logo.  This does not show up in the wordpress_posts table, but it is easily edited at: Divi > Theme Options > General where the URL for the logo is in an edit box.  Just remove the ‘http:’, save and update.  The logo will now come in as http for all pages except Checkout where it will come in as https.

Final Check

Reload the checkout page and somewhere you should see the padlock and https protocol indicating the page is properly protected.  If not,  view the source code in the browser, see if you missed and http:// content and try again.