Product size chart in WooCommerce

High return rates are one of the biggest challenges facing clothes sellers online. You can tackle this simply and effectively with size charts. But how do you add a WooCommerce size chart? Here's everything you need to know.

If you run an online clothing store, size guides are an absolute must. Online shoppers don't get the benefit of sizing a product up in person before buying. They expect a lot more information before you can get them to the checkout.

A product size chart gives them this information in a concise, easily-understandable way. With the power of plugins, a WooCommerce size chart can be as simple for you to make as it is for your customers to understand.

Understanding the importance of product size charts in WooCommerce

A lot of measurement systems have been standardized across the world, but clothing sizes? Not so much. They differ from country to country, even store to store. You could wear a size L shirt from one brand that fits the same as a size S from another.

This poses a problem for e-commerce stores because it's so hard for a customer to verify the fit with 100% accuracy. More than any other product, people love to try clothes in person before buying. We've all ordered something from the internet that just doesn't look as good in the mirror.

The only way around this is to provide as much detail as possible to the user to help them make a decision. But how can you convey a dense clump of information about measurements without overloading the customer or compromising the aesthetic of your product page?

The answer is a product size chart. A product size chart is a visual aid in a table format that contains all the necessary information about sizing for a particular product. They are neat, precise, and easy to read. If you sell clothes, they can be just as effective as a coupon or good SEO.

Display size information

How size charts influence purchasing decisions

There is a lot of evidence to suggest that product size charts influence purchasing decisions and improve the shopping experience. Even the smallest adjustments to your page can have a big impact and with clothing and e-commerce, the devil really is in the detail.

For starters, the majority of shoppers research their purchases online before buying. With clothing, this means sizing. If the information isn't readily available, the customer will click off your web page and look elsewhere.

People are far more likely to return clothes that they bought online. In fact, the return rate is a staggering 24.4% according to one study. When asked why they returned an item of clothing, up to 80% of respondents said it was a sizing issue. In some cases, customers have such a lack of faith in the accuracy of sizing that they will buy multiple sizes to return the duplicates that don't fit. It's up to online stores to be clearer and more precise about their measurements.

The sizing issue is so persistent that it drives many customers to shop in person rather than online. Sizing is frequently the top reason people opt for in-person shopping when asked. This makes clothing exceptional because, with most other products, people prefer the convenience of home delivery and the greater choice that is provided by shopping online.

In short, online apparel retailers are faced with:

  • A sophisticated customer base that will research products before buying
  • A very high return rate due to sizing issues
  • Intense competition from other stores, online and in person, that can provide more detailed sizing information

The takeaway is that you need to provide clear, detailed information about sizing. The best way to do this is with a size chart, tailored to your range of products. But how do you implement this? What is the best format for a WooCommerce product size chart?

As with many WordPress questions, the first step is choosing the right plugin.

Choosing the right WooCommerce size chart plugin

Remember, this isn't just about the size chart itself. Whichever product size charts plugin you choose should make it easy to add, update and roll out your content at scale and with ease. The last thing you want is to add size charts manually to each product page.

That's why we recommend WooCommerce Product Tabs. This plugin allows you to create unlimited custom tabs with extra information on your product pages. It has several features that make it perfect for implementing size charts.

From your site's dashboard, you'll have a dedicated space where you can access and manage all of your tabs and size charts. You can either have a different size chart for each product, or share size charts across multiple products (e.g. based on category or tag). For example, a clothing store will usually have one size chart for all products in the 'Women's Tops' category, another size chart for products in the 'Women's Shoes' category, and so on.

The user interface is simple and intuitive. Adding and removing information is straightforward, as is creating new tabs and applying them to individual or groups of pages. It's compatible with other add-ons. You can't beat the functionality of this tab manager plugin.

When you add a size chart within a tab, it keeps your page neat. Users don't like pages that are full of popups and visual clutter. A size chart in the form of a tab ensures that all of the information is easily accessible via widget without being distracting.

WooCommerce size chart plugin

Most product pages have other information on them too, for example, customer reviews, links to related products, and a description. Using Woo Product Tabs ensures that you can seamlessly integrate everything on the page in an efficient and visually pleasing way.

Learn more about the plugin by watching this video:

Steps to create and customize your product size chart

After you've installed and activated WooCommerce Product Tabs, go to Products → Product Tabs. Click 'Add New' to get started. From this screen, you can create a size chart tab. I've named mine 'Size Chart' to keep it simple.

Creating an HTML table

For the size chart itself, i.e., the table with all of the numbers and information, we'll be using HTML. No knowledge of coding is required so don't be intimidated! Even though it sounds complicated, this is actually a simple process that comes with some serious advantages down the line:

  • It will be much easier to edit and update your size chart/table later. Doing it this way allows you to change the text in the table without starting from scratch.
  • When you add your table to the site in HTML, it will automatically format itself to match the theme of your web page. No need to hunt down fresh templates for your tables!
  • This is the fastest and most efficient way to create truly custom size charts and table styles.

Let's say you're a store owner who sells designer dresses in five sizes, from small to 2XL. Your customers will need to know which sizes correspond to which measurements, namely the bust, waist, hips, and length. That means you'll need a table with six columns and five rows.

First, find a free, online table generator tool. I recommend using Tables Generator which is what I've shown below. Navigate to the HTML tab on the site. Click on File, then New Table. You'll be prompted to give the dimensions of your table, in our case it's 6x5. A size chart table can be as big as you need, but the more concise the better.

Next, double-click on each square in the grid to add text. I filled out the text in my table as shown below.

Create size chart

Make sure you check the box that says 'Don't generate CSS', then click Generate. There is a green button that lets you copy the resulting HTML to your clipboard. Navigate back to the size chart page on your site. Paste your code into the Text tab (shown below).

Add size chart plugin to WooCommerce

Now, when you go back to the Visual tab, you should see a preview of your new size table. To add your new size chart tab to a single product, simply scroll down to Product (see below) and check the box of whichever item you want the tab to appear next to.

Create HTMl table

Now view the WooCommerce size chart table on the product page. You'll see that all the details like the text color and font automatically match your WordPress theme, so everything integrates nicely together.

Adding multiple size charts to different products

What do you do if you need more than one WooCommerce size chart? Suppose you sell men's T-shirts as well as women's dresses. You'll need two separate size guides. Repeat the steps to make a new, separate size chart in a product tab.

As you can see below, we now have a second, simpler size chart for T-shirts. To apply this chart to your store's T-shirt, but not to the designer dress, simply scroll down to products, check the T-shirt box, and leave the designer dress box unchecked.

woocommerce size chart

You can make as many different size charts as necessary for your store. There are endless use cases. You can have different size charts for different types of clothes, different genders, different countries, the list goes on.

Why stop there? One of the great advantages of WooCommerce Product Tabs is its range of utility. Earlier, we pointed out how online clothing customers are hungry for as much detail as possible. Adding a chart image and other content is a great way to provide this.

This allows you to provide all the necessary information to those customers that need it without overcrowding your product page.

Add size tab to WooCommerce product page

Assigning and managing your product size charts

As your store grows and you add more clothes and more size guides, a default size chart or two might not be enough. The task of assigning and managing your product tabs becomes more complex. Thankfully, WooCommerce Product Tabs gives you all the necessary tools to handle everything at scale and the ability to make unlimited size charts.

Instead of assigning your size chart to one particular product, you can apply it to a whole category or specific products. In my example store, there are five different categories, but you can have as many as you need.

If I want to add my Dress Size Guide to all of the dresses in my store, I simply open the tab in question, navigate to Product categories, and check the 'dresses' box.

woocommerce size chart

This allows you to quickly and easily add a product size guide to many different products at once. If you need to update or edit any of your tabs at any point, all you have to do is edit the tab and choose which products, categories or tags to display size chart on.

It's very important that you keep your size charts accurate and up to date. If the information is incorrect, you will frustrate your customers, lose repeat business and wind up worse than when you started.

Enhance your WooCommerce store with effective size charts

Accurate, effective size charts are absolutely crucial for the success of your online clothing store. The return rate for online apparel is extremely high and you must do everything you can to mitigate this. Size charts will:

  • Boost your conversions by giving customers the information they need
  • Reduce returns because of sizing issues
  • Increase user enjoyment of your site

The WooCommerce Product Tabs plugin has everything you need to create, implement and manage these size charts. This is the best way to make your clothing store as smooth, practical, and visually appealing as possible. It's easy to set up, and yet comes with detailed documentation and an expert support team.

You can add new product tabs at the touch of a button. The HTML product size tables automatically format your charts to match the theme of your website. The customization options are endless, so you can tailor your size charts to meet the specific needs of your store.

Now that you have a grasp of the basics, why not experiment with the plugin's settings? You can add almost anything to a WooCommerce size chart, including but not limited to text, images, shortcodes, downloads, and videos. Give your customers a unique and enjoyable shopping experience!

Shipping Calculator to your WooCommerce Product Pages

Did you know that customers expect to see shipping costs upfront before deciding to buy a product online? In this tutorial, I'll show you how to add a WooCommerce shipping calculator on the product page. And the best part? It takes less than five minutes.

Many WooCommerce store owners usually have some variation of this question:

  • How do I show shipping rates on the product page in WooCommerce?
  • How do I show shipping methods on the product page in WooCommerce?
  • And how do I add a shipping calculator in WooCommerce?

That's precisely what you'll learn in this tutorial.

As a WooCommerce store owner, you probably already know that providing clear and upfront shipping information directly impacts your store's conversion rates. Adding a shipping calculator to the product page lets customers see shipping costs, delivery time frames, and methods upfront before deciding whether to buy a product. However, unfortunately WooCommerce makes it really hard to display clear shipping costs upfront.

Fortunately, it's really easy to add this to your store. And in this tutorial, I'll show you how to set it up using the best WooCommerce shipping plugin.

WooCommerce Shipping Calculator is a lightweight and powerful plugin that adds a shipping calculator directly to the product pages on your store. It lets customers check the shipping costs and available methods to their address when they need the information most — before deciding whether to add the product to the cart:

WooCommerce shipping calculator plugin

Why is it important to show shipping costs on product pages?

Shipping options and fees greatly influence customers' decisions to buy — or not buy — from your store. Studies show that customers expect to see all the relevant details about your product, including shipping information, before making a purchase decision. Without accurate shipping details, many customers won't even bother to click on the "add to cart" button and proceed to the checkout page.

It's even more crucial when you're shipping products internationally. Typically, fulfilling international orders takes longer and involves additional factors such as Customs duties and import taxes. Customers shopping from other countries prefer to know the potential shipping methods, fees, and delivery timeframes upfront. Showing accurate shipping information enhances transparency and builds trust with international customers.

What's wrong with WooCommerce's built-in shipping calculator?

