Integrating Cloudflare with WooCommerce

A step-by-step guide to integrating Cloudflare with WooCommerce

WooCommerce is the most popular eCommerce platform in the world. This is because it’s built on the WordPress ecosystem and the core functionality is free. In fact, WooCommerce holds about 50% of the market share for online stores. This doesn’t necessarily mean it’s the best eCommerce platform available but certainly too big to ignore.

WooCommerce is great for small and medium businesses that have limited funds to invest in digital infrastructure and require a platform that can grow and expand as their business does. 

Over the years WooCommerce has received bad publicity for being bloated, slow, lacking security features and a resource hog. In some regards all those things are true, but WooCommerce is still a great eCommerce platform that is highly customizable.

To get around some of the hurdles that come with WooCommerce we can utilise great online services such as Cloudflare. Cloudflare is a web-based company that provides a content delivery network, DDoS mitigation, Internet security services and distributed domain name server services. It helps to reduce load time and secure websites, protect against DDoS attacks, and improve overall online performance and reliability. Cloudflare[ works not only with online stores but all websites and therefore is a service that all website owners can benefit from.

For this article, we are going to be configuring our site using Cloudflare’s free plan.

If you would like to skip straight the tutorial, click here.

What is DNS?

DNS (Domain Name System) is a digital phone book for your domain name. It contains a number of records that specifies where your website, email and other services are located on various servers. Your DNS first processes any data that utilizes your domain name and will pass it on to the relevant server. 

In most cases, when you purchase a domain name or web hosting it will also include DNS. Unfortunately not all DNS providers offer great service and this can impact your website performance and produce a longer TTFB (time to first byte) result.

Generally, I never use DNS provided with web hosting or domain name and instead use a premium DNS provider such as Cloudflare.

How does Cloudflare help your WooCommerce store?

Cloudflare is a web service that not only provides great DNS but also speeds up your website by caching content and acting as a proxy and blocking malicious traffic. Millions of websites use it and is a popular choice due to its feature-rich free plan. In most cases, the free plan is suitable for personal and business websites.

What are Cloudflare's best features?

There is so much included in their plans that it would be impossible to cover it in one article. Below are some of the best features that I love using in Cloudflare.

DNS

Cloudflare DNS is fast! It is a service that I use on every website I make. You will see a decent decrease in TTFB when switching from standard web hosting DNS. The one feature I love about Cloudflare’s DNS is the ability to leave a note with each entry. This is very helpful when you have a lot of entries from third-party services and you need a reminder of what each one is responsible for.

WAF

Firewalls are an important part of the web. They keep the bad guys out. Each year more and more bot attacks cause havoc on websites. It is a complete pain in the ass for a web developer and system admins. Unfortunately, they are not going away, so making use of Cloudflare’s very powerful yet easy-to-configure firewall is a must for every site. All web hosting providers have their own firewalls but Cloudflare gives you full control of how you want it to function to suit your needs best.

Examples of what could be achieved with a firewall include;

  • Country blocking
  • Bot protection
  • Various IP-blocking methods
  • Various challenges to indicate legitimate human traffic
  • And many more powerful and exciting features

Caching and CDN

Cloudflare is a Content Delivery Network (CDN) and a web performance optimization service. It provides a global network of servers that cache and distribute content to users based on their geographic location. This improves the performance and availability of websites and web applications.

Cloudflare's caching works by storing a copy of frequently-accessed content on its servers, located in data centres worldwide. When a user requests a piece of content that is cached on a Cloudflare server, the server will deliver the cached copy rather than fetching it from the origin server. This reduces the load on the origin server and improves the speed at which the content is delivered to the user.

Under Attack Mode

Online stores are prone to attacks from malicious users and bots. Unfortunately, these attacks are only going to increase as online shopping becomes more popular and the number of online stores increases. Cloudflare offers a great feature called 'Under Attack Mode' that can instantly stop bot attacks such as DDOS and card testing.

Email Routing

Cloudflare offers an email routing service that is designed to improve the deliverability of email messages. The service is built on top of Cloudflare's global network and uses a combination of DNS routing and advanced filtering techniques to route email messages to the correct destination.

Ecommerce Considerations

An online store is a complex type of site that has a lot of moving parts. The choice you make in its operation caused directly impacts sales. For this reason, there are a few considerations that need to be made when working with Cloudflare.

  1. For Cloudflare to work with your site you must be hosting your DNS with them. You also need to make sure that the A records that point to your server's IP address have the ‘Proxied’ setting enabled.
  1. Cloudflare has some great caching capabilities but an online store is a very dynamic place. This means you must be very careful not to cache shopping carts, checkouts or areas protected by paywalls or logins. For this reason, it is better to bypass Cloudflare and utilize a caching solution at the website or hosting level.
  1. There are many different types of attacks that occur on websites and in particular online stores. You will want to configure Cloudflare’s security setting to add an extra layer of protection to your site. This will allow us to help protect against DDOS attacks, fake accounts and card testing.

Is Cloudflare free?

Cloudflare has a great free plan that would suit many WooCommerce websites. They truly provide one of the best free plans available on the Internet. In all my years working in the web industry I have only ever had a few clients that needed a paid Cloudflare plan. Free plans do limit some of the platform's most unique features and have caps in place when creating security rules for their firewall. 

How to configure Cloudflare to work with WooCommerce

Setting up Cloudflare with a WooCommerce site is pretty straightforward but there are a couple of prerequisites before you get started.

  1. You have access to your domain providers admin console
  2. You can access your DNS records
  3. You have admin access to the dashboard of your WordPress site

Setting up Cloudflare is impossible without access to these items.

For this tutorial, we will not be using the Cloudflare WordPress plugin as there have been reports that it can conflict with WooCommerce sites.

Read on below to get a full breakdown of how to set up Cloudflare on WordPress and WooCommerce. No credit card details are required to complete this tutorial.

Step 01 - Create a Cloudflare account

Create a Cloudflare account by entering the email you want to be associated with your account and a secure password. Be sure to use a strong password as Cloudflare will be hosting your DNS and you want it to be safe. Click on the Create Account button. 

You can use the following URL to open the signup page. https://dash.cloudflare.com/sign-up 

You will be required to verify your account so be sure to use a valid email address.

Cloudflare registration

Step 02 - Verify your account

You will receive an email from Cloudflare to verify your account and email address. Click on the link in the email and you will be directed to the Cloudflare login. Once you have confirmed your login details and your account is verified, you will be able to proceed to your dashboard.

Cloudflare dashboard

Step 03 - Add your website

Once at your Cloudflare dashboard, click on the 'Websites' tab on the main menu on the left of the site. When redirected, click on the 'Add Website' button.

Cloudflare website dashboard

Enter your website's domain name and click the 'Add Site' button. For this tutorial, I am going to use the domain wpadvice.au but you will enter your own domain name.

Adding a website in Cloudflare

Select the Cloudflare plan that you wish to use on your site. For this tutorial, we will just be using the free plan. Click on the Free Plan box and click the 'Continue' button.

Cloudflare plans

Cloudflare will go through the process of adding your website to your account. It will perform a scan to look for any existing DNS records. Because this is a brand-new website, the scan results will be empty but if you are doing this on an existing site Cloudflare will most likely find entries.

Cloudflare DNS scanner

Step 04 - Configuring your website's DNS

If this is a brand-new website, you will need to enter 2 DNS entries to tell Cloudflare where your website resides. If this is an existing website and the Cloudflare DNS scan imported results, You will likely need to edit 2 existing entries.

For new sites, we are going to add 2 A records that will point to your web hosting IP address.

Click on the 'Add record' button. You will then want to select 'A' from the type dropdown and enter '@' for the name field and your web server's IP address in the IPv4 field. To take advantage of Cloudflare's security features you want to ensure 'Proxy status' is set to 'Proxied'. This means all incoming traffic using this domain name will be processed by Cloudflare before reaching your website. Click the 'Save' button.

Adding a new DNS record in Cloudflare

Repeat this process again but this time the 'Name' field will have 'www' as the value. All other details will remain the same as in the previous entry.

Cloudflare DNS dashboard

For existing sites, confirm that your DNS entries have been imported correctly and there are the A records mentioned above pointing to your server's IP address.

Click on the 'Continue' button. 

Step 05 - Pointing your domain's nameservers to Cloudflare

Cloudflare will provide you with some new nameserver details that will need to be updated with your domain registrar. If you are unsure where your domain name has been registered, use the following Whois service to search: https://www.whois.com/whois/.

Cloudflare nameserver details

Logged into your domain provider and locate your domain's custom nameservers settings. Each domain provider will have a slightly different dashboard, however, it should look similar to the below screenshot. Edit your nameservers.

Updating nameservers with your domain provider

Enter the Cloudflare nameserver details and ensure they have been saved. 

Updating nameservers with your domain provider

Go back to your Cloudflare dashboard and click the 'Done, check nameservers' button. This triggers Cloudflare to perform a check to see when your new nameserver details have propagated.

Check nameservers with Cloudflare

Step 06 - Verify nameserver propagation

It certainly depends on the domain provider but nameserver propagation can take anywhere between 5 minutes to 48 hours. If you would like to see if your DNS setting has been updated you can use a tool like dnschecker.org.

This tool will tell what nameservers your domain is currently using and where in the world they have propagated.

Once Cloudflare determines that your new nameserver settings have come into effect, you will receive a notification on the website Overview page. This notification means the Cloudflare network is now protecting your WooCommerce store.

Cloudflare website overview dashboard

Step 07 - Creating page rules to bypass Cloudflare cache

Cloudflare has a great CDN service and caching solution which is great for a basic WordPress website. Unfortunately this caching can cause issues with WooCommerce carts because it can cache dynamic content, such as the contents of a user's shopping cart, that should not be cached.

When a user adds an item to their cart, that information is stored in a session on the server. However, Cloudflare may cache the page with the user's cart information, which means that subsequent requests for the same page will show the cached version of the page, which may not reflect the user's current cart contents.

This can lead to a number of issues, including incorrect prices being displayed, items appearing in the cart that has been removed, or items not appearing in the cart that has been added.

To avoid these issues, it is recommended to configure Cloudflare to exclude certain pages or URLs from caching, such as pages that contain dynamic content like a user's shopping cart. 

To bypass the caching system you will need to create a Cloudflare page rule. Under the free teir, you're able to create a total of three page rules. 

From the left-hand menu, expand the 'Rules' tab and 'Page Rules'.

Cloudflare page rules dashboard

Create a new page rule. Enter your domain name followed by a '/*'. The asterisk is a wildcard meaning every URL path on this domain will have the page rule applied.  

From the settings dropdown select 'Cache Level' and from the 'Select Cache Level' dropdown choose 'Bypass'.

Click the 'Save and Deploy Page Rule' button.

Creating a new page rule in Cloudflare

You will see all active rules from the Page Rules dashboard and can easily activate/deactivate them when needed. You can also change the priority order of how that rules are executed for greater control. Another great feature of the free Cloudflare plan is that you can purchase additional page rules if required without signing up for a higher-priced plan.

Clouflare page rule dashboard

Finishing up

Using Cloudflare with WooCommerce is an effective way to improve your website's speed and security while adhering to best practices for WordPress performance. By optimizing your Cloudflare settings, you can enhance the delivery of your site's content, resulting in faster load times and improved user experience. Additionally, Cloudflare's security features, such as DDoS protection and SSL encryption, can help safeguard your site from potential threats. Overall, leveraging Cloudflare's capabilities in conjunction with WooCommerce can provide a powerful solution for enhancing the performance and security of your e-commerce site.

Community Projects

Subscribe to our newsletter

The latest SevenDev news, articles sent straight to your inbox every month.
SevenDev - WordPress Growth Agency

Start generating more business today

Contact SevenDev to see what we can do for you!
SevenDev
Home
Powerful website dashboard
Services
Fully Managed Hosting
Website Design
Product Variations
eCommerce
Online Stores
WordPress Development
Full Site Development
Website Maintenance
WordPress Maintenance
Articles
WordPress Themes
Contact
Mobile Website Conversions
Close
facebooklinkedinangle-double-rightangle-downchevron-circle-leftyoutube-playinstagram