How to Activate Maintenance Mode in WooCommerce?

If you want to show a maintenance mode page on your website, an open-close store plugin is highly preferable to engage your customers. It will show promotional or other important messages while your website is closed. 

Regular maintenance of your website is a crucial thing to keep it functional and updated. It can be done for several reasons like improving user experience, SEO, Backup, or improving the overall website performance.

Therefore, you have to put your website in maintenance mode to avoid a faulty live website.

In this article, we will cover the 3 different ways to activate a maintenance mode on the WooCommerce website. The website visitors will see the website as under construction and it will show a message to live back with a ready website.

We will also cover how the maintenance mode works and what needs to be done to invite the customers back when the website is ready.

Keep reading and let’s discover it in detail.

3 Different Ways to Activate Maintenance Mode:

It doesn’t have to be complicated to activate maintenance mode in WooCommerce.

While some methods need you to be coding savvy, methods such as using the WooCommerce Maintenance mode plugin do in simple and easy steps.

You have to be tech-savvy to implement maintenance mode using a plugin.

Let’s explore how the methods will work for you:

Method# 01: Using a WooCommerce Maintenance mode Plugin:

The first and easiest method to activate a maintenance mode on your website is using a plugin. It will allow you to customize and publish the under-construction landing for your website. 

Hundreds of plugin options are available online to design and publish an under-construction page while developing your website. 

However, the one I found suitable for your needs is the open/close store hours and maintenance mode plugin. 

We have studied it thoroughly and found some incredible features that help you design and publish a maintenance mode page.

Anyhow, once you have installed and activated the plugin, it will allow you to access the settings where you can configure the page. 

How to Configure the Settings inside the Plugin:

You can head to the WooCommerce Dashboard and navigate to WooCommerce > Settings to click the Open/Close store tab. 

You will find the following options:

• General Settings
• Display Settings
• Daily Schedule
• Holidays Schedule
• Close Store

General Settings:

Display Notification Type

It allows you to select the type of notification you want to show. You can select from two options 

• Notification Bar
• Notification Popup

Current Timezone Settings

• Option to change your time zone
• Option to change the current time

General Message Options:

• Enable the option to display messages when the store is open
• Set a message to be displayed when the store is open
• Enable the option to display messages when the store is closed
• Add a general message for all days when the store is closed, such as "Store is closed. We will start taking orders soon."
• Enable the option to display and customize the message for the store's break period
• Set a message to be displayed when the store is on break

Advance Configuration

• Check this option to hide the "Add to Cart" button for all products when the store is closed
• Choose include and exclude options for products
• Select the products or categories you want to include or exclude from this schedule
• Specify which products or categories can still be ordered or not ordered when the store is closed

Countdown Timer Settings

In this part, you can make the following settings:

• Select if you want to display the countdown timer before store opening/closing
• Choose a time format either in hours or minutes
• Choose hours or minutes to start the timer before store opening/closing time
• Select a countdown timer layout such as default, round, or square
• Add a general message for when the store is opening i.e., the Store will open in
• Add a general message for when the store is opening i.e., Store will close in:

Remind Me Options

You can change the following from the Remind Me options section:

• Enable this option to remind customers when the store is open
• Enter the email address from which you want to send the reminder email
• Add a subject line for the reminder email
• Enter the content for the email body to send to your customers as a reminder

Display Settings:

Click on the Display Settings tab to configure the following:

• Notification Bar
• Popup

Holiday Popup Settings

• Notification Bar Settings
• Select a position to display the bar, such as at the top or bottom of the page
• Enable the option for a close button on the bar for customers
• Set the auto-close time for the bar in seconds
• Choose the background color for the bar
• Select the text color for the bar
• Adjust the transparency level from 1% to 100%
• Enable the option to display the message on specific pages

Notification Popup Settings

• Set the height of the popup in pixels
• Specify the auto-close time for the popup in seconds
• Choose the background color for the popup
• Select the text color for the popup
• Choose an icon for the popup
• Set the color for the icon in the popup

Holiday Popup Settings

Customize the popup for the holiday in this tab:

• Choose the background color for the popup
• Set the position for the notification display e.g., Top, Top Left, Top Right, Top Center
• Add a heading for the upcoming event e.g., "Upcoming Holidays"
• Select the color for the heading text
• Choose the color for the default schedule name
• Select the main text color
• Enter the text font size in pixels (e.g., 12px, 14px, 16px
• Select the text color for the footer message

Daily Schedule

You can click on the daily schedule & configure daily and weekly routines. It includes working hours and business working days. 

You can use this option to schedule business days such as Monday-Friday & working hours to 9:00 AM – 6:00 PM. 

Moreover, you can also add the break hour. 

Holidays Schedule

You can use the option to configure the Holidays for your business. It allows you to close the store for an entire day on public holidays like Christmas & Easter, etc. It allows you to manage the previously created holiday schedule where you can add or delete them.  

Add New Schedule

Click on the Add New Schedule button to add a holiday schedule & configure the following:

• Set the name of the schedule
• Check this option to close the store for the entire day
• If no opening and closing times are set, the chosen date will be fully closed
• Select the opening and closing times for your store on the selected date
• Enter the custom message to display for that date, such as "The store is closed today."

Close Store

Click the Close Store tab to close the store manually anytime if an emergency occurs. You can open it back as well. It will show the following options to change the settings in the Close Store tab:

• Enable the option to open or close the store with a single click
• Add a custom message for viewers when the store is closed (e.g., "Our store is closed now")
• Enable the display of a full-screen banner when the store is closed, in maintenance mode, or for coming soon products/pages
• Enter the title for the full-screen banner
• Set the banner title size in pixels
• Select the font style for the banner title
• Enter the text to display on the banner image
• Set the size of the banner text in pixels
• Choose the font style for the banner text
• Upload an image or select one from the gallery as the banner's background image
• Enable the image overlay effect for the background
• Select the overlay color for the background image
• Adjust the overall banner opacity (choose a value from 1% to 100%)
• Select the dates for which your store will be closed
• Set the opening time for your store on the selected dates
• Enable user reminders for when the store opens
• Choose the text color for the email button
• Select the background color for the email button
• Enter the URL for your Facebook page
• Enter the URL for your Instagram page
• Enter the URL for your Twitter page
• Select the color for the banner heading
• Choose the text color
• Select the color for the icons
• Choose the location for the banner text (right, center, or left)
• Set the logo size as a percentage
• Select the pages on which you want to display the banner

You can check out the official plugin documentation to further explore

Method#2: Using a Custom Function():

You can head towards the WordPress dashboard to go to Appearance > Theme Editor. You will find a list of theme files on the right side. Furthermore, you can select the Theme Functions to open the function.php file where you can edit the code.

Secondly, add the following code at the end of the file:

// Activate WooCommerce Maintenance Mode

function wp_maintenance_mode() {

if (!current_user_can(‘edit_themes’) || !is_user_logged_in()) {

wp_die(‘<h1>Under Maintenance</h1><br />Website under planned maintenance. Please check back later.’);

}

}

add_action(‘get_header’, ‘wp_maintenance_mode’);
It will activate the default maintenance mode screen on WordPress. However, you can change the code to alter the HTML message on the screen.

Secondly, you can find the wp_die function followed by the HTML code in the parentheses in the fourth line of the code. Now you can edit the message to show on the maintenance mode landing page. 

For example, “The website is under scheduled maintenance. Please check back at 4 pm EST.” 

Thirdly, click Update File. 

Finally, once it is finished, you can remove the code from the functions.php file to make the website live again.

Method#3: Using the .htaccess File from Cpanel:

Follow the instructions to add a maintenance mode page to your website:

• Find the .htaccess file in your website’s directory by logging in to your CPanel and going to the File Manager. Then, open the public_html directory
• Make a maintenance.html file that contains your Maintenance Mode message. Or, upload the file if you have one already. It will act as your maintenance screen.
• Find the .htaccess file in the public_html directory. You can open the file by right-clicking on Edit.

You can copy the content of the .htaccess file and paste it into the file named .htaccess_default to create a backup. Then add the following snippet to the original .htaccess file content:

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_URI} !^/maintenance\.html$

RewriteRule ^(.*)$ https://example.com/maintenance.html [R=307,L]

It will redirect the visitors to the Maintenance HTML page and you can continue building your website.

Final Words

You can explore several other ways to activate maintenance mode on your website & replace your website with a customized landing page.

We have discussed three common methods that are widely used and easy to follow.

You can follow the methods 2 & 3 only if you are tech-savvy. Otherwise, you can use the plugin method & avoid indulging in the complex technicalities.

You can use the WooCommerce Maintenance Mode plugin to activate the maintenance mode on your website without any hassle.

Keep in mind that the maintenance mode page isn’t only for development websites. You can use it for marketing purposes by designing and publishing an appealing “Coming Soon” Page.

FAQs

How do I put WooCommerce in maintenance mode?

With Open/Close Store, putting your WooCommerce store under maintenance becomes a user-friendly process. follow the 3 simple steps to activate maintenance mode in your WooCommerce store:

• Install and activate the Open-close store by FME Addons
• Navigate to Open-close store> Landing pages in your WordPress dashboard
• Toggle the switch under Coming Soon Mode or Maintenance Mode to Active

What is WooCommerce maintenance mode?

WooCommerce Maintenance mode is a temporary landing page shown to visitors when the website is under development or any short maintenance. It keeps anything appearing broken or out of sync.

Do Websites need maintenance mode?

It's generally a good idea to show maintenance mode on your website while closing your website for a temporary period. It keeps the customers engaged.