WooCommerce is a powerful eCommerce platform used to create many online stores. It includes lots of shipping-related settings and options, such as shipping zones, shipping methods like local pickup, shipping classes, and so on.

However, regardless of how you configure your shipping settings, there are two fundamental limitations to using WooCommerce's built-in shipping cost calculator:

  • Only available on cart and/or checkout pages: By default, WooCommerce can only show the shipping charges and methods on the cart page and checkout page. Showing the built-in calculator anywhere else is impossible.
  • Impossible to calculate shipping costs before adding a product to the cart: If you're only using WooCommerce's built-in shipping calculator, customers will be forced to add products to their cart to find out the available shipping methods, estimated delivery dates and shipping charges. This is inconvenient and is a leading cause of cart abandonment in many eCommerce stores.

Overall, these limitations can lead to frustrating experiences for your customers. Not to mention, they can also hurt your store's sales and revenue. They lead to abandoned carts because customers add products to the cart just to check the shipping cost, and then leave your site when they're not happy.

How does a WooCommerce product page shipping Calculator fix these limitations?

The Shipping Calculator WooCommerce plugin fixes the limitations of WooCommerce's built-in calculator. It's a nifty plugin that does precisely what its name suggests: it adds a shipping calculator to the product page of any WooCommerce store.

As a result, shoppers no longer have to add specific products to their cart and navigate all the way to the cart or checkout page just to see the delivery cost.

There's a lot going on under the hood of the WooCommerce shipping calculator on product page plugin. Here's a quick overview of how it works:

  1. You install the plugin and configure it on your site. This takes around two minutes.
  2. On your website's back end, the plugin retrieves the available shipping methods, shipping carriers and rates that you have set up within your WooCommerce store's shipping settings.
  3. On the front end of your site, the plugin adds a shipping calculator interface to your store's product pages. The calculator includes fields for shoppers to enter their address details or shipping location.
  4. After the customer enters their details into the shipping calculator, it uses the integrated shipping methods, estimated delivery dates and rates to calculate the shipping fees for the specific product and location. It considers factors like zones, shipping classes, shipping carriers, package weight, and any additional shipping rules or restrictions you've configured.
  5. Finally, the WooCommerce shipping calculator on product page plugin displays a list of all the available shipping methods such as flat rate shipping, free shipping and local pickup along with their respective shipping charges and delivery dates.

Instant product page shipping calculations

The WooCommerce product page shipping calculator plugin uses the same shipping cost calculator which is built into WooCommerce itself. The magic is that it displays it on the product page, exactly where customers want to find it.

If the customer enters or changes the shipping location, the plugin will automatically recalculate the shipping fees and display updated options and costs.

If there are no shipping methods for the customer's location or the address the customer enters, the plugin will display a message stating that no delivery methods are available.

The benefits of displaying shipping costs on your WooCommerce product pages

Let's go over the key reasons why adding a WooCommerce shipping calculator on product page is essential for stores of all sizes.

Key benefits

  • Enhanced customer satisfaction and trust Customers appreciate knowing the total cost of their order upfront. Transparently displaying shipping costs on product pages fosters a positive shopping experience and encourages customers to proceed with their purchases confidently.
  •  Reduced cart abandonment rates Studies by Baymard showed that unexpected or high shipping costs cause cart abandonment. Displaying shipping methods and fees on the product page prevents customers from adding products to their carts just to find out about the shipping options or delivery time frame.
  • Improved conversion rates The same Baymard study showed that customers actively look for shipping costs on product pages before adding items to their carts. Many customers that didn't find the shipping information decided not to proceed with their purchases.
  • Greater flexibility for complex shipping scenarios Some stores have complex shipping scenarios, such as offering different shipping methods based on product dimensions, weight, or location. Displaying shipping costs on the product page lets customers easily select the most appropriate shipping option for them.
  • Better user experience for international customers International shipping usually involves additional complexities, longer delivery timeframes, and costs. Being upfront about shipping options and fees helps international customers easily estimate the total price of their purchase, including customs fees or import taxes.
  • Transparency in shipping costs for various product types Shipping methods and fees may vary depending on the product type. Some products may have higher shipping costs because of their size, fragility, or weight. Displaying shipping costs on the product page ensures that customers are fully aware of shipping-related costs for all product types.
  • Increased customer confidence in the checkout process Customers don't like surprises. Clarity about shipping costs early in the buying process gives customers confidence in the checkout process and helps them feel more comfortable completing their purchase.

Tutorial: How to add a shipping calculator on the product page of any WooCommerce website

WooCommerce Shipping Calculator is really easy to use. Plus, it only takes two minutes to configure it on your WordPress site. In this section of the tutorial, I'll show you the steps to set it up:

  1. Buy the plugin and download its files onto your computer.
  2. Head into Plugins → Add New → Upload Plugin within your WordPress dashboard.
  3. Select the "Choose File" button and choose the plugin zip files that you just downloaded.
  4. Click on Install → Activate.
  5. Now, it's time to configure the plugin settings within the setup wizard. Type in your license key in the setup wizard.
  6. Next, select the location on the product page where you want the shipping calculator displayed.
  7. Save your settings.

You've successfully set up the WooCommerce shipping calculator on product page plugin on your website! Now, head over to any product page on your store to check it out.

Choose where your shipping calculator appears on your product page

As covered earlier, you can choose to add the shipping calculator to a choice of locations on the product page. For example, in the below screenshot, you'll notice that the shipping options are shown at the top of the 'add to cart' button. Either make it visible at all times, or let customers click a 'Calculate shipping' link to view the calculator.

WooCommerce product page shipping calculator

Alternatively, you can display it in a dedicated 'Shipping' tab near the product description, reviews and additional information tabs.

In addition to the built-in locations, you can use a shortcode to add the shipping calculator to other locations on the product page. This gives you complete flexibility, for example if you have a custom product page layout created using page builder plugins like Elementor.

Bonus: Supercharge the product page shipping calculator

If you want to further optimize your store's shopping experience, keep reading. I'll show you two add-on plugins that work well with WooCommerce Shipping Calculator. Combining these plugins can significantly improve your customers' shopping experience.

Add the shipping calculator to a product lightbox

The first plugin is WooCommerce Quick View Pro, which adds a lightbox to your store's shop and category pages to let customers easily preview items and add them to the cart. This is ideal for various types of sites, such as restaurants, photography, fashion, wholesale, events, and much more.

The main benefit of combining Quick View Pro and WooCommerce Shipping Calculator is that they eliminate the need for customers to visit separate product pages, which speeds up the buying process in your store.

Here's an example of how the plugins look on a demo WooCommerce website:

WooCommerce postage calculator in lightbox

Create a custom shipping tab

As we saw above, the WooCommerce shipping calculator on product page plugin already has an option to display the shipping calculator in its own tab on the product page. However, this only displays the shipping calculator in the tab. It's not possible to add other information to this tab because it's generated automatically. For example, maybe you'd want to manually list all the shipping costs or provide a weight-based shipping table for customers to read. Or maybe you'd want to provide information about shipping times.

If you want to display static information as well as the shipping calculator on the product page tab, then WooCommerce tab manager is the solution. This lets you create custom tabs which appear after the product description tab, containing whatever content you need.

Use the WooCommerce Product Page Shipping Calculator shortcode [shipping_calculator] to add a shipping calculator to the custom tab. Also add any other static information about your shipping costs, times and policies.

Add a WooCommerce shipping calculator to the product page today!

Customers don't like to be surprised by high shipping fees or a lack of shipping options to their addresses. When they are, they tend to abandon their carts quickly.

Adding a WooCommerce shipping calculator on the product page provides shipping details to customers when they need the information the most - before adding items to the cart. This is proven to increase conversion rates and enhance customer satisfaction in eCommerce stores.

If you've followed all the steps outlined in this tutorial, your website is now equipped with a solid shipping calculator. And if you haven't installed it yet, get it today!

Best WooCommerce paywall plugin

Are you looking for a way to set up a WooCommerce paywall to start charging for content? Keep reading to learn how (and why) setting up a paywall is a sure-fire solution for monetizing your content 🔥.

Subscription revenue is something that every online creator can benefit from, whether you're a blogger or a course creator. Paywalls are used to generate revenue by many large publishers, including The Wall Street Journal, The New York Times, and The Washington Post. And for a reason!

Paywalling is one of the quickest and easiest methods of monetizing a WordPress website. While online subscriptions and paywalls are not new to the publishing industry, they are becoming more widespread across the content creation industry.

In this post, we'll explain the concept of the WooCommerce paywall and discuss how you can quickly implement it on any WordPress website. You'll learn how to:

  • Use WooCommerce to charge for access to any type of content on your website (e.g. an exclusive members-only or subscribers area).
  • Charge for access to a hidden area of your eCommerce online store (e.g. a members-only purchasing club).
  • Use subscriptions to generate sustainable ongoing revenue from your WooCommerce paywall.

What is a WooCommerce paywall, and why set one up?

A paywall, in essence, is a mechanism to limit who can access the information on your website. Depending on the use case, the company's branding, and other factors, you may find several different names for this type of content restriction. You could find this referred to as a content locker, gated content, a WordPress paywall, a WooCommerce paywall, or another name.

WooCommerce paywall
Newspapers often use paywalls to restrict access to premium-only content

As the world's leading eCommerce solution, WooCommerce is an excellent way to charge for access to your website content. That's why we're focussing on WooCommerce paywalls in this article.

To set up your paywall, you need a WordPress website plus the following plugin stack:

  • The free WooCommerce plugin to get the essential eCommerce functionality, such as taking payments online.
  • A paywall solution to prevent non-paying visitors from accessing the premium material.
  • Finally, you might install a subscriptions plugin to take recurring payments for ongoing access to the WooCommerce paywall.

The benefits of setting up a WooCommerce paywall

Understanding paywalls and their importance

Content paywalls offer a straightforward yet efficient approach to monetizing your blog or WordPress site. If your audience likes the content you create, they will gladly pay $5 a month (or more) to access your finest work.

1,000 subscribers to your premium material would provide you with a full-time monthly revenue. If you still doubt it, here is a quick comparison to other forms of blog monetization:

  • Ads often bother people and degrade their online experience.
  • A decent ad network requires that your blog has hundreds of thousands of visitors in order to accept it.
  • The process of creating, testing, and launching a product for other forms of revenue might take months.

In contrast, creating a paywall takes just a few minutes and doesn't require hiring a web developer. With a smart WooCommerce paywall plugin, you can accomplish this instantly (and we will show you how below).

A WooCommerce paywall is also a great solution if you offer a course or a membership. Contrary to online course platforms, such as Kajabi or Teachable, setting up a paywall on your course or online program will save you money. Platforms such as Kajabi or Teachable charge either a monthly fee or a fee from every student you add to the course. You can see how quickly it adds up. 

What sorts of sites need a paywall?

