How to Update WooCommerce the Right Way
Regardless if you’re using a lot, or only a select few plugins to help enhance your website’s functionality, you’re probably aware of the fact that updating your plugins is crucial for the security, stability, and overall well-being of every WordPress site. So naturally, if you’re using the powerful and flexible WooCommerce plugin to power your online store, performing a WooCommerce update is no exception. Due to the plugin’s immense popularity, WooCommerce is also a big target for hackers. As such, it has the potential to be one of the most vulnerable plugins – that is, if it’s not updated regularly.
That being said, simply hitting the “update now” button when attempting to update your WooCommerce store might not be the wisest idea. There are instances when an update meant to offer better functionality all-around can cause a huge mess across the board, including payment issues, the inability to add products to the cart, and in some cases, the entire store crashing and becoming unavailable altogether.
Luckily, there is a completely safe way to perform important WooCommerce updates on your site from beginning to end and to prevent any potential accidents from occurring. You can do this by using a combination of different testing, backup, and automation tools. So this time around, we will show you all the steps you need to take to safely and efficiently update your WooCommerce store and make sure it is as secure and well-maintained as it can get. Here goes:
eCommerce WordPress Themes
View Collection
To ensure that the WooCommerce update process is going smoothly and without any potential consequences, you should look into some of the tools that will help you test your WooCommerce-powered site both manually and automatically. And thankfully, there are many such tools that can help you go through it all as efficiently as possible. Check them out.
Staging Tools
When performing important updates on your WordPress site such as these, it’s highly recommended that you use a staging environment to check how your site will react to any new changes. This basically means that you should create a copy or a clone of your live site instead of doing it on the website itself so as to avoid running into any risks such as your live site crashing during the updates.
Now, many WordPress hosting providers offer the ability to create a staging site as part of their hosting plan. This includes some of the well-known WordPress hosting services such as WP Engine, SiteGround, or Bluehost. Your best bet is to contact your hosting provider directly to learn how you can use their staging features. Alternatively, you can try using one of the available staging plugins, like WP Staging or BlogVault, to name a few.
Finally, if you fall under the advanced WordPress user category, you can go ahead and attempt to create your staging environment manually using cPanel.
Visual Comparison Tools
Another set of tools that can be quite useful when it comes to safely performing a WooCommerce update are so-called visual comparison tools. These tools can essentially help you with comparing snapshots of different pages on your site before and after the update, so that you can identify any visible changes that have occurred, no matter how small they may be. This also includes any small changes related to the styling and formatting of your pages.
For the purposes of this article, we will use a tool called WPBoom to compare two before and after snapshots (more on this later).
Functionality Testing Tools
Aside from the visual bits, testing out your website’s functionality after the update is crucial to ensure everything is done smoothly and with no errors. This includes testing all the major product (and/or category) pages, cart and checkout pages, your product and order information, and the list goes on.
Luckily, using a testing tool like Ghost Inspector will allow you to automate and finish the testing process on your site in no time. This tool is great as it can be easily installed within your web browser. Every time you visit your site, you can start recording your tests using only a few clicks.
Backup Tools
Backing up your site is an important precautionary security measure you should carry out from time to time. Of course, this can also come in handy during the update of your WooCommerce plugin. There are some great WordPress backup plugins available you can use to perform occasional backups, like Jetpack and UpdraftPlus, among others.
Aside from ensuring you’ve got all the tools you need to safely update your WooCommerce store, there are a few other safety steps you can take before you start the updating process itself. Here are some of the things you can do for a good head start:
Disable Automatic WooCommerce Updates
Given everything we’ve mentioned thus far, it’s only safe to conclude that allowing automatic updates on your WooCommerce store wouldn’t be the best idea as these can only bring risks to your site. So, before doing anything else, make sure that the latest WooCommerce update won’t be installed automatically to your store and that the “Enable auto-update” button is not activated.
Make Sure Your WordPress Version Is Up to Date
Updating to the latest version of WordPress is just as, if not equally important as keeping all other plugins up to date on your site – together with WooCommerce. As with all other plugin and theme updates, WordPress updates serve to fortify your website’s security and functionality and ensure that everything is running smoothly and with as few issues as possible. So, before you delve into updating WooCommerce, check whether you are using the latest version of WordPress by going to your WordPress dashboard area and clicking on the Updates page. If there’s a new WordPress core update available, you will be able to see the Update Now button at the very top of the page. Once again, make sure to back up your site and create a staging environment first where you will test out the latest version of WordPress and check how your pages behave before you do this on the website itself.
Inspect the Details of the Update
Before you proceed with updating WooCommerce, we recommend that you check out the update details located in the so-called changelog. This will help you learn what the newest update consists of and also get familiar with the features you can expect to get with the newest release, i.e. whether it contains any security or performance fixes, etc. In addition, you can find out whether the latest update is compatible with other plugins and/or themes you may be using.
You will be able to find the changelog information by going to Plugins >> Install Plugins and then clicking on the View details button next to the available update. Once the new window opens, you should choose the Changelog tab. This tab should list all the details of the available update.
Alternatively, you can head to the official WooCommerce plugin page located in the official WordPress repository (WordPress.org) and choose the Development tab. Then, you should find the Changelog section. The info related to the latest plugin versions should be located there.
Check Out Support Forums
You can also visit the WooCommerce support forums to see whether people are talking about the newest update, i.e. if there are any issues they’re experiencing, as well as to get info on how to solve these issues. You can access these forums by going to the plugin’s official repository and hitting the Support tab.
Backing Up Your Site
First things first, you need to create a backup of your site to make sure all your files, folders, and important website data are safe. Just like we mentioned in the beginning, you can use one of the available backup plugins that will be able to perform backup for you in no time.
To learn how to perform a safe backup of your site using the Updraft Plus plugin, we suggest that you check out our article that covers the same subject in more detail. This plugin is great as it will allow you to automate the entire backup process quickly and effortlessly, and it will even help you restore all your files with ease afterward as well.
Creating a Staging Site
Your next step should be the one we’ve been suggesting all along – and that is to create a staging site that will create a copy of your live site. As we’ve already mentioned in the Staging Tools section, there are a few different ways in which you can create your staging environment. You can use the features that come with your dedicated hosting provider, you can use one of the available staging plugins, or you can do so manually. We suggest that you check out our article on creating a staging environment in WordPress to learn more about all these methods.
And one final note – during the creation of your staging environment, you might want to put your WooCommerce site in maintenance mode. This way, you will prevent your customers from placing any orders in the meantime. After all, the creation of a staging site is just one step of the entire process. Sooner or later, you will have to make changes and update your plugin on a live site as well, so by putting your site under maintenance, you can avoid having any losses or unhappy customers in case something goes wrong once you’re done with the update.
Running a Visual Testing Tool on a Staging Site
After backing up your site and creating a staging environment, it’s time to perform an update on your staging site. But before you do, you should use one of the tools we’ve also suggested in the beginning, like WP Boom and Ghost Inspector.
Like we’ve said in the beginning, you can use WPBoom to create a snapshot so you can compare your staging site visually, before and after the update. This will be particularly useful if your site has many different pages as in that case, doing the comparison on your own can be a long and arduous task.
The first thing you have to do is create a WPBoom account. You can sign up for a free account and upgrade to the premium version of WP Boom if you feel the need to do so later.
After you enter your credentials (email and password) and hit the “sign up” button, you will be prompted to connect your site to WP Boom by entering your site details. This includes your website URL, developer URL, display name, and tags. You can also choose whether you want to take your snapshot on a specific day and pick your start time.
Once you hit the create site button, WPBoom will create the first snapshot of your site. This can take a few minutes.
Then, the page will refresh and your snapshot overview will be displayed, along with the information about the number of pages you have.
Make sure to perform the same step before and after your site update so that you can easily compare your snapshots and see if there are any visual changes. Simply select the site you want to take a snapshot of and hit the button named Snapshot Selected Sites.
Testing the Functionality of Your Staging Site With an Automation Tool
It’s highly important to run your testing tool right before you perform an actual update on your staging site so that you can ensure that there aren’t any errors present before the update already. Now, when it comes to choosing the tool for checking the functionality of your staging site, you can do so using the automation tools like Ghost Inspector. This tool can be used as an extension in your browser and will allow you to go in-depth when it comes to testing out the performance and functionality of your most important pages and page elements. This includes your checkout page, any signup forms you may have, your website navigation, etc. And the best thing about is that you don’t need to have any coding knowledge to do this.
First things first, you should head to the Ghost Inspector homepage to start a free (14-day) trial.
Insert all the required information in the predefined fields, such as your name, company name, size, etc., and then hit the Create account button.
Afterward, a new screen will open, allowing you to choose the extension suitable for your browser (Chrome or Firefox).
Click on your browser of choice and then simply add the extension once a new screen loads.
After you’ve added the extension to your browser, make sure to log in with your credentials (in the upper right corner of your screen), then refresh your browser.
Once you visit your site, click on the browser extension and hit Record.
Then, you can browse through your site pages and do the testing of your staging site. As you do so, the Ghost Inspector tool will record the entire process for you. Click on the extension once again when you are done and hit the Finish button.
Give the name to your test and hit Save.
From here on, you can either view your test or make a new recording.
If you choose to view your test, you will be able to see all the details, including the steps you performed and the option to edit them, along with the information on whether your test has passed or not.
Finally, after you’ve completed all the steps above, you can proceed to update WooCommerce on your staging site.
The best thing about performing an update on your staging site first instead of on the live site is that if it breaks or if any errors pop up, you can identify and fix them before they break your live site.
We also suggest that you do a quick overview of your staging site to see if there are any error logs or any issues with your homepage or your admin area. Also, don’t forget to look at other pages of your store, like shop, cart, checkout, and contact.
You can use the Ghost Inspector tool again and simply repeat the entire recording of your staging site after the update. Go ahead and test out different pages on your site, just like you did before. You can even simulate an entire customer journey while you’re at it to see if there are any errors (adding the product/s to the cart, going to checkout, etc.).
This might also be a good time to start WPBoom again and get an “after update” snapshot of your staging site. Then, you can simply make snapshot comparisons and see if there are any changes.
Last but not least, make sure that your online store runs well across different devices, as well as on some of the most commonly used browsers.
Update and Test Your Live Site
If you’ve completed all the staging and testing steps without any major problems until now, and/or if you’ve managed to solve any potential errors that have occurred thus far, then it’s finally time for your live site to undergo the same process. In other words, you basically have to repeat most of the steps we suggested above, but you should do them on your live site instead.
So first, you need to perform a backup of your live site, just like you did with your staging site. Of course, you should make sure that your live site is no longer in maintenance mode first.
Then, once again, you should do your live site snapshot using WPBoom before you perform the update. In addition, you should run a Ghost Inspector tool and record your tests, like before.
Next, depending on the staging environment you used to clone your site, you might be able to simply sync your staging and live site changes. In other words, you will be able to migrate all the changes made on the staging site directly to the live site (including your update, of course), or rather, replace your live site with the copy you’ve created in the staging mode.
If you use a hosting provider to run your staging environment, this can usually be done with only a couple of clicks. For example, on Kinsta, there is an option called Push Staging to Live, while with SiteGround, you can use the Full Deploy option.
However, if for any reason the tool you’re using doesn’t provide you with any sync options, you might need to run a manual update of WooCommerce on your live site. You can do this by going to Home >> Updates and finding the “update now” link located next to your WooCommerce update.
Perform One Final Check
Finally, to ensure everything is running smoothly on your live site, you should do one final overview and check if anything is amiss. Essentially, this means repeating some of the steps we’ve already covered. And while all this rinse-repeat process you have to take might seem pointless or frustrating to you, it’s extremely important as it helps you ensure that you don’t get surprised by any errors that you might have a hard time recovering from.
So, after the live site update, we advise you to take a snapshot using WP Boom and do a comparison of your before and after snapshots. Also, you can use the automated Ghost Inspector tool again to test your site and its pages and make sure there are no issues. You shouldn’t forget to check the most important areas of your site, including your shop, home, cart, and checkout pages. Check whether everything works well both visually and function-wise one final time before you’re done. And in case you run into any critical or even minor error, you can always revert to the backed-up version of your site, troubleshoot any errors, and once you solve them, repeat the update process.
Wrapping Things Up
There is a myriad of reasons why properly updating your WooCommerce store is important, including prevention of any visual, functional, and performance issues after the update that might even result in your site crashing in some worst-case scenarios. By going out of your way to safely perform a WooCommerce update, you will not only ensure that your entire store is secure and that everything is running smoothly, but you will also help your visitors go through an entire customer journey quickly and effortlessly. We highly suggest that you perform all the previously-mentioned steps carefully and use the help of some, if not all the tools we suggested above for the best possible results.
And remember – don’t forget to create a backup version of your website first, build a staging environment where you will be able to perform all the visual and functional tests, and finally, safely update to the latest version of WooCommerce. Then, once you are done with performing all the tests and you’ve removed any potential errors, you can finally proceed to migrate your updates to the live site. Above all else, be meticulous and patient. You can rest assured that it will all be well worth it in the end.