A WooCommerce paywall can help to monetize all sorts of websites. All that matters is that you have some sort of content that people will pay to access.

Here are some examples:

  • Media sites and newspapers with subscriber-only content.
  • Educational content, like a course or tutorial-style blog.
  • Private communities for your readers. This enhances community feeling, offers premium content, and improves brand image.
  • Purchasing clubs with products that only paying members can buy.

Paywalls vs memberships

It's worth understanding the difference between paywall and membership plugins. They are both methods which online content providers can use to monetize their offerings. However, they operate under different principles and have distinct characteristics:

Paywalls
  • Definition: A paywall is a feature used on websites to restrict access to content. Users must pay to gain access to specific articles, videos, etc., behind the paywall.
  • Types:
    • Hard paywalls: Users must pay to access any content.
    • Soft paywalls (or metered paywalls): You can access a limited number of articles for free before being required to pay.
    • Freemium paywalls: Some content is free, but premium content requires payment.
  • Access to content: Typically, access to individual pieces or groups of content, possibly time-limited or pay-per-view.
  • Target audience: Often used by news sites and other content-heavy platforms and apps.
Memberships
  • Definition: A membership site involves users subscribing to a service, often for a recurring fee. In return, they receive various benefits, including access to content, exclusive features, community engagement, etc. You might have one or multiple membership levels.
  • Access to content: Members usually get unlimited access to content or special benefits as part of their membership. It can include member-only forums, discounts, newsletters, and other add-on benefits.
  • Target audience: This model is often employed by content creators looking to cultivate an engaged community around their work, or services like streaming platforms that offer various content for a monthly fee. Memberships focus on building long-term relationships with customers beyond simply giving access to restricted content.

In general, paywalls are generally used to monetize individual pieces of content or groups of content. Memberships, on the other hand, focus on building a community and offering ongoing value to subscribers beyond access to content. WordPress paywall plugins therefore offer slightly different functionality from membership plugins. For example, these plugins might include MemberPress, WooCommerce Memberships, Restrict Content Pro or Paid Memberships Pro.

You can run both models on the same platform, for example offering paywall access as part of a membership plan.

In this article, we will focus specifically on setting up a WooCommerce paywall for access to restricted content. However, you can extend the information in the tutorial to add wider membership functionality.

Will a WooCommerce paywall have a negative impact on my SEO?

Lots of people worry that having a paywall will damage their SEO. After all, search engines can't crawl restricted content.

Luckily, the assumption that a paywall will drastically reduce visitors and revenue is false. A paywall may give you a stronger feeling of community and higher-quality traffic, which can actually help your SEO. This may seem counter-intuitive, so here's how it works:

  • Because your new users have paid to be there, they will really value your work.
  • Because your existing users are paying to stay, they will be more loyal to your brand and site.
  • You now have two groups of users who value your content so much that they are willing to pay for it. This increases the value of any hits you receive behind the paywall, and it can be seen in your comment sections, social media engagement and promotion, and much more.

Remember, you won't be putting all your content behind a paywall. You can still have plenty of search engine friendly content which everyone can read. This shows people the value you're offering, convincing them to sign up for the premium-only content.

Recommended plugins for your WooCommerce paywall

As you can see, there are many benefits to creating a WooCommerce paywall. Moreover, making a paywall is easy. You can do it without having to deal with complicated content restriction plugins, merchant accounts, building payment gateway integrations, or managing 1,000's of member accounts.

Now it's time to learn how to set one up. To do this, you need the following stack of plugins:

  1. The free WooCommerce plugin - this adds the basic eCommerce functionality to your site.
  2. Password Protected Categories - this restricts access to your website content, hiding it behind the paywall.
  3. YITH WooCommerce Subscriptions (optional) - this lets people make regular recurring payments to access the premium content. (Skip this step if you only require one-time payments.)

Tip: If you want to include pages within the paywall (rather than posts or a custom post type), then you'll also need to install a free plugin to categorize WordPress pages. I recommend the free Add Category to Pages plugin.

How the paywall works

People pay for premium access to your content and receive a login for your website. When they login, the unlock the paywall and can see links to the premium area in your website navigation menu. They can then navigate freely within the paywall.

You can use Password Protected Categories to hide any type of WordPress category or taxonomy. Only specific users, roles, or people with the password can get through the paywall.

Tutorial: Setting up a paywall on your WooCommerce site

Here, I'll show you how to set up a paywall on your WordPress pages easily in 3 simple steps. It's completely customizable so you can adapt it to your business.

First I'll provide a quick summary of all the steps, and then tell you how to implement them step-by-step.

How do I create a paywall in WooCommerce?

  1. Install the free WooCommerce plugin and set up your payment methods.
  2. Create the content that you plan to hide behind the paywall, then use the Password Protected Categories plugin to restrict access to certain user roles.
  3. Create a 'Paywall' product and set the price.

Keep reading for full details on each of these 3 steps.

Step 1: Install WooCommerce

  1. Log into the WordPress admin for your site, and go to Plugins → Add New.
  2. Search for 'WooCommerce' and install it. Don't confuse it with other plugins with a similar name. The main WooCommerce plugin is easy to spot as it has millions of installs!
  3. Once installed, disable 'Guest Checkout' under WooCommerce Settings Accounts & Privacy. This way, WooCommerce will create an account for each person when they subscribe.
  4. Use the other settings to configure whatever you need, such as taxes and payment options for accepting payments to the paywall. For example, you can easily set up online payments via PayPal or credit card (via Stripe).

Step 2: Set up the WooCommerce paywall plugin

Before you start putting content behind the paywall, it's worth thinking about what sort of content you'll be using. The options are:

  • Normal WordPress pages. This is a good option, but you'll need to use the free Add Category to Pages plugin to categorize your pages. 
  • WordPress posts. Do this if you're creating a paywall for blog or news posts. However, if you also have a public blog then I'd recommend using a custom post type instead.
  • A custom post type. If you want a dedicated area for the paywall-restricted content in the WordPress admin, then create a custom post type. You can easily do this with our free Easy Post Types and Fields plugin. For example, you might create a post type called 'Members Content'.

Once you've added some content and structured it into one or more categories, then you can start hiding it behind the paywall. To do this:

  1. Purchase and install Password Protected Categories.
  2. Go to edit one of the categories that will go inside the WooCommerce paywall. For example, if you're putting blog posts behind a paywall then go to Posts → Categories.
  3. Find the visibility section, select 'Protected' and then select the user role(s) that will have access to the paywall.
password protected categories - WooCommerce paywall plugin

Which user roles need access to the paywall?

If you're only planning to use WooCommerce to sell access to the paywall, then you can just use the built-in 'customer' role. People will automatically be added to this role when they make a purchase, so that way they will get instant access to the restricted content.

However, that won't work if you're selling other types of products too. In this case, then you should use the free User Role Editor plugin to create a dedicated role for users with paywall access. Select this custom role for all the categories that will be hidden inside the paywall.

(Tip: I also recommend selecting 'Administrator' too, so that you have access to the payroll for testing purposes.)

Step 3: Create a paywall product

Finally, you need to create a product which people will purchase in order to access the premium content.

  1. Go to Products → Add New, and add information such as the product description and price. For example, the name of this product might be "Premium Access".
  2. Now go to Appearance → Menus and add the product you just created to your website navigation menu. People will go to this page in order to pay to access the paywall.
  3. If required, then install YITH WooCommerce Subscriptions and use it to set up a Subscription plan product for the premium content. Or if you just want to charge once for access to the paywall area, then create a standard WooCommerce product instead.

Once you have done this, then customers will immediately have access to the paywall area as soon as they buy your paywall product from its product pages. If you created a dedicated user role for paywall access in Step 2 above, then to make this work then you must use the Automatic User Roles Switcher plugin to change people's roles when they purchase the paywall product.

Bonus steps

The steps described above cover all the essentials to setting up your WooCommerce paywall. To make it even more professional and user-friendly, consider adding these extra features too.

Create a login form

WordPress itself provides a basic login form, but it's not very professional and doesn't match your website. If your WordPress theme/template provides a nice front-end login form, then I recommend using that. Add a prominent 'Login' link to your header or menu.

Alternatively, you can use the free Theme My Login plugin to create a professional-looking login page.

Add your paywall categories to the menu

Navigate to Appearance   Menus and add links to the paywall-restricted categories to the menu. These links will only appear to logged-in paying customers.

Edit the 'Welcome' email to customers

In the previous steps, I showed you how to disable guest checkout in WooCommerce. This means that when someone pays for premium access, a user account will automatically be created for them. WooCommerce will send their login details by email.

You can edit this email in WooCommerce → Settings → Emails → New Account Email.

Create a WooCommerce paywall today!

As you can see, setting up a WooCommerce paywall is an easy and quick solution to start monetizing your WordPress site. Setting up a paywall or membership subscription is the ideal choice if you want to make money from your blog but don't want to spam your readers with ads and affiliate links.

.There are more benefits than drawbacks to locking away and charging for some of your content. While you could lose some visits and non-paying users, you will also gain more devoted customers and perhaps even build a strongly engaged community. Whether you offer online courses, membership or simply want to lock away your blog content, the best paywall plugin for WordPress is Password Protected Categories.

Try out the Password Protected Categories plugin today. Use it with the other plugins mentioned in this tutorial to take payment for accessing the paywall (either one-off or as a monthly subscription), and give paying customers access to the premium content. 

setting up cart and checkout on the same page

WooCommerce takes users through multiple pages before they can complete their orders. If a customer wants to buy one product, they have to go through four pages! That's definitely not ideal. It's better to put the WooCommerce cart and checkout on the same page.

Yes, the situation really is that bad for customers. First, they go to the shop page, then the product page, then the cart page, and then finally, the checkout page. The process involves even more pages for customers buying multiple products.

One way to improve the user experience and shorten the customer journey is by bringing product selection, the cart page, and the checkout page all into one page.

In this article, we’ll show you two easy ways to set up the WooCommerce cart and checkout on the same page. By the end of this article, you'll be able to create a fully functioning one-page checkout in either of these two ways:

Best ways to set the WooCommerce cart and checkout on the same page

There are two easy ways you can display the WooCommerce cart and checkout on the same page and create a better checkout flow. This can help you make your online store more user-friendly and boost sales.

The popup cart and checkout method

My favorite way to speed up the purchase flow is by using the WooCommerce Fast Cart plugin to display the cart and checkout form in a popup on the same page. Keep reading to learn more about this method or skip ahead to the instructions.

WooCommerce Fast Cart lets you show the cart and checkout on any page of your WooCommerce site. This means that if a customer wants to purchase a product when browsing your store’s catalog, they can simply click on the “Add to cart” button to open the cart and checkout page in a popup. That way, customers can quickly order products from any page they’re on - without leaving the page.

WooCommerce Fast Cart - Display the WooCommerce checkout directly in the fast cart

Display a popup checkout - either alone, or with a popup cart

As a result, customers can review their orders, add more products, make changes to their orders, and checkout using the fast cart popup screen.

The WooCommerce Fast Cart plugin lets you display the cart and checkout in a side cart or a popup that appears in the center of the user’s screen. Either way, the entire shopping experience on your WooCommerce site is brought to a single page. It's a true one-click WooCommerce checkout.

WooCommerce Fast Cart - 2 layout options: Choose from a side cart of central popup
A central on-page popup WooCommerce cart

As a result, you’ll get happier customers who are less likely to abandon their cart when shopping from your WooCommerce site.

The one-page checkout method

There's a second way to put the WooCommerce cart and checkout on the same page. It involves listing your products at the top of the page, and then a combined cart and checkout below. Customers can add products to the cart and see them in the cart at the bottom of the page. They can remove products, edit quantities, and complete the checkout fields - all on the same page.

You can achieve this by combining the WooCommerce Product Table plugin with the WooCommerce One Page Checkout plugin. Keep reading to learn more about this method, or skip ahead to the instructions.

Together, these two plugins shorten the order process on your online store. This way, you speed up the customer journey by giving users a quick and easy way to select products and checkout from your WooCommerce site:

WooCommerce one page checkout with product table
A WooCommerce store with the products, cart and checkout on the same page

Why have a product table on the same page as the WooCommerce cart and checkout?

Used alone, the one-page checkout plugin puts the cart and checkout on the same page. However, it's not ideal because shoppers will still have to browse multiple product pages to find what they’re looking for.

This is why we recommend using the WooCommerce Product Table plugin. It lets you showcase products in a tabular layout so customers can quickly select products using sortable and filterable product tables. You can then use the WooCommerce One Page Checkout plugin to show cart and checkout options on the same page.

This way, shoppers can quickly find the products they want to buy and add them to their cart at once using a single button. Once that’s done, they can fill out their billing details and checkout from the same page. In addition to this, customers can even edit their orders from the same page.

This simplifies the one-page checkout process on your WooCommerce store and is a great way to encourage more sales.

Setup instructions

Method 1: WooCommerce Fast Cart

You can use the WooCommerce Fast Cart plugin to display the cart and checkout in a popup on the same page.

You can use the plugin to allow customers to use the popup cart and checkout. That way, the cart opens first so the customer can review their order before progressing to the on-page popup checkout. You can also speed things up further by skipping the cart completely and immediately initiating the same page checkout.

How to set up the WooCommerce Fast Cart plugin

  1. To get started, install and activate the WooCommerce Fast Cart plugin on your WordPress site.
  2. Use the plugin setup wizard to choose the main settings for your same page popup WooCommerce cart and checkout.
    • You can select from two different layouts. These include showcasing the cart and checkout in the side cart or using a centered popup using the Layout section. The Auto open checkbox will automatically open the cart and checkout popup as soon as a user adds the product to their cart.
    • Make sure to enable the Allow fast checkout checkbox. This will let customers quickly checkout with their order using the fast cart popup.
    • You can also choose to skip the cart page entirely and showcase the checkout options instantly. Do this by enabling the Direct checkout checkbox.
    • In addition to this, the plugin lets you select what to display in the popup, including product images, product prices, quantity pickers, item delete buttons, coupons, cross-sells, and shipping information.

Now when customers are finished adding products to their shopping cart, they can quickly checkout using a popup cart and checkout popup.

WooCommerce Fast Cart Center Popup

Method 2: WooCommerce Product Table

If you don't want to display the cart and checkout in a side cart or popup on the same page, then use method 2 instead. This displays a combined WooCommerce cart and checkout on the same page as a searchable product table.

Here's what you need to do to set the cart and checkout on the same page with WooCommerce Product Table:

Step 1: Set up the WooCommerce Product Table plugin

  1. To get started, install and activate the WooCommerce Product Table plugin on your WordPress site.
  2. The setup wizard will open automatically - use it to set up the defaults for your product table. For example:
    • Specify all the columns that you want to show in your product table using the Columns field.
    • Select the Quantities checkbox to let users purchase multiple products without having to leave the page.
    • In addition to setting other product table options, such as sorting options and filters, you can also let your customers select multiple products and add them all at once to their shopping cart using the Add to cart section. Simply select Add to cart checkboxes using the Adding products to cart dropdown menu. Choose where you want to display the “Add all to cart” button using the Multi-select cart button dropdown.

Used alone, your product tables might look like this. Keep reading to learn how to add a WooCommerce checkout underneath.

Shop page
A product table before adding the one-page checkout

Step 2: Create a page for your products, cart and checkout

Next, you need to create a page where you will display your products, cart and checkout on the same page:

  1. Create a page for your one-page WooCommerce shop and checkout. To do this, create a new page by navigating to Pages → Add New.
  2. Add the [product_table] shortcode - for example, within a aShortcode block:
WooCommerce Product Table shortcode

Step 3: Add a WooCommerce cart and checkout on the same page

Now that we’ve listed products in a sortable and filterable product table, you can use the WooCommerce One Page Checkout plugin to add a checkout form below the table:

  1. Once you install and activate the plugin on your WooCommerce site, head on over to the page we created earlier with the product table shortcode.
  2. Create another Shortcode block and paste the [woocommerce_one_page_checkout] shortcode before clicking on the Update button.
    WooCommerce One Page Checkout shortcode

Now view the page. Customers can browse the product table to find what they’re looking for. They can add multiple products to their cart at once, edit their selections in the cart, and checkout – all from the same page.

WooCommerce one page checkout with product table

Set up WooCommerce cart and checkout on the same page

The WooCommerce purchase flow is quite lengthy and overwhelming. It’s much better to use a same page WooCommerce cart and checkout plugin to improve the ordering process. Letting customers add products to their cart and checkout from the same page can help you reduce cart abandonment rates and increase conversion on your online store.

As we have seen, there are two excellent ways to do this:

Get your chosen plugin today, and start showing the WooCommerce cart and checkout on the same page 😀

Manage Stock for Your WooCommerce Variations

WooCommerce has various options for managing stock at variation level. It lets you set the stock status or manage stock by setting stock quantity, allowing backorders, and setting a low stock threshold. However, WooCommerce's options to manage stock at variation levels aren't perfect for all stores.

In this article, we’ll learn how to use the core WooCommerce features for variation stock control. We'll also discover 3 fantastic plugins to display and manage variation stock on the front end. These will allow you to:

  • Show variation stock information directly on the WooCommerce shop and category pages.
  • Display and manage variation stock in bulk.
  • Display the lead time or waiting time for each variation.

For example, this is what it might look like to display variation stock on the shop and category pages:

Product table with stock column

This way, customers can see at a glance which variations are in stock and which ones aren’t. Keep reading to learn how to do this and more

How to use WooCommerce to manage stock at variation level

WooCommerce has built-in options to manage stock for variable products (as well as simple products) on your online store. To enable the default stock management feature, simply navigate to WooCommerce → Settings → Products and clicking on the Inventory link from the top.

Inventory tab

Enable the Manage stock checkbox and set basic stock management settings. You can select the low stock level display and set a low stock threshold. This lets you show or hide out-of-stock variations. And, whenever a specific product variation is low on stock, a notification will be sent to the store manager about the stock level.

In addition to this, WooCommerce also lets you manage stock at the product variation level. To do this, navigate to the variable product’s edit page. Then click on the Variations tab under the Product data meta box.

Variations tab WooCommerce manage stock at variation level

From here, you can choose the variation you want to manage stock for and tick the Manage stock? checkbox to view the Stock quantity field. You can manage stock for each variation following this method and click on the Save changes button once you’re done.

This displays a stock status on the front-end when customers select the product variation they’d like to purchase.

3 ways to better display and manage stock at variation level

While WooCommerce lets you display stock information for product variations, it isn’t ideal if you want to offer a frictionless shopping experience on your online store.

Here’s why:

WooCommerce only displays stock status after a customer selects a variation from the variation dropdown menu. This means your customers have to select a variation before they find out if it’s in stock or not. This can lead to a frustrating shopping experience.

Default stock information
WooCommerce only displays variation stock information AFTER you select a variation

On the flip side, if you set out of stock products and variations to be hidden in your store, they won’t appear in your store at all. This may lead customers to believe you don’t sell the product or variation, and they won’t check back later.

If lots of product variations are out of stock, customers will end up making multiple selections one by one before they find something they can order. This can easily lead them to abandon your store.

In addition, WooCommerce doesn’t do anything helpful like grey out out-of-stock variations to help shoppers identify out-of-stock variations. It’s better to display variation stock information from the get-go, so that customers can see which product variations are available at a glance. This not only helps save time but also prevents them from bouncing off your online store frustrated.

Next, we’ll share several plugins that offer different ways to do this more clearly. It's time to dive deeper into different ways to display and manage stock at variation level in WooCommerce.

Manage stock at variation level in bulk

The WooCommerce Bulk Variations plugin makes it much quicker and easier to bulk-edit variation stock for each product:

WooCommerce Bulk Variations bulk actions
Select specific variations and quickly update the stock levels

For example, let's say that you sell a custom printed hoodie and have received a delivery of 5 units of all the Small variations. You can select all the variations with the 'Small' attribute and bulk-update the stock to 5.

This is how to use the bulk variation stock management features:

  1. Install the WooCommerce Bulk Variations plugin.
  2. In the plugin setup wizard, activate your license key and then skip the remaining steps.
  3. Go to the 'Edit' screen for the variable product that you want to bulk-edit the stock levels for.
  4. Open the Variations tab in the Product Data section.
  5. Select the variations that you want to manage stock for. To select variations with specific attributes only, use the filters above the list of variations.
  6. Use the bulk actions dropdown to change the stock status for all the selected variations.
  7. Save the variable product.

It's that easy!

List variations in a quick order form with stock information

Now we've learned the best ways to manage variation stock in the WordPress admin. Next, I'll share 3 plugins which improve how variation stock is displayed in the front end.

First, let's look at the WooCommerce Product Table plugin. This plugin helps WooCommerce store owners to better display stock information about variable products. It lets you display each variation individually in your store, complete with stock information. This ensures a top-notch user experience on your WooCommerce store.

WooCommerce variations table plugin

List variations individually in a quick order form, complete with stock information

You can use the plugin to display one product per row with dropdowns to select variations like how they appear on single product pages. However, the clearest way to show variable product stock is to list each variation on each row in the table. This “display variations as products” method allows you to have a stock column in the product table. Customers will be able to see the exact stock status of that variation.

An example

For instance, if your variable product has three color variations, each variation will be displayed in a separate row in the product table. This means instead of displaying a single product row for a variable product, you can showcase each variation option in a separate product row along with the stock information of each variation clearly.

This is great for showcasing the exact stock status of all product variations on your WooCommerce site. Customers can see which variations are in stock at a glance, preventing them from wasting time trying to select options that aren’t available or in stock.

WooCommerce Product Table lists the variations for multiple products at once and offers a great way to improve the layout of your main shop page and category pages. The best part is that the plugin is very easy to set up on your WordPress site.

WooCommerce Product Table tutorial

Once you activate the plugin on your WooCommerce site, the setup wizard will open. Use this to set up your product tables, paying particular attention to the following options:

  • In the Shop integration section, specify where to display the product table instead of using the default WooCommerce layout. For example, you can showcase the product table on the shop page, in product search results, in product categories, and for product tags.
  • The Columns section lets you specify which columns to display and how product images appear on the product table. For instance, you can display the product image, the product name, the price of your product, the stock status, and a purchase button. Check out the full list of columns you can display on the product table. Don't forget to include the "stock" column!
  • Now scroll down to the Add to cart section and select the Quantities checkbox to display a quantity box for each product listed on the product table.
  • Select how variations are displayed on the product table using the Variations option. Selecting the Show as dropdown lists option will display variation options in dropdowns on the product table. We recommend this option for showing the stock status clearly for each product variation. This lets your customers view the stock status for each variation option separately and helps them make informed purchase decisions when shopping from your online store.

Create a variations order form for each variable product

While the WooCommerce Product Table lists multiple products in a table on your main shop or category pages, the WooCommerce Bulk Variations plugin is different. We've already seen how this amazing product variations plugin helps you to bulk-edit variation stock statuses. However, it can also change how your variations are displayed in the front end.

You can use WooCommerce Bulk Variations to create an order form for one variation at a time. The order form replaces the standard-looking WooCommerce dropdowns on the single product page.

Manage variations grid stock information

The plugin offers an all-in-one solution for displaying your WooCommerce variations better on your online store. This also means displaying the stock information for each variation and displaying them in an easy-to-use grid or price matrix. This lets customers select multiple variations at once while being notified about the stock status for each variation option on the same screen.

WooCommerce Bulk Variations tutorial

Once you install the WooCommerce Bulk Variations plugin on your WooCommerce site, it’s pretty straightforward to showcase stock information when displaying variations using the price matrix. Navigate to WooCommerce → Settings → Products and click on the Bulk variations link from the top.

WooCommerce Bulk Variations settings

Simply select the Display stock information in the variations grid checkbox under the Grid options section to enable stock status for each variation option. You can also enable the variation grid display for all your shop’s products globally that have one or two variation options. Similarly, you can enable the variation grid for all products that have three or more variation options.

In addition to this, the plugin also lets you set variation grid display options for specific products on your WooCommerce site. To do this, navigate to the product’s edit page and scroll down to the Bulk Variations tab.

WooCommerce manage stock at variation level

Enable the Product-level control checkbox and the Enable checkbox to display a variations grid for the new product instead of the default WooCommerce dropdowns.

Bulk variations grid

This way, you create a better interface for your customers to view stock information for variations on the single product page and make it easier for them to order multiple variations at a time using a single button.

As a result, this provides your customers with essential information without them needing to select each variation first. It also creates a seamless shopping experience on your online store.

Show the lead time for each variation

WooCommerce Lead Time is displays accurate information about the stock status of your products and variations.

You can show lead times for all products and variations on your WooCommerce site. Including showcasing the lead time for out-of-stock products or products on backorder. This way, your customers know when to check back to place their order. Or even better, they can order backorder products immediately, safe in the knowledge of how long they will be waiting.

All you need to do is set a date for when the variation will be back in stock. After that, the plugin will automatically calculate a lead time for you. This helps keep your customers informed and encourages them to check back again when products restock.

On top of the basic stock information in WooCommerce, WooCommerce Lead Time allows you to display a special message. These messages notify customers when to check back or select a waiting time for each variation.

Static vs. dynamic lead times

It’s also important to understand the difference between static lead times and dynamic lead times. This way, you'll understand when to use each one with Lead Time. Static lead times are used when the information stays the same. For example, you can display a static lead time such as “Handling time: 10 days” for your products.

On the other hand, dynamic lead times are used to specify when out-of-stock products will come back in stock on a particular date. For instance, a dynamic lead time might look something like “Back in stock in 8 days”. You can specify a particular date and the WooCommerce Lead Time plugin will automatically display the remaining number of days before it comes back in stock.

WooCommerce Lead Time tutorial

Once you get the plugin, the setup wizard will open. Use it to choose how to display lead times in your store.

Here, you can select when to display lead times on your WooCommerce site as well as specify what to display as the lead time message to customers on the front-end. These settings will be applied to all products on your WooCommerce site.

In addition, you can set lead times for individual products and variations. Simply navigate to the product’s Edit page and click on the Inventory tab under the Product data meta box.

Inventory tab with lead time

Set the lead time for each product or variation using the Lead time text field and click on the Update button to save changes.

Lead time preview

Use multiple manage stock at variation level plugins for best results!

Now we've looked at 3 fantastic plugins for improving how you manage and display WooCommerce product variations. You can use each one on its own. But for best results, why not use them together?

Here are some examples:

Using WooCommerce Product Table with WooCommerce Lead Time

You can use the WooCommerce Lead Time plugin on its own so that the lead time information appears when customers select variations using the default dropdowns. Alternatively, you can use it with the WooCommerce Product Table plugin to display lead time for variations in each row of the table:

Lead times in a product table WooCommerce manage stock at variation level
For maximum benefit, display variation stock and lead times in a product table on the shop page

Using WooCommerce Lead Time with WooCommerce Bulk Variations

You can also use the WooCommerce Lead Time plugin with the WooCommerce Bulk Variations plugin. That way, you can display the lead time for each variation directly in the variations grid.

The better way to manage stock at variation level in WooCommerce

Used as it comes, you can use WooCommerce to manually manage stock at variation level and display information about out-of-stock variations on product pages. However, this doesn’t quite cut it. It takes ages to change the stock status and stock level for each variation individually. And even worse, the default WooCommerce layout doesn't let you display variation stock information before the customer makes their selections. This can lead to a frustrating shopping experience for customers.

Luckily, there are some amazing plugins to fix this for you:

Together, these plugins help you display your online store stock at the variation level.

We hope that this article has provided lots of useful information about the different options for using WooCommerce to manage stock at variation level. Follow the instructions to set up the plugins in your own store.

Ready to display stock information better on your e-commerce store? Get the plugins today!

There are lots of ways to add WooCommerce product filtering to your store. You can do it very effectively, or very badly! Discover our top tips on the best way to provide filtering options for your customers.

While designing our WooCommerce Product Filters plugin, we did a lot of research and analysis into what makes effective product filtering. Today I'm going to share my top tips on how to use WooCommerce product filtering in a way that will delight your customers and maximize your sales.

We'll cover various areas of filtering products, including subtle but important details that people normally overlook.

Tip 1: Choose WooCommerce product filtering styles that suit your product data

If you look at the basic filter widgets that come with WooCommerce yourself, you'll see that they're very limited. Compare them with the world's top e-commerce stores (many of which don't use WordPress) and you'll see a huge difference. The best stores have a much more creative approach to WooCommerce product filtering, with a huge range of filter styles.

But don't go crazy! Think carefully about the types of product data that your customers will be filtering by. Choose a filter style that suits each type of data and will create a logical experience for customers.

Filtering types and style options

The WooCommerce Product Filters plugin comes with a big choice of filter styles. This includes checkboxes, dropdown lists, radio buttons, text labels, images (with or without text), and color swatches. Which one you choose for each type of product data can make a big difference to your customers' experience.

Here's a summary of the different filtering styles that you can choose from:

Dropdown filters

WooCommerce category filter dropdown
  • What is a dropdown filter: A dropdown list, which customers click to open the list of options.
  • Hierarchical?: Yes - sub-categories are indented under their parent categories.
  • Selection method: Single choice.
  • Recommended for: Product filtering where there is lots of options. That's because a dropdown doesn't take up much space on the page. Only use dropdowns where the customer only needs to choose one option at a time.

Checkbox filters

WooCommerce category filter plugin checkbox
  • What is a checkbox filter?: A list of tick boxes.
  • Hierarchical?: Yes - sub-categories are indented under their parent categories.
  • Selection method: Multiple choice.
  • Recommended for: Non-visual types of product data where customers need to select more than one WooCommerce product filtering option at a time.

Radio buttons

WooCommerce category radio button filters
  • What is a radio button filter?: A list of options, each with a circle that customers can click on.
  • Hierarchical?: Yes - sub-categories are indented under their parent categories.
  • Selection method: Single choice.
  • Recommended for: Filters where customers must make an either-or choice to select one option at a time.

Text labels

WooCommerce filter by category label
  • What are label filters?: A cluster of small boxes, each containing the name of the option - similar to a tag cloud.
  • Hierarchical?: No - only top level options are included (e.g. parent categories).
  • Selection method: Multiple choice.
  • Recommended for: Types of product data which don't have images, but where customers will benefit from a more visual way to display the options. For example, size options (e.g. Small, Medium and Large) look good displayed as text labels. This is a particular good way to display WooCommerce tag filters.

Images

WooCommerce category filter image with name
  • What are image filters?: A grid of images, each representing one of the filter options (e.g. a category or an attribute). You can choose whether to show the image on its own, or to add a dark overlay with the option name over the image.
  • Hierarchical?: No - only top level options are included (e.g. parent categories).
  • Selection method: Multiple choice.
  • Recommended for: Visual types of product data where customers will appreciate being able to click on an image of what they are looking for, instead of having to read through a list of text options. For example, categories often work well when displayed as image filters.

Color swatches

WooCommerce faceted search filters
  • What are color swatch filters?: A grid of coloured squares, each representing a color attribute option. Customers click on a color to filter for products of that color. You can display the colors on their own, or with the name of each color alongside.
  • Hierarchical?: N/A
  • Selection method: Multiple choice.
  • Recommended for: Color attributes.

Choosing the right product filtering styles

Think about whether you're using the most appropriate style for each filter on your site. If not, then head over to Products → Filters and change it - it only takes a second!

Tip 2: Show WooCommerce product filtering in the right parts of your store

Did you know that there are 3 different ways that you can add filters to different parts of your store?

Method 1: Above your shop

WooCommerce add category filter above shop products

The most obvious way to show filters on your site is by displaying a filter group above your shop. You can enable this in the setup wizard, or on the plugin settings page at Products → Filters → Settings.

This method displays the filters as dropdowns above your default store pages (shop, category pages, etc.). But what if you want to add filters to the sidebar, or to pages other than your default store pages? That's when you need Methods 2 and 3.

Method 2: As sidebar widgets

WooCommerce sidebar widget filters

Lots of e-commerce stores display filters in the left or right sidebar of their shop pages. That's a great option because the customer can see all the options at once.

To add a filter group to the sidebar, go to Appearance → Widgets and use the 'Product Filters' widget. To show the widget on some pages but others, you can use a free plugin like Widget Options.

Method 3: As a shortcode

The final way to insert filters is a bit more technical than the others, but also the most flexible. You'll need this if you're creating custom pages to list products and want to display filters above - for example, if you're using a page builder plugin or our WooCommerce Product Table plugin.

To find the shortcode, go to Products → Filters and copy the shortcode for the relevant group. Paste it wherever you want the filters to appear - for example, above a product table shortcode, in a Gutenberg text or shortcode block, in an Elementor or Divi block, or anywhere else.

You can either use the shortcode as it comes, or configure it using the shortcode options.

Choose the right location for your WooCommerce product filtering

Armed with this information, think about whether you have added filters to all the locations where they would be helpful to your customers.

Tip 3: Choose between horizontal, vertical and hidden filters

Amazingly, the WooCommerce Product Filters plugin provides three layout options for your filters.

That's right - you can choose between:

  • Horizontal layout - This normally appears above the list of products, with each filter hidden within a dropdown.
  • Vertical layout - This is normally use for sidebar widget filters.
  • Hidden filters - You can also display a 'Show filters' button above the list of products, which opens the filters in a slide-out panel.
Show hidden filters button

So, how can you choose which layout(s) to use in your store? Here are my top tips to help you decide:

  • Do your shop pages have a sidebar? If not, then you should definitely use the horizontal or hidden layout!
  • Do you want customers to be able to see all the filter options all the time? If so, then the vertical layout is best.
  • Do you have large numbers of filters? Consider using a combination of both layouts, as in the above screenshot.
  • Are you worried about cluttering up the page? Hide the filters so that customers must click a button to view them.

What about mobile?

WooCommerce filter plugin with mobile slide-out panel

So far, we've only considered desktop users. Most mobile sites don't have a sidebar so even if you add filter widgets on desktop, WooCommerce Product Filters will automatically hide these and display a 'Show filters' button on mobile instead.

This means that for mobile users, your only choices are to either show the 'Show filters' button, or to show the horizontal filters above the list of products. I recommend using the 'Show filters' button if you have lots of filters, and making them visible above the list of products if you just have a few.

WooCommerce mobile filters above shop

Use these options to plan the best possible locations for the filters in your store - whatever devices your customers are using.

Tip 4: List products in a structured order form with filtering

If you use product filters on your e-commerce site, chances are that you have lots of products. After all, that's why you need filters!

And when you have lots of products, the default store layout often isn't good enough. Each product takes up a lot of space, and even after using the filters, it's still difficult for customers to compare products and make quick buying decisions. It's also a pain for customers to have to visit a separate page for each product in order to choose quantities and variations, and add to the cart.

You can solve all these problems by using WooCommerce Product Filters with our other plugin, WooCommerce Product Table:

WooCommerce Product Filters Table Integration
A product table with WooCommerce product filtering

WooCommerce Product Table lists your products in a conversion-optimized one-page order form. Customers can view more products per page, and choose quantities and variations without leaving the page.

It's a much faster way to buy. And as everyone knows, faster shopping means more sales for you!

Tip 5: Decide whether to hide the product filtering

Next, let's look at whether your store will be better if you show or hide your product filters.

Most WooCommerce stores show the filters all the time. However, if you look at some of the world's leading e-commerce sites outside of WordPress - particularly clothes stores - then you'll see that this isn't always the best option. Depending on the layout of your store and the type of products, it's often better to hide the filters so that customers can choose whether to see them.

The WooCommerce Product Filters plugin provides several ways to do this:

Slide-out panel

WooCommerce Product Filters slide-out panel

You can hide filters from the page on mobile and/or desktop. When you do this, customers can click a button to view the filters in a user-friendly slide-out panel.  That way, customers can still filter your products - but you keep the page clean and clutter-free.

Add open/close toggles

Maybe you don't want to hide the filters all the time, but you want them to take up less space on the page.

You can achieve this by enabling the Toggle option in WooCommerce Product Filters. Either show the toggles as open or closed by default, and customers can click on a filter heading to show and hide the options within:

WooCommerce toggle product filters open closed

Take a look at your store and think about whether you're using the visibility options in the best possible way for your customers. It can make a big difference!

Tip 6: Should you use AJAX filtering?

When people first install the WooCommerce Product Filters plugin, they tend to select the "Instant" filtering option without really thinking about it. But is it definitely best option for your store?

Now I'm going to tell you a bit about the "Button click" option and help you think about which filter mode you should be using.

WooCommerce Product Filters comes with a choice of 2 filter modes:

  • Instant - This uses AJAX to filter the list of products as soon as the customer clicks on an option.
  • Button click - Customers can select as many options as they like from the filters, and then click an 'Apply' button to view the results.

Most of the world's top e-commerce stores use AJAX filtering. That's because it reduces the number of clicks for the customer, and shows results without reloading the page.

However, AJAX filtering can sometimes create a worse user experience. This can happen when you sell the sort of products where customers want to make all their choices in one go, and only view the results at the end of the process. ]

Some examples

To illustrate this, let's look at two possible use cases:

  • Clothes websiteI'd generally recommend AJAX filtering for this because the customer wants to see some products after selecting some initial filters, and then might select additional options to fine-tune the results. When they start shopping, they don't know the exact combination they're looking for. They'll keep selecting filters one at a time until they find items they like.
  • Car parts websiteWith this type of product, customers know exactly what they need. They want to select all the criteria from faceted search filters and then view the results all at once. As a result, I'd recommend the button click method for this type of store.

Based on the above, which filter mode do you think is best for your store? It's easy to change - just head to Products → Filters → Settings.

Tip 7: Check the order of your filtering options

And finally - another thing to check is the order of your filters. There are two things to check here:

Are your filters in the right order?

When you created your WooCommerce product filtering options you might have added them to the end of the group without considering the order. Edit the filter group and drag and drop the sort icons to put them in the best possible order.

I recommend putting the most high level filters first to create a logical journey for your customers. For example, it would make sense to put the category filter first. Next, you can have the most important attribute filters, and then general data such as price filter and average  rating.

Are the options within each filter ordered correctly?

It's also worth checking the order of the options within each individual filter. For example, if you have created a filter using the 'Size' attribute then you may want to order the attributes in size order instead of alphabetically.

Category, Attribute, Color and Taxonomy filters are ordered via the term_order option that is built into WordPress. While WordPress doesn't have a built-in way to re-order taxonomy terms, you can change the order using free plugins such as Category Order and Taxonomy Terms Order.

Once your filters are up to date and ordered logically, it will be easier then ever for customers to find what they're looking for.

Where to get the plugin

We built the Product Filters plugin to allow any store owner to add professional-quality product filtering to WooCommerce.

There's no one-size-fits-all approach, and different stores work best with different types and configurations of filtering.

As a result, use the above tips when adding WooCommerce product filtering to your store. Think about the types of products you sell, and what will create the best possible experience for your customers. Create logical filtering options that suit your products and guide customers to the products they're looking for. As a result, they're much more likely to find what they're looking for - resulting in more sales for you!

How to Filter Products by Category

If you run a WooCommerce store with lots of categories, then it's essential for customers to have a quick way to find products by category. Discover the easy way to add a WooCommerce category filter to your store, and watch your sales grow!

Product filters add value to online stores and help customers to find products quickly and easily. It’s no surprise that more and more store owners are adding product filters to their online stores.

However, the filters that come with the WooCommerce plugin are pretty basic and don’t include a category filter. There's a basic categories widget that simply lists the categories in your store with links to each one, but no actual category filter widget.

When your customers shop in popular non-WordPress online stores, they're used to being able to filter by category. So why is this so difficult in WordPress and WooCommerce?!

An e-commerce site with category filter checkboxes

Fortunately, there's an easy solution. Keep reading to learn how to add a category filter in WooCommerce. You'll discover how to add WooCommerce filter by category using checkboxes, just like in the example above. And for even more flexibility, you'll learn how to create other types of category filter. This might include clickable images, radio buttons, dropdown lists, text labels, and more.

Why do you need product filters and how does filtering by category help?

WooCommerce is the best e-commerce platform to sell online with ease. It’s also the most popular.

However, the built-in widgets for filters are pretty limited. You can only filter products by basic information such as attribute, price or rating. The page refreshes every time a customer chooses an option from a filter. And even worse - there's no built-in WooCommerce category filter. As a result, there’s no way for customers to refine their search by category and see more specific types of products.

By adding WooCommerce category filters to your store, you make it easy for customers to narrow down their search and find the products they want to buy faster. The faster they find the products, the faster they’ll move to checkout.

Let’s step through some of the main benefits of filtering by category in WooCommerce:

  • Improves user experience. When customers are given the option to filter by a category, they have an easier time finding the exact types of products they’re looking for.
  • Reduces your bounce rate. After running a search if customers see the type of product they’re looking to purchase quickly, they’ll be more likely to visit the product page, add it to their cart, and proceed to checkout.
  • Increases product views. By allowing customers to filter by category, you can increase product views. Customers can quickly refine their search and see the exact types of products they’re looking for.
  • Boosts your store conversions. As a WooCommerce store owner, if you show products that customers are looking for, they’ll be more likely to act on your conversion goal.

And the best thing about filtering by category?

The best part is that WooCommerce category filters are even more useful when used alongside other types of filters. For example, if you set up a category filter with a price filter, attribute filter, and in-stock status filter, customers will be able to refine their search even more.

Picture this: a customer is looking to buy a red t-shirt and has a $40 budget.

Scenario 1: You’re not using category filters – The customer will use the category widget to see all T-shirt products. They’ll see a product catalog of dozens of t-shirts to browse through to find a red one that’s under $40.

Scenario 2: You’re using category filters – The customer will use category filters to make the following selections and refine their search:

  • Category: T-shirt
  • Color: Red
  • Price range: $20 to $40

And the result? They’ll only see red t-shirts that are within their budget.

Introducing WooCommerce Product Filters

WooCommerce faceted search filters
Display category filters as images, dropdowns, checkboxes - whatever you like!

The WooCommerce Product Filters plugin makes it easy for store owners to set up AJAX product filters, including by category, product attributes, or taxonomies. It lets you create different types of filters and display multiple filters on your WooCommerce shop pages and category pages at a time.

The WooCommerce Product Filters plugin was built out of a necessity for a high-quality AJAX product filter plugin for WooCommerce that’s easy for non-coders to use. Store owners can use it to add a customized product category filter to their WooCommerce store in a few steps.

The product filters can be based on categories, attributes, custom taxonomies, product tags, colors, price sliders, and more. You can also display the total product count next to each filter option. It's perfect for anyone looking for a WooCommerce category filter plugin.

Different options for adding a category filter to WooCommerce

Using the WooCommerce Product Filters plugin, you can add a category filter to your store in a variety of different ways:

Dropdowns

WooCommerce category filter dropdown

The dropdowns option lets you display the different categories in a hierarchical list view. Customers can select a single category at a time to filter their search results. This is useful for stores that sell lots of different products organized into a few different categories and sub-categories. The parent-child category relationships are visible at a glance.

A huge benefit of creating category filter dropdowns is that you can make them dependent on each other. This means that only one dropdown appears when the page first loads, and then additional dropdowns appear as the customer makes their selections. Linked filters like this are popular for websites that structure products in a hierarchical way, for example when selling car parts online:

WooCommerce stepped filter dropdowns

Checkboxes

WooCommerce category filter plugin checkbox

The checkboxes WooCommerce category filter lets you display categories with a checkbox next to each one. This way, customers can select multiple categories. This is useful for stores that sell lots of similar types of products such as clothing. Customers can tick the checkboxes next to Blouses, T-shirts, Tunics, and Dress shirts to find a suitable top.

Category checkbox filters are probably the most popular way of filtering by category. That's because it's so easy for customers to select multiple categories at a time.

Radio buttons

WooCommerce category radio button filters

The radio buttons category filter lets you display categories with radio buttons next to each one. This way, customers can filter by category to see the available categories at a glance and select the one they want to filter by.

With radio button filters, you can only select one category at a time.

Text labels

WooCommerce filter by category label

The labels option lets you display WooCommerce categories like a tag cloud. Customers can quickly click on a label to view products from that category only.

Like the category checkbox filtering, you can filter by multiple text labels at a time.

Images

The images option lets you display category image thumbnails, with or without the category name over it. This way, customers can click on the category image to refine their search. It's a much more visual way to filter by category in WooCommerce.

As with WooCommerce category checkbox and label filters, image filters support multiple selections.

Add a category filter the list of products

WooCommerce add category filter above shop products

All of the screenshots above show WooCommerce category filters as sidebar widgets. However, that's not the only option. You can also show each type of category filter at the top of your shop.

With this option, the filters appear as dropdowns at the top of the main Shop page, category pages, and so on. You can display any of the category filter styles (checkboxes, radio buttons, images etc.) within the dropdown. For example, the screenshot above shows how a category checkbox filter looks at the top of the shop.

Mobile category filters

Finally, let's not forget mobile filtering. The majority of e-commerce purchases now take place on mobile devices. However, filtering requires careful thought on mobiles because of the small screen size. You don't want the filters to take up the whole page!

Fortunately, the WooCommerce Product Filters plugin handles this perfectly in its category filters. You can either show the mobile filters as dropdowns above the shop, or in a mobile-friendly slide-out panel:

Organizing WooCommerce category filters

One of the standout features of this WooCommerce category filter plugin is that it lets you create individual filters and then structure them into groups. The groups can then be added anywhere on your WordPress website or automatically be enabled on store pages.

The plugin lets you customize filters to offer dependent items, hide invalid filters, and hide products that are uncategorized. It also enhances the customer experience by offering the option to clear filters and scroll to the top of the page at the click of a button.

Finally, WooCommerce Product Filters lets you display the product count against each filter option. This means that you can show the number of products in each category next to the category name in the filter.

How to add WooCommerce category filters using the Product Filters plugin

Here’s what you need to do to add WooCommerce category filters to your online store:

Step #1: Install and activate the WooCommerce Product Filters plugin

Get the WooCommerce Product Filters plugin if you haven’t done so already. Install and activate it on your WordPress site.

The filter plugin setup wizard will now open. Use it to activate your license key and choose other options to configure your filters. For example, you can:

  • Choose whether to use instant AJAX category filters or whether to apply filters when the customer clicks a button.
  • Configure filter visibility to deliver a good user experience to your customers. You can show or hide filters by default, either on mobile or desktop.
  • Customize the text - you can change the text that appears on your filters to make it more relevant to your store, and in your language.
  • Hide filters within space-saving toggles like this:
WooCommerce toggle product filters open closed

Step #2: Create filters and group filters together

The WooCommerce Product Filters plugin makes it easy to create a category filter:

  1. Navigate to Products Filters in the WordPress panel.
  2. Either open the default filter group or create a new one.
  3. On the 'Edit filter group', page, click the 'Add new filter' button.
  4. Fill in the details to add a new filter. You can set the name, filter by, filter type, and assign to group options. Set the filter data option to Categories to create a category filter.
  5. When you select a category filter, an option appears letting you choose the style of the WooCommerce category filter. This is where you choose whether you want checkboxes, a dropdown, images, etc.
  6. Repeat this step to create more filters. For example, you might want to create an attributes filter and price filter to go with the categories filter. This way, customers will be able to narrow down their search even further.
WooCommerce product filter styles types
Choose a style for your WooCommerce product categories filter

Tip: If you're creating category dropdown filters, then you can choose whether they will always be visible, or whether additional dropdowns will appear as the customer makes their selections. (Like in a car parts shop.) To do this, select the "Display categories and sub-categories as separate dropdowns" option.

woocommerce dynamic filter categories and subcategories in simple or different dropdowns

Step #3: Add filters to shop pages

It's easy to display a group of filters anywhere on your WooCommerce site.

You can configure the WooCommerce Product Filters plugin’s settings to enable filters on the shop page and archive pages. The filter group you select will appear on the product list pages that WooCommerce creates – including the shop pages, categories page, and product tag archives.

By default, the category filter will appear in a horizontal layout above the list of products. Optionally, you can choose to display the filters in a sidebar or on specific pages using shortcodes. Simply go to Appearance → Widgets, add a 'Product Filters' widget to the sidebar, and select the group containing your category filter:

WooCommerce product attribute filter widget

Alternatively, the category filter plugin comes with a shortcode which you can use to display filters anywhere. This is useful if you're listing your products in custom ways, for example using Gutenberg, Elementor, Divi Builder, or the [products] shortcode that comes with WooCommerce. Just copy the shortcode from the main list of filter groups in the admin, and add it where you want the filters to appear. (See the plugin documentation for a list of shortcode options.)

WooCommerce products shortcode with filter shortcode
An example of a store which has added a filter group above the products shortcode which comes with WooCommerce

This method is also useful when you're using WooCommerce Product Filters with third party plugins. For example, it integrates with the WooCommerce Product Table plugin so that you can create one page order forms with category filters:

WooCommerce Product Filters Table Integration
Using WooCommerce Product Filters with the Product Table plugin

Add category filters to WooCommerce today

Adding WooCommerce category filters to your online store makes it easy for customers to narrow down their product search and quickly find the product they’re looking for. The easiest way to do this is by using the WooCommerce Product Filters plugin.

This well-designed plugin makes it incredibly easy for non-coders and developers to add product category filters. It can save you valuable time and effort, while also enabling you to have a professional and organized store. And the end result? More sales for you.

Ready to set up a category filter in WooCommerce? Get the WooCommerce Product Filters plugin today!

Add resources to LearnDash courses

Do you need to provide LearnDash course materials to your students? Discover the easy way to add a searchable resource library to any LearnDash course or lesson. (And it works with other WordPress LMS plugins too!)

If you use LearnDash to create online courses in WordPress, then you'll know how important it is to provide learning materials to students. These reinforce their learning by providing further reading and giving students something to refer back to.

For example, you can enhance your LearnDash LMS courses by providing:

  • A downloadable course handbook.
  • Links to relevant third party websites.
  • Audio and video content.
  • Printable worksheets.
  • Links to community resources, such as the course forum.

The problem is that while LearnDash provides a 'Materials' tab for each course, it doesn't provide any special ways of displaying your resources. That's fine if your course just has a few materials, which you can list using bullet points or similar. But what if you have more course materials to display, or if you want to add resources within individual lessons?

Luckily, there's an easy solution. Install the Document Library Pro plugin on your WordPress site, and use it to add searchable libraries or course materials within your LearnDash courses or lessons.

And even better, everything in this tutorial works just as well with any other WordPress LMS plugin. That means that you can also follow the instructions to list course materials in LifterLMS, Tutor LMS, and others.

What sort of resource library can I create with Document Library Pro?

List LearnDash course materials in a tiled grid

The Document Library Pro plugin makes it easy to add course materials to WordPress and display them in a LearnDash course or lesson. It's easy to add resources one at a time or in bulk. Once you've done that, there are lots of flexible ways to display the materials in your courses:

  • 2 layout optionsChoose between an interactive table layout (recommended for listing large numbers of resources), or a stylish tiled/grid view (recommended for smaller numbers of materials).
  • List course materials anywhere in LearnDashUse a simple shortcode to list resources on the main course page, the 'Materials' tab, the course sidebar, or even within individual lessons.
  • Find resources more easilyBoth the table and grid view come with an optional search box, which students can use to find specific materials. The table view also has filter dropdowns so that students can filter by category, tag, and more.
  • Downloadable files and website linksDisplay any file type in the course resource library. As well as downloadable files, you can include links third party website links.
  • Embedded audio and videoDisplay embedded audio and video players directly in the list of course materials so that students can watch them on the page.
  • Multi-file downloadWith the table view, students can tick multiple documents and download them as a zip file in a single click.
playlist of playlists example

Step 1: Add your course materials

Now we've reached the practical part of this tutorial. First, I will show you how to install the Document Library Pro plugin and start adding course materials. Next, I'll show you how to display the learning resources in different locations within your LearnDash courses and lessons.

Setting up Document Library Pro

  1. Get the plugin and install it on your site.
  2. Once you activate the plugin, the setup wizard will open. Paste the license key from your confirmation email, and choose the default settings for your course materials. (Don't worry, you can override these options when you list them in LearnDash later - for example, if you want each list of resources to be different.) In particular, pay attention to the following settings:
    1. The content/columns option - This controls what information to display about each resource.
    2. Searching and filtering - If you will only list a few course materials in each location on your site, then disable these. If students need to be able to search for a resource, then enable these.
  3. Next, you're ready to start adding course materials to WordPress. There are several easy ways to do this, depending on how many materials you're adding:
    • Add them one-at-a-time via Documents → Add New. This is just like adding a WordPress post. In the 'Document Link' section, either upload a downloadable file, add a link to a third party website, or select 'None' if you will be pasting the resource directly into the page.
    • Go to Documents → Import and either create documents automatically by dragging and dropping files, or prepare a CSV file for bulk upload.
      Add document with link
      Add each resource as a Document and either upload a file or add a link URL.
  4. If you're planning to list different materials in different courses or lessons, then I recommend labelling each one using document categories and tags. That way, you can easily choose which resources to display in different locations. For example, you might have a different category for each course, and a tag to indicate which lesson each resource relates to.

After you have added some course materials (i.e. "Documents"), it's time to display them in your LearnDash courses.

Step 2: Get a shortcode to list the course materials

The Document Library Pro plugin makes it super-easy to list course materials anywhere in LearnDash. All you need to do is add a simple shortcode wherever you want the resources to appear.

The basic document library shortcode is [doc_library]. This will list all your resources using the default options that you chose in the setup wizard. You can use the 50+ shortcode options to choose which course materials to include, and what they should look like. However, for now, I will just focus on the most important option - how to list documents by category or tag.

Most LearnDash sites need to list different materials in different places. To do this, simply add the slug or the document category or tag that you want to display. For example:

  • [doc_library doc_category="course1"]
  • [doc_library doc_tag="lesson1,lesson2"] (to list the resources for more than one category or tag, add a comma between them like I have done here)

Step 3: Add a searchable library of course materials anywhere in LearnDash

Armed with your shortcode, you are now ready to add it to any location within a LearnDash course or lesson. This bit is super-flexible, so think about where students will find it most helpful to be able to access course materials.

Here are some suggestions:

Main LearnDash course page

Some LMS site owners like to display resources directly on the main homepage for each course.

  1. Go to LearnDash LMS → Courses in the WordPress admin.
  2. Click on the course that you want to list materials in. This opens the LearnDash 'Edit Course' screen.
  3. Paste the shortcode to the main description, wherever you want to list the course materials. I would normally recommend adding it underneath the main introduction/overview to the course.

The LearnDash Materials tab

LearnDash Course Materials Tab
Using Document Library Pro to add a searchable list of course materials to the LearnDash Materials tab

LearnDash provides a 'Course Materials' tab which is the perfect place to display materials which apply to the entire course.

  1. Navigate to LearnDash LMS → Courses.
  2. Click on a course.
  3. Go to the 'Settings' tab at the top of the page.
  4. Find the section called 'Display & Content Options'.
  5. Enable the 'Course Materials' tab and add the document library shortcode to it.
LearnDash add searchable course materials tab

LMS course sidebar

List course materials in LearnDash sidebar widget
Using Document Library Pro to display course resources in a LearnDash course sidebar

Perhaps you want students to have easy access to the learning materials wherever they are in the course. The best way to do this is to list the resources in a sidebar widget. That's because the sidebar visible on the main course and all the lesson pages.

To do this, simply paste the shortcode into a Text, HTML or Shortcode widget (or block if you're using the Gutenberg widget editor). For more fine-grained control, you can use a free plugin like Widget Options to choose which courses and lessons to display the widget on. That's important if each course has different learning materials, as you'll need a different widget and shortcode for each course.

Individual LearnDash lessons

Course materials in LearnDash lesson
Using Document Library Pro to list course materials within an LMS lesson

Finally, you might need to provide different course materials in different LearnDash lessons. For example, you might want to do this if:

  • Each lesson has different resources, such as accompanying audio tracks or lesson notes. It wouldn't make sense to add all these centrally for the entire course, as they would be muddled up!
  • You want to provide a dedicated 'Further resources' lesson at the end of the course. This avoids cluttering up the main course page.

Whatever your reason for listing course resources in individual LearnDash lessons, simply paste a shortcode wherever you want the materials to appear.

Bonus: List courses and lessons in a searchable table

Display LearnDash courses table
A searchable list of LearnDash courses.

Document Library Pro is fantastic for listing resources within a LearnDash course. But did you know that it has a sister plugin?

Posts Table Pro looks similar to the table view in Document Library Pro, but has an entirely different purpose. Instead of listing resources, it creates searchable tables of content from your WordPress site. And you've guessed it - that can include your LearnDash courses or lessons!

Normally, LearnDash lists courses and lessons in a professional-looking way that looks good but isn't very searchable. That's fine if you just have a few courses, but you may want to supercharge your course lists if you have a large number of courses. For big LMS sites, students like to be able to search and filter courses to quickly find something they're interested in. Posts Table Pro is perfect for this.

For full details, check out our separate tutorial on how to list LearnDash courses and lessons in a searchable table.

Add resources to your LearnDash courses today!

As you can see, Document Library Pro is the perfect way to add a searchable library of materials to any LearnDash course or lesson. You can:

  • List course resources in any course or lesson (or even as a LearnDash course sidebar widget).
  • Choose between a structured table view, or an attractive tiled layout.
  • Add a search box and filter dropdowns to help students find the materials they need.
  • Display downloadable resources, on-page resources, or third party links.

The plugin comes with a full 30-day money back guarantee. That way, you can try it with your LearnDash courses for up to a month and get a refund if you're not happy.

How to set up smart advanced search for your WooCommerce website Complete Plugin Guide

Want to replace the default search in your online store with WooCommerce advanced search? Keep reading to learn how.

The product search that comes with WooCommerce out of the box is pretty limited. It doesn’t let customers search for products by category, price, or attributes. Smart advanced search is all about helping customers find products quickly and easily, especially in larger stores.

So, instead of expecting customers to know exactly which search queries to run, you can help them narrow down their search to quickly find the exact products they’re looking for.

With this in mind, in this article, we’ll talk about how to:

  • Add advanced search to your online store, and;
  • How to further enhance this by adding advanced product filters.

The search functionality that comes with WooCommerce is pretty basic:

  • When a customer runs a search query, it doesn’t look for matches in the product description, attributes, custom fields, or reviews. It's just not very smart.
  • In addition to this, the default WooCommerce search is slow. After a customer runs their search query, they have to wait for a page refresh to see the search results.

This means that customers will have a difficult time finding what they’re looking for in your online store.

The solution is to use a WooCommerce advanced search plugin that can build on the default search with AJAX and advanced search logic. This way, you’ll be able to deliver a better user experience to customers - without refreshing the page.

You can add a WooCommerce search bar on its own but for best results, we recommend using it alongside a filtering plugin. A WooCommerce filter plugin lets customers narrow down their search and gives them a clearer idea of the types of products you sell.

Keep reading to learn how to add advanced search to WooCommerce, along with advanced filtering - the perfect combination.

WooCommerce Product Filters and YITH AJAX Search
A smart search box complete with advanced filter widgets (keep reading to learn how to add these to your own site!)

While regular WordPress sites can benefit significantly from implementing advanced search, WooCommerce stores are a beast of their own. As an online store owner, you need to add advanced search and product filter widgets to your WooCommerce store.

This is particularly useful for stores that sell dozens or hundreds of products such as grocery stores, clothing stores, cookware stores, hardware stores, and arts and crafts stores.

Here’s what you need to do to improve search on your WooCommerce store:

Step 1: Add a WooCommerce search bar to your store

First, you need to install an advanced WooCommerce search plugin. We recommend the YITH WooCommerce AJAX Search plugin.

It adds a predictive search engine to your WooCommerce store making it easier for customers to find the products they’re looking for. The search results load in real-time so customers won’t have to wait for a page refresh.

In addition to this, this advanced search plugin lets users search within specific product categories or tags as well as search by SKUs.

Get the YITH WooCommerce AJAX Search plugin and install it on your WordPress site.

YITH WooCommerce AJAX Search settings

Go to YITHAjax Search from the WordPress admin panel to configure the plugin’s settings.

General settings

You can set the WooCommerce advanced search input label and submit label here. The plugin also lets you set the minimum number of characters required to trigger autosuggest. For example, if you set it to 3, the plugin will start showing results to customers after they’ve entered three letters in the search box. You can also set the maximum number of results to show in the autosuggest box.

Search settings

The search settings tab lets you refine how the search functionality works on your online store. You can set which element types to search when a customer runs a search query and which metadata to search. For example, you can choose to have the plugin search in titles, excerpts, product categories, product tags, and content.

In addition to this, you can also show items for multiple-word searches, hide out-of-stock products from search results, and much more.

Output settings

The output settings tab lets you configure how the search results appear to customers on the front-end. You can choose where to show the product’s thumbnail, show or hide the product price, including product variations in search results, and more.

Once you’re done setting it up to your liking, preview the shop page on the front-end. The WooCommerce advanced search bar will look something like this when you run a search query:

YITH WooCommerce AJAX Search preview

Step 2: Add filter widgets

As mentioned earlier, online stores can benefit from having both a WooCommerce advanced search and filter widgets. They work together to help customers find what they’re looking for.

This gives customers the option to run a search query if they know exactly what they want or use the filter options to narrow down their search if they’re looking for a specific type of product. For example, customers looking for t-shirts within $20 to $50 can use a price filter widget to narrow down their search.

Install and activate the WooCommerce Product Filters plugin

Get the WooCommerce Product Filters plugin and install and activate it on your WordPress site.

You’ll receive the plugin files along with the license key in a confirmation email. Head over to WooCommerce SettingsFilters from the admin panel. Enter your license key.

Finally, click the Save changes button at the bottom of the screen to validate your license key.

Create filters and group filters

The next step is to create filters and group them together in a logical way.

To do this, head over to WooCommerce SettingsFilters from the WordPress admin panel and click on the Filters tab. Fill in the details to create a new filter.

Set the name, filter by, filter type, and assign to group options. Repeat this step to create as many filters as you’d like. Depending on the types of products you sell, you might want to create:

  • Categories filter
  • Attributes filter
  • Colors filter
  • Tags filter
  • Custom taxonomy filters
  • Price filter
  • Ratings filter
  • In stock filter
  • On sale filter

Once you’ve created all of the filters you need, structure the individual filters into logical groups. This makes it easy to add a widget for a group of filters on your WooCommerce site.

WooCommerce Product Filters also lets you choose the filter style. You can display the WooCommerce category filters as dropdowns, checkboxes, radio buttons, labels, or images. Think about which types of filter will work best with the WooCommerce advanced search field so that customers can easily find what they need.

Add filters to the page

Finally, it's time to decide whether to display the product filters in your store.

WooCommerce Product Filters and YITH AJAX Search

There are two options, so think about which location(s) will look best under the WooCommerce advanced search:

  • Filter widgetsThese can appear in any sidebar area, for example the left or right column of the WooCommerce Shop page. To add filter widgets, go to Appearance Widgets in the WordPress admin and add
  • Horizontal filtersThese filters appear below the advanced search field and above the list of products. On the plugin settings page, you can select which filter group you want to display above the products in the store.

It's time to add advanced search and filters to WooCommerce

Setting up smart advanced search for your store involves adding an advanced search bar and filter widgets to your WooCommerce website.

This way, customers can choose to search for products using the search bar if they know exactly what they’re looking for and also narrow down their search using filter options. That way, they can quickly narrow down the results by factors such as price and attribute.

To recap, we recommend using the following plugins to set up smart, advanced search in WooCommerce:

Ready to set up an advanced WooCommerce search on your online store? Get WooCommerce Product Filters today!