WooCommerce hidden store plugin

Lots of people ask us how to create a WooCommerce hidden store. This tutorial covers 2 methods to build a private store using 2 plugins: WooCommerce Private Store and WooCommerce Protected Categories. It will also help you choose which WooCommerce hidden store plugin is best for your website.

WooCommerce hidden store plugin WordPressYou might want a public-facing website that anyone can access, with a hidden e-commerce area that only people with the right credentials can see. Or you might want to hide your entire WooCommerce store.

At the end of this tutorial, you'll know how to create a WooCommerce hidden store or temporarily hide a store.

Your categories, products and other WooCommerce content will not appear anywhere on your public website. They won't appear in the navigation menu, sidebar widgets or on your homepage. Read on to learn how, or watch the video:

1. Before you start

To build a WooCommerce hidden store, you need a WordPress website with the WooCommerce plugin installed. You also need a WooCommerce-compatible theme - I used Storefront on my test site.

Once you have done this, you should add your WooCommerce products to their respective product pages in the usual way. You can also create the public pages of your website (if you're having one) such as Home, About and Contact.

Once you've done that, you're ready to hide products and transform your website into a hidden WooCommerce store.

2. Decide which WooCommerce hidden store plugin to use

First, you need to decide which of the plugins described in this tutorial to use for your WooCommerce hidden store. Read the 2 lists below and then skip to the method that best applies to you. Or to make it easier, take our quick quiz!

Do you:

  • Want to hide your whole WooCommerce store?
  • Need your WooCommerce shop page and ALL your products, categories and tags to be completely hidden from search engines, sitemaps etc?
  • Want all customers to have access to all the products within your WooCommerce hidden store?

If so, you need WooCommerce Private Store. Create your hidden WooCommerce products using Method 1 of this tutorial.

Do you:

  • Want to hide some of your WooCommerce products, while also having a public online shop?
  • Need to give different customers access to different products within your hidden store?

If you've answered Yes to either of these questions then you need WooCommerce Protected Categories. Build your WooCommerce hidden store using Method 2 of this tutorial.


Method 1 - Hide Products with the WooCommerce Private Store plugin

The WooCommerce Private Store plugin is the easiest way to make WooCommerce private. It creates a 100% WooCommerce hidden store, locking down your entire shop behind a single password. Alternatively, you can automatically unlock your private store for logged in users or specific roles. No one will know your hidden store exists unless you want them to! So if you need to disable a store temporarily, this is a great option.

This video tutorial will tell you how to set up your WooCommerce hidden store. I've also provided written instructions below.

Still not sure if our WooCommerce Private Store plugin is for you? Have a look at this customer review or check out the Montana Medicinals case study below.

If you want a Private Store, Look no further!!
This plugin has been a GODSEND for us. Perfect for Wholesale usage. Hide your store with one or two checkboxes within the plugin settings and BOOM! We now have a private store. Only unlockable with a username and password. Thank you, guys :)

Case study #1 - Sprezzatura Imports

Sprezzatura ImportsSprezzatura Imports login page distribute the Italian coffee brand, ICAF, across the US. As wholesalers, they need to keep their WooCommerce wholesale store hidden from the public. That's why they've password protected it with the WooCommerce Private Store plugin.

After registering, distributors can purchase products and gain access to the price list by logging in to the password protected area. Then, to make it even easier for distributors to login, the login page was added to the menu. As a result, the hidden WooCommerce store is just a matter of clicks away from the homepage.

Case study #2 - Montana Medicinals

WooCommerce Private Store Case Study Montana Medicinals

Montana Medicinals needed to password protect their shop to comply with laws in the state of Montana. That's because Montana Medicinals operate a medical marijuana dispensary and only pre-authorized customers are allowed to access the shop. That's why they used our WooCommerce Private Store plugin.

To limit access to those over 18, they also used a sitewide WordPress age verification plugin.

Within a matter of minutes of installing the WooCommerce Private Store plugin, the developers had created a password protected private store. Customers registered with Montana Medicinals are given a password to access the store.  Once a user has confirmed they're over 18, they can access the site. Anyone can read general information about getting prescriptions, but to view products and start shopping you need a password. Clicking on Shop or Products prompts the customer to enter their password. And without a password you can't access the private store.

Read on to find out how to hide WooCommerce stores or even temporarily disable online shops.

1. Install WooCommerce Private Store

WooCommerce Private Store Plugin Settings

  1. First, buy WooCommerce Private Store.
  2. Download the plugin files and copy your license key from the confirmation page or order confirmation email.
  3. In the WordPress admin, go to Plugins → Add New and upload the plugin files.
  4. Activate the plugin.
  5. Next go to WooCommerce → Settings → Private Store and paste your license key. Change the other settings as required.
  6. Create a store login page by adding the shortcode [store_login] anywhere on your site.

And that's it! That's all you need to do to hide products in WooCommerce and make your store private.

The next few steps will let you further configure your hidden WooCommerce store. However you've already done the most important bits and your store is secure and hidden.

2. Customise the WooCommerce login page (optional)

If you like, you can customise the text that appears above the password entry form for your WooCommerce hidden store. You can also change the text on the 'Submit' button. You can do all this on WooCommerce → Settings → Private Store.

Make any changes and then check the WooCommerce login page that you selected in step 1.6 (above) to ensure it looks ok.

You can also add text and other content above and below the password entry form, directly onto the WooCommerce login page.

WooCommerce hidden store

All WooCommerce hidden stores are different. You might want to include a link to your store login page on your public site. For example if you're creating a WooCommerce wholesale shop then you might want to add a 'Wholesale Login' page to the menu or header. Or you might want to keep your WooCommerce store hidden so that only people with the link can ever find it.

You can link to the store login page in the usual way for adding a link in WordPress.

4. Add additional store login forms (optional)

You can also add login forms anywhere else on your public site - for example on another page or sidebar widget. In this screenshot, I've added a login form to a text widget in the right hand column.

WooCommerce hidden store and hidden products

To do this, add the shortcode [store_login] to any page, post or text widget. (Or if you're a developer, you can add it elsewhere such as in the header or a popup login form.) This will insert a login form and the text that you added to the settings page in step 2.

Customers can use this to access your WooCommerce hidden store while everyone else remains locked out.

5. Add WooCommerce content to the menu

If you haven't already done this, you can edit your navigation menu to include links to the main WooCommerce store page or to specific products, categories or tags.

Go to Appearance > Menus and select the relevant page/products/categories/tags. Add them by ticking the correct box and clicking 'Add to Menu'. (If you add them as Custom Links then the WooCommerce hidden store plugin won't hide them.)

If you use this method then the shop page/products/categories/tags in your menu will be invisible until you enter the password to unlock the hidden store.

You can see this in action on the password protect WooCommerce plugin demo. When you first view the site there's no menu dropdown under the 'Hidden Shop' link. Once you enter the password, hover over 'Hidden Shop' and you'll see that links to various WooCommerce content have magically appeared!

6. Check your WooCommerce store is hidden

Now comes the fun part. Visit your public website and try to find your WooCommerce hidden store:

  • Try accessing any of your WooCommerce pages - e.g. your main Shop page, a product or specific category. You'll be taken to the store login page.
  • Do a Google search for one of your hidden WooCommerce products.
  • If you have a search box on your site, see if your hidden WooCommerce content appears in the results.
  • Check your XML sitemap.
  • Test the navigation menu.
  • Check that no WooCommerce widgets (e.g. Products, Product Categories or Product Filters) are showing.

We've developed the WooCommerce hidden store plugin to be completely private and hidden. If you find any loopholes (e.g. you might be using a WordPress SEO plugin that we haven't tested), let us know.

Once you're happy that your WC store is 100% hidden, go to your login form and enter the password. Now you can test what customers will see after they unlock the private store.

7. Give the password to your customers

When you're completely happy with your WooCommerce hidden store, you can start using it. Give the password to your customers. And if you haven't added a 'Store Login' link to your public site, give them the URL too.

Or if you've ticked the 'Logged In Users' box in the settings, they just need to log into their account and the store will automatically unlock. There's also an option to choose which logged in users roles can access the store.


Method 2 - Hide Products with WooCommerce Password Protected Categories

WooCommerce Protected Categories is most commonly used to hide one or more product categories within a public online shop. However the plugin can equally be used to create a WooCommerce hidden store. This video and the written instructions below will show you how to create a private shop and hide WooCommerce products.

1. Create a main protected category to hide products

The first step is to create a main product category for your WooCommerce hidden store and protect it, either with a password or user login. By having one protected category, you can then structure your entire store within this category:

  1. WooCommerce school category visibilityIn the WordPress admin for your website, go to Products → Categories. This is the standard WooCommerce category page, except that you will see a 'Visibility' section at the bottom left when you create or edit a category. This has been added by the WooCommerce Protected Categories plugin.
  2. Add a new category and call it anything you like. This will be the name of your WooCommerce hidden store.
  3. Click 'Protected' and either enter one or more passwords, or choose which users or roles will have access.
  4. Your new hidden category will appear in the list of product categories on the right. You can see that it's protected in the 'Visibility' column.
WooCommerce hidden shop schools category structure

Password protected categories is a good option for most WooCommerce hidden stores because you don't have to manage individual logins for each user. Everyone shares the password to your hidden shop, or you can give a different password to each person. Alternatively, choose the user or role protection options if you want each customer to have their own user account.

2. Add sub-categories to your WooCommerce hidden store

You can divide your WooCommerce hidden store into multiple categories if you like. (If not, skip ahead to step 3.)

Everything in your private WooCommerce store must be in a protected category or one of its sub-categories.

  1. Create each of your sub-categories using the 'Add new category' option on the left of Products → Categories.
  2. Select your main protected category as the 'Parent'.
  3. Leave the visibility as 'Public'. This is because the sub-category (and its products) will automatically be hidden using the same type of protection.

Once a customer enters the correct password or logs into their user account, it will unlock the entire WooCommerce store and all the hidden products. This saves them having to re-enter a password for each product as they navigate around the shop.

Note: If you want to create separate protected categories that are unrelated to each other, that's fine. You might want to do this if you want to create different private areas of your shop for different customers. For example, a photographer might create a separate hidden category to sell the photos for each client. You can then have a central login form which will direct each customer to their hidden category. 

3. Hide products by adding them to a protected category

Next, it's time to put your products within the protected categories you just created:

  1. Go to the Products section of the WP admin.
  2. Hover the name of each product and click the 'Quick Edit' link that appears.
  3. Select one or more categories and click 'Save'.
  4. Repeat for all your other products.

When you add new hidden products to WooCommerce in future, you will also need to assign them to your store's hidden categories.

Hidden WooCommerce store plugin

Even if you are hiding your Woo shop, you might still want to link to it. For example, you might want to add a link called 'Client login' or 'Trade area' to your homepage, header or footer. You might want to link to it from the navigation menu and either make it publicly visible so that anyone can access the login page, or set it to only appear after customers have entered the password.

Of course if you want to hide the fact that your website even has an e-commerce store, you don't have to link to it at all. Instead, you can give your customers the link directly (e.g. via email).

There are 2 ways to let people find your hidden WooCommerce store. You can either link to a central WooCommerce customer login page, or link to each hidden product category.

Add a central WooCommerce customer login page

If you're using password protected categories, then the shortcode [category_login] will add a WooCommerce customer login form. When customers visit this page, they can enter the password for any hidden WooCommerce product category. If the password is correct then they'll be redirected to the correct category page in your hidden WooCommerce store.

This option works well whether you have one or several protected categories in your WooCommerce hidden store. It's more flexible than linking directly to a protected category because you can add the WooCommerce login form to any page or widget. However I'll tell you how to do that next, just in case.

If you're using role or user protected categories, then you just need to link to a user login page instead. Use the free Peter's Login Redirect plugin to automatically redirect users to the correct hidden category after they log in. You can choose a different category for each user or role to be forwarded to - it's surprisingly flexible for a free plugin.

  1. Go back to Products → Categories. Hover over the name of your main hidden category. Right-click the 'View' link and copy the link. That will put the URL/address for your hidden category to your clipboard.
  2. Now go to wherever you want to add the link - e.g. your homepage, header or footer. Create a hyperlink in the usual way (either using HTML or the 'Insert/Edit Link' WordPress toolbar icon).

How to link to hidden product categories from the menu

  1. Go to Appearance > Menus.
  2. On the left, open up the 'Product Categories' section.
  3. Tick whichever protected categories you want to add to the menu OR the page where you have added the WooCommerce login form.
  4. Click 'Add to Menu'.
  5. The product categories will be added to the end of your menu on the right. Drag them to the correct position and click 'Save Menu'.

Now go back to your website and click 'Refresh'. If your private categories don't appear in the menu, that's because the plugin is set to only show them in the menu after you have unlocked the category. If you go to the main category for your WooCommerce hidden store and enter the password, the links will then appear in the menu.

To make the menu links visible to everyone, you can change this setting at WooCommerce → Settings → Products → Protected Categories.

5. Choose how your hidden WooCommerce product categories behave

The WooCommerce Protected Categories plugin lets you choose how the hidden part of your store appears publicly. You can change the plugin settings as follows:

  1.  Go to WooCommerce → Settings → Products and click the 'Protected Categories' link at the top.
  2. Tick and untick the boxes to choose whether to hide your WooCommerce hidden products and categories from menus etc.
  3. This page also lets you change the text that appears above the 'Enter password' box and the wording of the button. For example you might add instructions on what to do if a customer loses the password.

Depending on your WordPress theme, there might be publicly visible links to the cart which aren't hidden. If you want to hide a WooCommerce store, you probably don't want this to appear on your public website.

If you use a fully featured theme from ThemeForest or similar then the theme options might let you hide the cart icon. If your theme doesn't have this option then you can hide it using CSS. (We recommend Codeable for small coding tasks like this). Or even better, ask your WordPress developer to code the cart link to only appear when there are products in the cart. This will automatically hide it from your public-facing store because customers can only add products to the cart after unlocking the category!

7. Add the WooCommerce cart widget

If you've hidden the main links to your cart, you can use the WooCommerce cart widget to display the cart in the sidebar. This might be the right or left hand column on your WP site.

  1. Go to Appearance → Widgets.
  2. Find the sidebar area where you want the cart to display.
  3. Drag the 'WooCommerce Cart' widget from the left hand side to the correct sidebar area.
  4. Tick the 'Hide if cart is empty' box in the widget settings and click 'Save'.

By ticking 'Hide if cart is empty', the cart widget will only display when customers have products in their cart. Since your Woo store is hidden and people can only add products after they unlock the category, this stops it from appearing on your public website. Even if you have the same sidebar on the public and private areas of your website, the cart will only appear when there are products in the cart.

This means that it doesn't matter if you have hidden the shopping cart from the header, as it appears in the sidebar instead.

WooCommerce cart widget

8. SEO - Block your WooCommerce hidden store from search engines

Finally, a note about SEO.

I won't cover this in-depth as it depends on your WordPress SEO plugin. As a general principle, you will want to mark all of the following as noindex:

  • All the default Woo pages (Cart, Checkout, My Account and Shop).
  • The Products custom post type.
  • Product category pages.
  • Product tag pages.

If you have an XML sitemap then you need to tweak the settings to exclude.

Use the documentation for your WordPress SEO plugin to find out exactly how to do this.

This will hide the hidden areas of your WooCommerce store from search engines while allowing search engines to index your public pages.

If you're worried about this, you may be better off using Method 1 and WooCommerce Private Store which handles this automatically.

By default, the products in your hidden product categories will appear in the website search but if you click them then you will be prompted for the password. This also applies to other WooCommerce content such as your main shop page, categories and tags.

You can stop your hidden WooCommerce products from appearing in the WordPress search results at all. To do this, you need to set the "Catalog Visibility" option for each product to "Hidden". You can find this option in the 'Publish' section on the right hand side of the Edit Product screen:

WooCommerce hidden store plugin

This advice applies to the default search feature that is built into WordPress. If you're using a different search plugin, it's worth testing this to make sure it works for your plugin.

If you're worried about hidden WooCommerce products appearing in the search, you may be better off with Method 1 and our WooCommerce Private Store plugin. That plugin hides products from the search results automatically.

Further reading: How to Build a Private WooCommerce Members Only Shop

Wrapping up

In this tutorial, we have used 2 different plugins to create a WooCommerce hidden store. We've added links to it - either to the menu or to anywhere else on your website. We've dynamically added links and widgets so they only appear once people have unlocked a category.

Both plugins let you hide products and protect a WooCommerce store within your WordPress website. WooCommerce may be most popular for public online shops, but it's just as good for hidden WooCommerce shops. Whether you want to hide WooCommerce wholesale areas, customer-specific products, temporarily hide stores, or create a WooCommerce age restricted area, you can do it with these plugins.

I hope the tutorial has been useful for you. Use the plugin documentation for WooCommerce Protected Categories or WooCommerce Private Shop to learn even more about your chosen hidden store plugin. Or if you like the plugin, become a Barn2 affiliate and earn 30% commission for recommending our plugins!

Are you using one of these methods to hide products in WooCommerce? I'd love to hear how it's working for you - please add a comment below.

WooCommerce bestselling products widget
List popular products on pages, widgets - anywhere you like!

I love discovering new ways to use our bestselling WooCommerce Product Table plugin. Today I'm going to share a new method for how to list bestselling or popular products anywhere on your website.

There are lots of reasons why you might want to list bestselling products in order of popularity. Maybe you want to list the most popular products on your website homepage. This is a neat way to draw attention to your main products, and give the most valuable estate to bestselling products making the most sales.

There are many benefits to using this method to list popular products:

  1. List bestselling products anywhere on your site. This could be the homepage, sidebar text widget, within a blog post - absolutely anywhere!
  2. Choose how many products to include in the list.
  3. Add extra columns of data, such as the product image, description, and stock status.
  4. Include an add to cart column so that people can buy popular products directly from the list!
  5. Choose whether or not to show actual sales figures for each product.
  6. The dynamic list of bestselling products automatically updates in real-time based on actual sales figures. No need to manually update it - ever.

Keep reading to learn how to set it up.

How to list bestselling products in a WooCommerce table

The WooCommerce Product Table plugin provides 100's of different ways to list products. This is how to set it up to list bestselling or popular products in a table anywhere on your site.

First, set up the list popular products plugin

  1. Get WooCommerce Product Table and install it on your site.
  2. Go to WooCommerce → Settings → Products → Product Table and activate your license key from the order confirmation email.
  3. Look through the settings and choose how you want your product tables to behave. If you want to create more than one product list - for example, a WooCommerce order form listing all your products, plus a separate list of bestselling products on the homepage - then this is possible. The plugin settings page sets the defaults for all your product tables, and you can override this for each individual table as needed. (Tip: If you're listing bestselling products then I recommend hiding any unnecessary elements such as the search box and total number of products. It's best to keep a list of WooCommerce most popular products clean and simple.)
  4. Next, edit the page where you want to list bestselling products. Use the [product_table] shortcode to list all your products.

Next, configure the list to show popular products

So far, you've created a product table listing all your products. Now, you need to edit the shortcode to show popular products only. (Note: You can do all this by choosing the options on the settings page, instead of editing the shortcode. However, I'm telling you the shortcode method so that you can add other types of product table elsewhere on your site.)

Edit your shortcode as follows:

[product_table sort_by="popularity" sort_order="desc" product_limit=5]

This will list the 5 bestselling products based on the number of sales. The most popular products will be listed first. You can change the product limit from 5 to the number of bestselling products you'd like to list.

Your popular products WooCommerce list should look something like this (depending on which columns you added on the plugin settings page):

WooCommerce list bestselling popular products

Can I list the number of sales for each product?

Yes. To do this, add 'cf:total_sales' to the list of columns in your WooCommerce product table. For example, your shortcode might be:

[product_table columns="image,name,description,add-to-cart,cf:total_sales" sort_by="popularity" sort_order="desc" product_limit=5]

WooCommerce display number of product sales

By now, you know how to list your WooCommerce bestsellers on any page, based on the number of sales. You can also add the product table shortcode anywhere else on your site.

For example, there's no WooCommerce popular products widget built into the WooCommerce core. It's easy to create your own bestselling products widget by adding the WooCommerce Product Table shortcode directly to a text widget. This is a nice way to draw attention to popular products by listing them throughout your store.

In the below screenshot, I added the WooCommerce Product Table shortcode directly to a text widget:

[product_table columns="image,name" sort_by="popularity" sort_order="desc" product_limit=3]

WooCommerce popular products widget
List of popular products added to a text widget, with columns for image and product name

Where can I get the plugin?

As you can see, WooCommerce Product Table provides lots of fabulous opportunities for listing bestselling products based on popularity. Think about how it can increase sales in your own store.

WordPress post table blog index

'If you run a successful WordPress blog – or are planning on building one – chances are you post a lot of content. While dedicated readers may check out every new article as soon as it's live, you’ll want a way to draw everyone's attention to the posts you want them to see.

A WordPress post table is the perfect way to do just that. It enables you to list some or all of your blog posts in an attractive, organized tabular grid format.

You can provide key information about each article to encourage clicks. You can make it easy for readers to search and filter the table for specific content.

In this guide, we’ll explain exactly what a WordPress posts table is and what you can do with it. Then we’ll show you how to set one up easily, using the Posts Table Pro plugin. Let’s get right to it!

What a WordPress post table is (and why it’s so useful)

Most blogs rely on search fields and sidebar menus to help readers find the posts they’re looking for. These features are a good start, of course. However, they often require visitors to sort through pages of search results or complex archives. This isn't a good way for readers to find information about a particular topic.

A WordPress post table plugin provides a better way to organize and display your blog posts:

A Posts Table Pro demo.

As you can see, this is an organized list of blog posts presented in a table format. A post table provides a lot of key benefits. For instance, you can:

  • Display all your posts, one or more specific categories, or a carefully curated collection.
  • Choose exactly what information will appear in the table, so you can peak visitors’ interest effectively.
  • Enable readers to search through, sort and filter the table at will, in order to find what they want quickly.

What’s more, a WordPress post table plugin offers an attractive way to show off your content. It doesn't even need to take the place of any other part your blog, since you can add it to any page. Instead, you can use it as an additional way to navigate your blog, like a WordPress post index.

Let’s look at how to create a table of blog posts for your own WordPress site.

Case study - WordPress post table for Journey with Omraam blog

WordPress post index page plugin

The inspiration for our Posts Table Pro plugin originally came from one of our web design clients, Journey with Omraam. They wanted a WordPress post table to use as an index for their growing blog.

The solution was a table layout allowing users to search and sort all their blog posts. The post table includes various information to encourage users to click through to read each post. There are columns for post title, content, publish date, author and a filterable list of categories. The search box above the table lets users search for blog posts with any keyword.

See the Journey with Omraam post index in action.

As you can see, adding a post table made Journey with Omraam's blog much more user-friendly. Next, I'll share how you can make your own blog easier to navigate too.

How to create a compelling WordPress posts table for your blog (in 3 steps)

WordPress is a powerful platform, which enables even complete beginners do many things easily. Unfortunately, creating a fully-featured table of any sort is not one of them. While you could put together a table by hand using code or a manual entry table plugin, the result is likely to be underwhelming. It would also take you a lot of time, as you'd have to add each blog post to the table by hand.

Instead, let me introduce you to the Posts Table Pro plugin:

This dynamic table plugin helps you build an attractive and feature-rich WordPress post table in minutes. Your blog posts are automatically displayed in a searchable table layout with filters - no manual data entry. Plus, you can customize your posts table to look and work just the way you want.

In the following walkthrough, I'll show you how to use this WordPress plugin, and offer some tips for creating the perfect posts table.

Check out the Posts Table Pro demo!

Step 1: Install and activate Posts Table Pro

The very first thing you’ll need to do (if you haven’t already) is purchase the Posts Table Pro plugin.

When you do this, you’ll be provided with a few things. The most important will be a zipped folder containing the plugin itself, and a license key for activating it. Make sure you save both somewhere safe.

Upload the plugin to your WordPress admin by going to Plugins → Add New → Upload Plugin, selecting the zip file, and activating it. The setup wizard will then guide you in a step-by-step process to create your first table.

Activating the Posts Table Pro plugin.

Step 2: Configure your WordPress post table settings

Technically, you could skip this step and jump straight to adding a WordPress posts table to your site. This would generate a table using the plugin’s default settings. However, you’ll probably want to customize your post table at least a little, to better match your vision.

Upon the plugin's initial installation, an automatic setup wizard will launch, providing a step-by-step guide to creating your first table. After creating the table, you can customize its appearance. Additionally, you have the option to generate new tables anytime by going to Post Tables → Add New.

Select an exclusive name for the table that will only be used internally and appear on the list of tables in the WordPress admin. Afterward, select the post type you wish to showcase. If you haven't created a content type yet, you can quickly generate one using the free Easy Post Types and Fields plugin.

Choose what type of content to display

Customize columns in WordPress table plugin

This is a vital setting since it’s what lets you customize which information appears in your post table. You can add a column by choosing the type of column from the dropdown menu and clicking 'Add'. The added columns appear in the list of columns above, and you can reorder them by dragging and dropping the sort icon on the left or the column title.

You’ll find a list of all the column options in the Posts Table Pro documentation. At the least, we’d suggest displaying each post’s title, category, date, and featured image. You may also want to include the name of the author, as well as either the content or excerpt column (although using both might be confusing to readers).

Customize search and filter settings

WordPress table builder plugin with filters

You can incorporate filters into your table to assist users in refining their selections. Keep your target audience in mind while considering which filters would be most beneficial. Filters appear as dropdown menus above the table, and you can add as many as you require.

The filter options available are determined by the post type selected on the first page. For example, typical blog posts can be filtered by categories and tags, in addition to any custom taxonomies added.

Choose how to sort the table

Change sort order WordPress table

You have the ability to personalize the sorting options for your table by selecting the default sorting option and sort direction. This gives you control over the sequence in which the table is presented to your users.

Step 3: Add your WordPress post table to a page

It’s finally time to add a WordPress post table to your website. Technically, you can place it on any page, post, or custom post type. However, we recommend using a brand new page, so your table will be front and center. Alternatively, you may want to embed it on your home page.

Upon completing the creation of your table with the Post Table Pro plugin, the setup wizard will verify that you have finished and furnish you with directions for presenting the table on your WordPress site. You have two options for showcasing the table:

  • Using the 'Post Table' block in the Gutenberg editor or
  • Copying the shortcode from the table builder and pasting it anywhere on your site. This gives you the flexibility to position the table on any page, regardless of its content.

Here's an example of what your table layout might look like:

An example of a WordPress post table.

You’ll see your WordPress posts table, configured using all the settings you chose in the previous step. If there’s anything you want to modify, you can go back to the settings page and do so. Any changes you save will automatically be applied to your table via the shortcode, so you won’t have to recreate it.

That’s it! Your WordPress post table is fully functional and ready to go. Now, all you have to do is make sure it’s prominently placed and/or linked to your blog, so readers can start benefiting from it right away.

Where to get the plugin

Once you have a lot of content on your blog, you’ll probably start wondering if there are better ways to organize and display it. A WordPress post table is one of the best ways to make a blog easier to navigate. It’s simple to set up, yet robust when it comes to functionality.

As we’ve shown, the Posts Table Pro plugin makes showing off your content this way easy. All you have to do is:

  1. Install and activate Posts Table Pro.
  2. Configure your WordPress post table settings.
  3. Add your WordPress posts table to a page.

Do you have any questions about how to configure your WordPress post table? Ask us anything in the comments section below!

Image credit: pxhere.

Add WooCommerce to WordPress

Adding a WooCommerce storefront to your existing WordPress website can be a very profitable move. An e-commerce area lets you sell products or services directly to visitors, and when set up properly it can practically run itself. However, you’ll need to think carefully about exactly how you add WooCommerce to WordPress without affecting your live site.

For best results, you’ll want to develop your new store privately, and only make it available to customers once it’s completely ready to go.

Most people do this by creating a separate staging site, adding WooCommerce, and then overwriting the main site when it's ready to launch. This causes various problems, such as version control issues and potential loss of data when you need to make changes to the live site. Fortunately, there's an easier way.

In this quick tutorial, we’ll explain how to add WooCommerce to WordPress seamlessly. You'll use the WooCommerce Private Store plugin to create a hidden development area. It's like adding a 'coming soon' page to WooCommerce or putting your store in maintenance mode, while the rest of your website remains public.

When your site goes live, you'll deactivate the private store plugin and your WooCommerce store will instantly become available on your existing website. You won't have to worry about version control or staging sites, and it just takes a few minutes to set up.

Let’s get to work!

Why you should use a hidden development area to add WooCommerce to WordPress

Many people start up a blog or a small business site, only to later decide to add in a storefront. Selling products and services through your website does take a little work, but the benefits are more than worth it.

WordPress doesn’t offer a lot of e-commerce specific functionality, so you’ll need a dedicated tool for setting up your new shop. We highly recommend WooCommerce:

An example of a WooCommerce store.

The free WooCommerce plugin adds a fully-featured store to your website, without disrupting any of your existing pages or content. No matter how established your site is, setting up an integrated WooCommerce shop is quick and painless.

However, you will want to spend a little time working on your store before making it live – creating key pages, uploading products, and so on. You'll want to add menu links to your store pages, and icons linking to the cart and checkout. What’s more, you won’t want this work-in-progress to be publicly available. Instead, you’ll want visitors to continue seeing the original website until the new store is designed and ready.

The easy way to add WooCommerce to WordPress

There are a few ways you can handle this. For instance, you can set up a separate staging site that’s a carbon copy of your live website, add WooCommerce to WordPress, and then merge your changes. Unfortunately, this is a time-consuming, complex process that’s fraught with the potential for errors.

Clearly, you need a better solution. That’s where WooCommerce Private Store comes into the picture:

This plugin has a number of useful applications. Its primary use is enabling you to set up a private storefront, where users have to log in before they can view its contents. For example, some people use it to create a private members-only club. However, it also lets you temporarily hide your new WooCommerce store while it’s being developed. Then, you can easily make the shop publicly available when you’re done setting it up.

Check out the WooCommerce Private Store demo!

This is a much simpler and more temporary solution than creating a full staging site and then copying it over your live site. To illustrate, let’s take a look at how the process works from start to finish.

How to add WooCommerce to WordPress using a hidden development area (in 4 steps)

The following steps will show you how to set up a hidden WooCommerce store on your live site. You'll also learn how to make it visible only when you’re ready to do so. All you’ll need to get started is a WordPress site, and the WooCommerce Private Store plugin.

Step 1: Add WooCommerce to WordPress

The first thing you’ll need to do is add WooCommerce to WordPress. You won’t actually be setting up your store yet – after all, you’ll want to be sure it’s hidden first. However, WooCommerce will need to be installed before you configure your hidden development area.

Fortunately, WooCommerce is a free plugin that’s simple to set up. Log into your WordPress dashboard, and navigate to Plugins > Add New. Use the search bar to find 'WooCommerce', and click on the button labeled Install Now:

Installing the WooCommerce plugin.

After a few moments, another button will appear, this one labeled Activate:

Activating the WooCommerce plugin.

Select that one as well, and WooCommerce will be ready to go on your site. At this point, you’ll be able to start setting up your shop and adding products. Before you do that, however, it’s important to make sure your fledgling store is safely locked away.

Step 2: Set up your hidden development area

If you haven't done so yet, go ahead and purchase the WooCommerce Private Store plugin. You’ll be provided with a zipped file containing everything the plugin needs to work, which you’ll need to install on your site.

After that, navigate to WooCommerce > Settings in your dashboard. Select the Private Store tab:

Setting up the WooCommerce hidden development area plugin

Enter the license key you were given when you bought the plugin. Then, save your changes. This will fully activate WooCommerce Private Store, making it ready to use.

The best part is that this is all you need to do. Once the plugin has been activated using a valid license key, it will automatically hide WooCommerce from public view. This means that all pages, features, and products associated with WooCommerce won’t be available on the front end. If anyone does try to view those areas, all they’ll see is a login form:

A WooCommerce store login form.

You can customize the login form on the plugin settings page. However, it's not very important because it's unlikely that anyone will see it anyway. All the WooCommerce-related pages are hidden from public view, so the only way someone would ever see the login form is if they guessed the URL of one of these pages.

Show the WooCommerce hidden development area to logged in users or specific roles

Of course, you want logged in administrators to be able to access the hidden development area. That's how you'll develop and test your WooCommerce store, while keeping it hidden from other users.

There are two ways to do this. Use the first option if your website isn't set up to allow normal visitors to create accounts. That's how most non-WooCommerce websites work. However, if you let people create accounts for other purposes - such as blog commenting or membership plugins - then use option 2 instead.

  • Option 1 - Tick the 'Logged In Users' box on the plugin settings page, then select the 'administrator' from the user roles option that appears underneath. This will automatically unlock the store for all logged in administrators, while leaving it hidden from guests and other user roles.
  • Option 2 - Leave the 'Logged In Users' box unticked on the plugin settings page, and enter 1 password which will unlock the store.

Once administrators have unlocked the store using either of these methods, they will be able to see the full WooCommerce store. This includes viewing menu links to the store pages in the front end, and viewing those pages. They can also add products to the cart and test the checkout process. This lets you and your development team work on the new WooCommerce area while it remains hidden from everyone else.

Step 3: Create your WooCommerce store

Now that you’ve made WooCommerce inaccessible to visitors, it’s time to set up your store:

Setting up your WooCommerce store.

We won’t go through that entire process here, since there’s plenty of information elsewhere that can help you out. Still, let’s summarize the basic steps involved in getting your WooCommerce store ready to go:

  1. Go through the WooCommerce setup wizard. In just a few screens, you’ll be able to set up your store’s basic features and enter crucial information about pricing, shipping, and more.
  2. Configure your store’s settings. While the WooCommerce wizard covers the most crucial options, there are a lot of other settings you may want to customize to better suit your needs.
  3. Add each of your products or services to the store. This can be done in the Products tab, which offers lots of options to fully customize your offerings.

We recommend taking your time with this process. Check out each product and store page on the front end, and walk through the buying and checkout stages as though you were a customer. You’ll want to ensure that your store looks and acts exactly the way you want it to before you make it live.

Step 4: Make your WooCommerce store visible to the public

When you’re confident that your store is ready to launch, you’ll need to make it visible to the public. Fortunately, this is the easiest part of the entire process.

All you need to do is deactivate the WooCommerce Private Store plugin. To do that, go to the main 'Plugins' list in the WordPress admin, and click to Deactivate WooCommerce Private Store.

This will automatically unhide your hidden development area and make your store available for all to see. At this point, you can uninstall the plugin if you like. Alternately, you can keep it deactivated on your site, in case you need it in the future. (For example, you might want to temporarily hide your WooCommerce store while making changes or updates.)

Conclusion

If you want to build a positive reputation online, your website should always look professional and fully-functional. This means that if you need to make large-scale changes, you’ll want to keep your development work hidden from public view. That includes keeping your in-progress store private while you add WooCommerce to WordPress.

As we’ve demonstrated, the process of doing this is remarkably simple when you use WooCommerce Private Store. It's much quicker than installing WooCommerce on a separate site and merging with the live site, and avoids all the problems.

To recap, here are the four steps you’ll want to follow:

  1. Add WooCommerce to WordPress.
  2. Set up your hidden development area.
  3. Create your WooCommerce store.
  4. Make your WooCommerce store visible to the public.

Do you have any questions about how to add WooCommerce to WordPress? Ask us anything in the comments section below!

Image credit: pxhere.

WooCommerce video gallery plugin: Sell videos or add video to products

Discover the easy way to embed, stream and sell videos on your WooCommerce store. We'll do it with the best WooCommerce video gallery plugins.

Are you looking for a way to showcase or sell videos on your WooCommerce store? There are several ways that you can use videos on your store:

  • Creating a WooCommerce video gallery - Display preview or promo videos on your main shop pages to grab visitors' attention. This is a great way to boost sales of any type of product, whether you're selling videos or something else such as clothing.
  • Selling videos with WooCommerce - You can also use WooCommerce to sell actual video products, which customers can then download or watch online.
WooCommerce sell videos plugin
An example of a WooCommerce video gallery

Keep reading to learn how to use WooCommerce video gallery plugin to display videos on your shop pages, as well as how to sell videos in WooCommerce. Customers will be able to watch a video preview for each product without leaving the page, and add the product to their cart right from the same gallery.

I'll also provide some tips on other ways to display video in WooCommerce, such as in a "Quick view" product lightbox, or in a dedicated "Video" tab on the product page.

WooCommerce Product Table lets you display all or some of your WooCommerce products as a flexible grid/table. You can control exactly what information displays in your table including add to cart buttons and - you guessed it - product videos.

The advantage of a table view is that your customers can watch videos for multiple products on one page - there's no need for them to keep going to the individual product page. You can do this by adding embedded video players directly to the product table on the shop page. This is ideal for WooCommerce video streaming, as customers can view the video directly on. your website.

Similarly, your shoppers will also be able to select variations and add products to their carts right from the video gallery - again, no multiple tabs or page reloads required. Whether you're selling videos with WooCommerce or just want to use video to promote other types of product, it's a more convenient approach for visitors.

Below, we'll show you how to set up this WooCommerce videos plugin. After that, I'll show you some extra ways to display video in WooCommerce, and also how to sell video products.

Step 1: Add video to WooCommerce products

To get started, you need to add an embedded preview video to the individual products that you want to display with WooCommerce Product Table. This is how customers will stream the video online.

The process is the same whether you're selling videos with WooCommerce or just adding video to a regular product. You do have some choices for where and how you add the video, though.

First off - how.

The easiest way is to just embed a video player from YouTube or Vimeo. If you don't want YouTube branding, you can pay for one of Vimeo's unbranded plans, or a service like Swarmify. This can seamlessly import and serve YouTube video but with an unbranded player.

Finally, you can always use the self-hosted WordPress video player shortcode, though there are some good reasons not to.

Now, the where.

If you're not already using the Product short description field, that's the easiest spot to add your video. In fact, that's what we'll do for this example. All you need to do is embed your video in the text editor using normal WordPress oEmbed functionality. This is incredibly easy - simply paste the URL of your video from YouTube, Vimeo or similar.

woocommerce add video to product

But if you're already using the short description field for something else, you can also create a custom field to embed your videos using a free plugin such as Advanced Custom Fields.

Finally, add videos to all the products you want to display with the WooCommerce video gallery plugin.

Step 2: Create a product table for your WooCommerce video gallery

Once you've added video to the relevant products, you need to configure WooCommerce Product Table to work as a video gallery plugin.

Install the plugin and then go to WooCommerce → Settings → Products → Product tables.

While you should look at all the plugin's settings to see what interests you, if you want to create a WooCommerce video gallery, we definitely recommend that you configure these settings as a minimum:

  • Columns - Make sure to include the summary or the custom field that you added to hold your video. And if you're planning to add quick view to your video gallery, then you should also add a quick_view column. Learn more about columns.
  • Add to cart column - Configure how you want your add to cart button to function, including variations.
  • Lazy load - If you have lots of products with WooCommerce videos, you might want to enable lazy loading for performance reasons.
  • Shortcodes - Make sure to check this box so that your embedded WooCommerce video players load properly.
WooCommerce sell videos

This page sets the plugin's defaults. You can also always override those defaults, or add additional options, by directly using shortcode parameters.

Step 3: Add the video gallery to WooCommerce

Now, you just need to choose where in your store the WooCommerce video gallery will appear. There are two ways to approach this:

  1. Tick the relevant boxes on the plugin settings page to show the product table layout on your main shop and category pages.
  2. Use the [product_table] shortcode to add WooCommerce video streaming galleries to other pages.

If you decide to use the shortcode method, then you can list WooCommerce products by their:

  • Category
  • Tag
  • Post ID
  • More

For example, if you have a category called "video" then you can target it like so:

[product_table category="video"]

But if you only added video to a few products, you could also directly target them by post ID, tag, or lots of other conditions.

Once you have set up the video gallery in WooCommerce, it will look something like this:

woocommerce video gallery plugin example

Can I embed video playlists?

If you want to show more than one video per product, then you can embed entire video playlists into the WooCommerce video gallery. You can easily do this using the video playlist shortcode that comes with WordPress itself.

WooCommerce video gallery with playlist
WooCommerce audio and video gallery containing an audio file, a single video, an audio playlist, and a video playlist

Use the following instructions to add a video playlist to any of the fields you're displaying in the product table:

  1. Click the 'Add Media' button.
  2. Choose the 'Create Video Playlist' button on the left.
  3. Upload and select the videos you wish to include in the playlist.
  4. Click the 'Create a new video playlist' button on the bottom right.
  5. On the next screen, add any captions for each video and change the settings as required.

Creating video playlists in Gutenberg

At the time of writing, the above instructions only work if you're using the classic WordPress editor and not Gutenberg. Hopefully Gutenberg will add a video playlist button in future. In the meantime, you can create video playlists by adding the following shortcode to a Gutenberg 'Shortcode' block:

[playlist type="video" ids="12345,23456,34567,45678"]

Replace the ID's with the actual ID of each video you wish to include in the playlist. You can find these by going to the 'Media' section of the WordPress admin, clicking on a video, and looking at the URL at the top of your browser tab. For example, if the URL ends /wp-admin/upload.php?item=12345 then you need to add the ID 12345 to the shortcode.

Add WooCommerce videos to a quick view lightbox

So far, you've learned how to create a WooCommerce video gallery with embedded video players in the main product list. You can use the widths option in WooCommerce Product Table to choose how much space the video player column takes up. However, videos inevitably require a fair amount of vertical space. If you want to list products in a more compact way, then it might be better to show the videos in a quick view lightbox for each product:

WooCommerce video streaming in lightbox

Using WooCommerce quick view is better than just adding video players to the single product page. That's because you don't want to take customers to a separate page for each product - that slows things down and takes them away from the main product list. By watching sample WooCommerce videos and adding to the cart from a quick view lightbox, the customer remains on the same page. This stops them from getting lost and encourages them to add multiple products to the cart.

Here's how to set it up:

  1. Sell video in WooCommerce quick view lightbox
    Install WooCommerce Quick View Pro.
  2. Go to WooCommerce → Settings → Products → Quick view, enter your license key and choose your quick view settings. Make sure you enable the short description, as this is where you've added the video players. You can choose whether or not to show other sections such as the product images or add to cart buttons.
  3. Add quick_view to the list of columns on the Product Table settings page (WooCommerce → Settings → Products → Product tables).

And that's it!

Add a video tab to the product page

Add video tab to WooCommerce product page

And finally, let's think about where else you can display video on the WooCommerce product page. One way to do this is to add a dedicated 'Videos' tab, which allows you to display video without cluttering up the page layout. You can do this with the WooCommerce Product Tabs plugin, which lets you add extra tabs to the product page.

How to stream videos on WooCommerce

We have already touched on WooCommerce video streaming, but I want to make sure it's totally clear before we move on.

Steaming videos involves allowing people to actually watch the video on your website. They don't download it - they watch it in an embedded video player embedded on the website.

This means that you can use several of the methods that we already discussed to enable video streaming:

Whichever method(s) you choose, it's very straightforward to add video streaming to WooCommerce. Just host the videos on any streaming service such as Vimeo or YouTube, and paste the URL wherever you want them to appear on your WordPress site.


How to sell videos on WooCommerce

Above, you learned how to create a customizable WooCommerce video gallery. However, what if you're specifically looking to sell videos on WooCommerce?

In that case, the same basic steps apply for creating the video gallery, but you'll want to go about creating your WooCommerce products a little differently.

That is, in the example above you learned how to display videos in a gallery as a way to showcase a product. Now, you're going to learn how to make the video the product itself.

Can you sell videos on WooCommerce?

Most people think of WooCommerce in terms of selling physical products that are shipped to the user. However, it's equally well-suited for selling virtual or downloadable products.

This means that you can sell videos on WooCommerce whether you're selling physical videos to post, or virtual videos to stream online or download.

Types of video you can sell with WooCommerce

You can use WooCommerce to sell absolutely any type of video. This includes:

  • All video genres - fiction, nonfiction, films, movies, educational video.
  • Any type of video - animations, commentary, drone footage, behind-the-scenes event coverage, how-to video tutorials, interviews, presentations, promotional product videos, stock footage, motion graphics and presets, After Effects project files, Apple Motion or Cinema 4D templates, Flash elements files, video overlays and textured, Premiere Pro templates, social media video templates, video effects and transitions.
  • All video file types - MP4, WEBM, AVI, QuickTime, WAV, and many more.

Whatever sort of video you want to sell online, keep reading to discover the best way to do it.

Setup instructions

The basic steps to sell video in WooCommerce are as follows. I'll be focussing on selling videos for streaming online or downloading, but you can also sell physical videos to post to the customer:

  1. Upload the video file somewhere accessible.
  2. Mark products as Virtual and Downloadable.
  3. Add video file to WooCommerce product.

Let's go through them in detail…

Step 1. Upload video file somewhere accessible

To get started, you'll need to upload the video file itself to a place where visitors will be able to download it.

For a small file, you can just upload it straight to your server via your WordPress Media Library.

However, if you have larger files, or if you're planning to have a ton of downloads, a better option is to use a dedicated storage service like Amazon S3 or DigitalOcean Spaces. These services are affordable, reliable, and lower the burden on your site's server.

Step 2: Create a virtual, downloadable product

Next, create a new WooCommerce video product:

  1. Go to Products → Add New. 
  2. Add the product title - this will usually be the WooCommerce video name.
  3. Type a main description of the video. This will help with the SEO of the video product page by being crawled by search engines.
  4. Choose any categories or tags for the video. Customers will be able to filter by these to find specific videos.
  5. In the 'Product data' section, make sure to check the boxes for Virtual and Downloadable:
    WooCommerce video gallery to sell video

Step 3: Add download or streaming link

After you tick the 'Downloadable' box in Step 5 (above), you should see a new Downloadable files section appear in the General tab of your WooCommerce video product.

If you want customers to download the video they bought, then fill this in as follows:

  1. Click the Add File button and insert the download link for where the video is saved. As we discussed in Step 1, this might be in the WordPress Media Library or it might be on a third party video host like Vimeo.
  2. Add a download limit and expiry date if required.

Alternatively, you can allow people to stream the video online instead of downloading it. To do that, simply enter the URL of wherever they can stream the video. This might be a hidden page on your WooCommerce site containing the embedded video. It might also be a link to a third party video hosting site such as Vimeo.

Once you're finished, Publish the video product as you normally would.

Sell video with WooCommerce

Step 4: Add custom fields to WooCommerce video products (optional)

When you're selling video online, there might be extra fields of product data that you need to display about each video. For example, perhaps your WooCommerce video gallery needs fields for resolution, video length etc.

You can easily add custom fields using a free plugin like Advanced Custom Fields or Easy Post Types and Fields. Simply use your chosen plugin to add as many fields as you like to the 'Products' post type. You can then use WooCommerce Product Table to display them as extra columns in the video gallery.

What happens when customers purchase a video product?

When someone purchases the video from your WooCommerce store, they receive an email containing a unique link to download the video file.

For best results, combine this method for selling videos with the earlier section of this tutorial on how to create a WooCommerce video product gallery. That way, customers can watch the embedded video preview directly on your shop pages, and then purchase the full video.

What about piracy?

With the example above, even people who didn't purchase a video would still technically be able to download it if someone shared the link with them.

Now, digital piracy is something you're never going to stop, so a lot of store owners will just live with that and focus on finding more paying customers.

But if you are concerned and want to at least make it harder for people to share the download links, you can use the Download limit and Download expiry options to limit access:

WooCommerce sell video online

Just be aware that these restrictions might frustrate some legitimate customers who want to download a file multiple times or in the future.

And that's it - you just added a user-friendly WooCommerce video gallery to your store. You also learned how to sell video online in WooCommerce, either for download or streaming.

Not only can visitors browse videos for multiple products without leaving the page they're on. They can also add products right to their carts for a smooth, friction-free checkout process.

The WooCommerce Product Table plugin makes it easy to add video to your shop pages. Get it today and start promoting your products with video:

Have any other questions about how to use a WooCommerce video gallery plugin? Leave us a comment!

WooCommerce One Page Checkout Plugin

If you're creating an order form for your e-commerce store, then you're likely to want a WooCommerce one-page checkout too. Keep reading to learn how to enable WooCommerce one-page shopping.

WooCommerce one-page checkout lets customers select products and complete their purchase within a single page. One-page shopping is excellent for user experience because it's fast, so the customer is less likely to get frustrated and you're less likely to have a high cart abandonment rate.

The perfect WooCommerce one page checkout plugin needs two things:

  1. An easy way to view and find products, select options, and add them to their order without leaving the page. This involves listing WooCommerce products in a quick one-page order form.
  2. A WooCommerce checkout form - either underneath the product order form or in a popup on the same page.

Unfortunately, setting up WooCommerce one-page shopping isn't as easy as it sounds. Most order form plugins meet the first requirement but come short with the second one. And the official WooCommerce.com extension for one-page checkout isn't great at displaying products.

This tutorial will tell you how to meet both requirements - no coding required! You'll learn how to list products in a quick order form, with a choice of two types of WooCommerce single page checkout.

But first, let’s cover the basics – what is a one-page checkout?

What is WooCommerce one-page checkout?

WooCommerce Flux checkout with popup cart
A WooCommerce one-page checkout can either appear on the page under the products, or as a popup on the same page

As I’ve mentioned in the intro, WooCommerce single page checkout allows customers to select products and complete their purchases – all on one page. While this may seem like it should be a standard feature of WooCommerce, it’s not, as the traditional process is much lengthier.

Typically, a consumer needs to add products to their shopping cart then go to the cart page and then go to the checkout page. There, they need to fill in their personal information, payment information, shipping address, choose shipping options, etc.

So, there are multiple steps a customer needs to go through until they get to the point of making a purchase. And, in the simplest of terms, this is bad. The more steps there are, the more likely the customer is to abandon their cart somewhere along the way.

A WooCommerce single page checkout encompasses all of these steps on one page, allowing for a faster checkout experience and lowering the chance that a customer will give up on a purchase. All in all, one-page checkout allows the customer to make a quick purchase.

Why do I need a WooCommerce one-page checkout plugin?

There's a very basic principle behind letting customers choose products and complete their purchases on a single page. WooCommerce one-page shopping is all about reducing the length of the order process and speeding up the customer journey. In addition, it can also help with reducing your cart abandonment rate.

Research shows that 10% of abandoned carts happen because the checkout flow is too long. Customers simply get fed up and go elsewhere! The number of clicks is a big factor. The more pages the customer has to click through to make a purchase, the less likely they are to complete it.

You can speed up the purchase process by using a WooCommerce single-page checkout plugin to list your products and allow customers to complete their journey. This type of one-page shopping helps increase conversion rates, resulting in more sales for you. You're happy, the customer's happy - everyone wins!

That one-page checkout provides a much better user experience and increases conversions is definitely not new information. This is why even WooCommerce has created its own one-page checkout plugin. But there’s a catch.

The problem with the WooCommerce one-page checkout plugin

The official WooCommerce one page checkout plugin lists products in a very basic way, which is fine for displaying one product or a small number of products with a checkout form underneath. However, the official WooCommerce one-page checkout plugin is useless for product selection if you have a large number of products and product types. And if you want to enable your customers to search, sort, and filter the list of products, the template fails to deliver.

Any eCommerce store with numerous products needs to seriously consider user experience and make things easier for the customer. This involves listing products in a user-friendly way. They have to be easy to find. All the important product data needs to be visible at once, without having to visit multiple pages. Most importantly, customers need to be able to choose quantities and compare variations without too much hassle. Most built-in templates will give you limited capability to achieve this.

Luckily, there are two easy ways to improve on this. I'll tell you about them next so that you can choose which one is best for your WooCommerce store.

2 ways to create a WooCommerce one-page checkout

So far, you've learned how your store can benefit from WooCommerce one-page shopping, as well as how a WooCommerce one-page checkout can optimize your customer journey. Now, we'll explore two ways you can implement one-page checkout in your online store.

Method 1: Display a popup checkout on your main shop pages

WooCommerce one page checkout popup
Use the WooCommerce Fast Cart plugin to add a popup checkout to your shop pages

I think that the most user-friendly way to enable one-page checkout in WooCommerce is to display the checkout in a popup window on the same page as your products. That way, you don't add clutter to your shop pages - and yet customers can quickly check out on the same page where they add products to their cart.

With this type of WooCommerce single-page checkout, the checkout form appears in a popup instead of below the list of products. In this case, the customer journey looks like this:

    1. The customer visits the product table page and uses the search, sort and filtering to find the products they want.
    2. They select the products and add them to their cart.
    3. A popup immediately appears over the product table. The customer makes any changes to the selected products, enters their details and completes the purchase without having to leave the page.

You can easily add this type of WooCommerce one-page checkout with the Fast Cart plugin. This lets you display a popup cart and/or complete checkout on the same page as your products. When a customer adds a product to the cart, you can either display the popup on-page checkout automatically, or let them click on a floating cart icon to launch it.

Popup one-page checkout setup instructions

  1. Install WooCommerce Fast Cart on your WordPress site.
  2. Go to the WooCommerce Fast Cart settings page at WooCommerce → Settings → Fast Cart.
  3. Choose how you want the fast cart to work. In particular, I recommend enabling the 'Direct Checkout' and 'Auto Open' options. Together, these make the checkout appear as soon as customers add products to the cart. It's the fastest way of using the plugin for a WooCommerce one-page shopping experience.

Method 2: List products in a searchable table with one-page checkout underneath

I realise that when you Googled for one-page checkout solutions (if that's how you found this article!) then you were probably imagining adding the checkout below the list of products. That's possible too, and I'll tell you how to do it now.

At the start of this article, I told you about the limitations of using the WooCommerce One-Page Checkout extension on its own. The main problem was that it lists products in such a basic way, with no way to search or filter them. That's where WooCommerce Product Table comes in.

This bestselling WooCommerce one-page checkout plugin lists products in a searchable order form, allowing for a quick browsing experience. You can list hundreds or even thousands of products, with quick search and sort filters so that customers can easily find what they want. After adding products to their order, customers can add their details and checkout, directly on the order form page!

WooCommerce one page checkout with product table
An example of one page shopping in WooCommerce

The customer journey

This option provides a different customer journey from method 1:

    1. The customer visits the product table page and uses the search, sort and filtering to find the products they want.
    2. They choose the products and add them to their cart.
    3. Once the products are added to the cart, your customer can check out using a WooCommerce checkout form directly below the product table. This is where they can review and modify their order, add their name and address, choose shipping and payment methods, and complete the purchase from the single page checkout.

You'll need two plugins to implement this method:

  • WooCommerce Product Table to list products in a searchable one-page order form. This will allow you to list all your products in a single easy-to-navigate table which you can place on any page. You can choose which columns of information to include, add product variation dropdowns, and even add a search box and filters. The lazy load option lets you list hundreds or even thousands of products, neatly separated by pagination links.
  • WooCommerce One-Page Checkout to display a checkout form underneath the list of products.

Together, this will create a seamless checkout experience for your customers. They won't have to switch between pages to find each product they are interested in. It's true one-page shopping, regardless of how many products you have.

Setup instructions for WooCommerce one-page checkout

I'm assuming you already have a WordPress website with the free WooCommerce plugin installed and some products added. If so, you can start implementing either type of single-page checkout right away.

Step 1: install WooCommerce Product Table

  1. Install the WooCommerce Product Table plugin on your WordPress site.
  2. Once activated, head to WooCommerce → Settings → Products → Product Tables and enter your license key.
  3. Look through the list of product table options and choose the ones you need. You can basically set up your product tables however you like. Here are some tips for creating an effective WooCommerce one-page shopping experience:
    • If you want to list lots of products, you'll probably want to choose the 'Checkbox' add to cart option. This adds a multi-select option so that customers can add lots of products to the cart at once.
    • If you're selling variable products, then choose either the 'dropdown' or 'separate' variation options. This lets customers choose variations directly in the order form instead of having to click through to the single product page. (After all, that would defeat the purpose of a WooCommerce one-page checkout!).
    • Enable the 'Quantity' option so that customers can buy more than one of each product.
    • To prevent people from leaving the one-page order form and clicking through to the single product page, enter 'none' in the 'Links' option. This disables links to the single product page.
    • Finally, here are some additional recommendations:
      • Do NOT enable 'Ajax Cart' in the 'Add to cart behavior' option. By leaving this box unticked, the page will reload when customers add products to the cart, displaying the one-page checkout underneath with the correct products.
      • Keep the number of rows per page fairly low so that customers don't have to scroll too far to view the checkout under the table. If you have more products than the number of rows, then pagination links will appear under the table so that they can view more products without leaving the page

Step 2: create a landing page listing your products

Gutenberg for WooCommerce Product Table block
WooCommerce Product Table lists your products above the one-page checkout, like this

This is where we create the page that we'll be using as our WooCommerce single-page checkout:

  1. Create a new page (Pages → Add New).
  2. Add a shortcode to the page: [product_table]. This will list all your products with the options you chose on the plugin settings page. There are lots of options to edit the shortcode, for example, if you want to list specific products only. You can add as many product tables as you like to the page - just add the shortcode more than once.

Bonus: Add quick view buttons (optional)

The beauty of WooCommerce one-page shopping is that everything happens on one page. Product tables are great because they're an opportunity to show more information about each product.

However, what happens if you want to show more than will fit into a product table - but you still want the benefits of a WooCommerce one page checkout?

WooCommerce Product Table Quick View Magnifying Glass

The solution is to add quick view buttons to the product tables. You can do this by installing WooCommerce Product Table's sister plugin, WooCommerce Quick View Pro. Naturally, it has full compatibility with the Product Table plugin. Customers can use these buttons to view additional information about a product in a quick view lightbox, without being taken away from the shopping page.

Get Quick View

Step 3: Add one-page checkout to WooCommerce

Next, you need to add one-page checkout to your product table page.

  1. Install the WooCommerce One Page Checkout add-on.
  2. Edit the product table page that you created in Step 2, above.
  3. Add the following shortcode underneath the product table shortcode: [woocommerce_one_page_checkout].

Your finished WooCommerce order form page should look something like this in the WordPress back end:

Woo One Page Checkout Plugin

This will create a WooCommerce single-page checkout with a product table at the top, and the checkout form below.

WooCommerce Product Table with checkout on same page

Which type of WooCommerce one-page checkout is better for me?

Now we've looked two methods for adding one-page checkout to WooCommerce. Method 1 involves displaying a popup checkout on the same page as your products. In contrast, method 2 adds a checkout form underneath a searchable product order form.

Both are good layouts from a functionality standpoint. However, you may want to consider your customer's behavior and preferences when choosing the specific WooCommerce single-page checkout you want. If your customers usually buy a single or just a couple of items per session, you may want to go with the pop-up checkout option. It's fast and seamless and allows for a very quick checkout:

On the other hand, if your customers tend to purchase several different items at a time or would prefer a more traditional checkout experience, you may want to opt for the second option and have the checkout form below your products. This way, they can take their time to add products to their cart one by one (or remove products, if they change their mind) and scroll down to the checkout form once they're ready to place the order.

Bonus: add and edit WooCommerce checkout fields

If you want to edit the fields on the WooCommerce checkout, you can easily do this with WooCommerce Checkout Field Editor.

This handy plugin is perfect if you want to streamline your checkout process or even add custom checkout fields. For example, you can use it to collect extra information from each customer. This will appear on the WooCommerce one-page checkout, whether you've added it below the list of products or in a popup checkout.

You can also use the editor to write more persuasive calls to action and change the purchase button - instead of the standard 'buy now' CTA, you can easily do some A/B testing to find out what works best for your customers.

Can I disable the WooCommerce cart completely?

If you're using Method 1 (i.e. Fast Cart with a popup checkout), then you can easily disable the cart. Simply enable the 'Direct Checkout' and 'Skip Cart Page' options on the plugin settings page. That way, customers can only access the checkout and there are no back doors to the cart page.

However, this is a bit trickier if you're using Method 2. Even though the checkout appears below the list of products, there are still ways for customers to access the cart page. For example:

  • The cart link will still appear in your navigation menu and/or header (depending on your theme and menus).
  • When the customer adds products to the cart, they will see a success message linking to the cart.
  • If your WooCommerce order form page includes a sidebar with the 'WooCommerce Cart' widget, then the contents of the cart will show after they add products. This widget includes links to the cart and a separate checkout page.
WooCommerce add to cart success message
An Add to Cart success message with a link to the Cart page.

It's absolutely fine to use these checkout features alongside one-page checkout. It gives customers a choice. For example, if they want to edit the contents of their cart, they can click through to the cart page and check out afterwards. This is handy because WooCommerce one-page checkout lists the products in the cart without any means to edit them.

However, some online store owners prefer to completely disable the WooCommerce cart and just use the one-page checkout. That's fine too. There are 2 ways to do this:

Option 1 - redirect cart to checkout (non-technical solution)

The simplest solution is to add a 301 redirect to stop people from accessing the cart page. You can do this by installing the free Redirection plugin and redirecting the cart page to wherever you like.

For example, you might redirect the cart page to the WooCommerce checkout. This is the checkout page defined in the WooCommerce settings, and is separate from the one where you've added a product table.

Alternatively, you could add an anchor link to a point underneath the product table on your one-page checkout page, and create a redirect so that people are taken there when they click on a cart link. When a customer adds a product to the cart and sees the success message with 'View Cart' link, clicking it will scroll them down the page to the WooCommerce one-page checkout under the product table.

Redirect WooCommece cart to checkout

Option 2 - hide all cart links (requires coding)

For a more comprehensive solution, you can write some custom CSS code to hide the success message and all the cart links.

We have partnered with Codeable to provide customization services for our plugins. If you don't know how to hide the cart links yourself, then I recommend posting a job on Codeable. Their WordPress experts will send you a quote.


Get the best WooCommerce one-page checkout plugin now!

In conclusion, a WooCommerce one-page checkout can greatly enhance the shopping experience for your customers. It can increase your conversion rate, and ultimately boost your online sales.

By streamlining the checkout process and reducing the number of steps, you can eliminate unnecessary barriers. This makes it easier for customers to complete their purchases.

With the right implementation and customization, a one-page checkout can be a powerful tool for any WooCommerce store looking to improve their checkout process and drive growth. So, take the time to consider which type of one-page checkout is best for your business.

To add one-page checkout to WooCommerce, you can either:

Both options offer a great way to reduce cart abandonment by optimizing how customers complete their purchases. Choose the right plugins for your needs, and make your customers happy 😄

Here's something you might not be aware of regarding WordPress and its abilities. If you want to create a WordPress intranet - a hidden area for your company - you don't need a separate website to make it work.

With just a little tweaking under the hood, you can have both your official, customer-facing website and your staff-only website working on the same instance of WordPress.

In this post, we're going to tell you how to build a private WordPress intranet step by step. You'll learn why you'd want an intranet in the first place, and how you can use it to make your organization's day-to-day more streamlined.

WordPress intranet plugin

What's a WordPress intranet anyway?

Okay, let's start with the main question, so what is an intranet and why would a business need one?

Simply speaking, a WordPress intranet - in a way we're tackling it here - is a private website that is only accessible to you and the people in your organization/business. It could also be a private area within a website that is otherwise public.

Why your business needs an intranet

Maybe it doesn't. But I dare you to read through the following list of possible use cases and not find at least one that gets you excited:

  • A WordPress intranet can be your place to store staff documents, contract templates, policies, and other documents that come in handy. Also a great place to keep them updated all in one spot.
  • An internal community for your company. Something like your own Facebook, just private (cough!).
  • An internal knowledge base. An extensive directory of procedures, advice, and processes on how to handle various common tasks in your organization.
  • A customer support code of conduct. Most businesses have at least some customer support aspect to them. You can use an intranet to write down all the best practices for handling customer requests.
  • An in-company news channel. A place for you to share what's been going on within the company. The kind of stuff that you don't necessarily want to share with the whole world on a public forum.
  • Internal forms. For example, annual leave form to book holiday breaks, overtime, set team meetings, etc.
  • A place to store training materials for new and existing employees. Those can be staff induction articles, videos, or anything else that works for your business.
  • An internal forum for your team to discuss things, as an alternative to Slack.
  • A staging platform for new content before it goes live. For instance, you can publish a new blog article privately on the intranet, get feedback from your team, and only then make it available to the world.

A private intranet can help you foster team building and onboard new employees. Not to mention that they make it clear where to go if a team member has questions on anything related to how the company goes about conducting its business.

How to build an intranet on WordPress

Private WordPress Intranet PluginWith the why out of the way, let's now discuss the how of building a WordPress intranet.

There are lots of reasons to use WordPress to create your intranet site. For starters, WordPress will save you many, many thousands of dollars compared to using an enterprise solution like SharePoint. And despite being free to use, WordPress also wins the SharePoint vs WordPress debate due to its huge flexibility 💪.

Here's what you need to get started:

  • A working WordPress website with a suitable theme. You can use any WordPress theme, or you might like an intranet-specific theme such as Woffice. And;
  • Password Protected Categories - the plugin that's going to make your intranet possible.

That's what you'll use for your intranet. The rest of your website remains public as usual. The Password Protected Categories WordPress intranet plugin works by letting you create one or more private categories of posts or other content.

The great thing about this is that you don't have to create a separate website for your main company website and your intranet. You can run both from the same WordPress installation.

Your staff and other colleagues can access the WordPress intranet in a choice of 2 ways, depending on how you set up the intranet plugin:

  1. Basic password protection - Staff and colleagues unlock the private intranet by entering a password. You can create 1 password for everyone to share, or multiple passwords. The important point is that you don't need to worry about creating a separate WordPress user account for each employee, so it's easier for you to manage.
  2. Individual user accounts - If you prefer, you can protect your WordPress intranet so that it's hidden from guests and automatically becomes visible to logged in users depending on their role. This option is more secure but you have to create a user account for each employee, so you may or may not want this.

Here's how to get the plugin and set it up with either option:

1. Get Password Protected Categories and install it on your site

You can get the plugin by clicking here:

When you complete your order, you'll get access to the download page for the plugin. Alongside the download link, you'll also see your personal license key. Take note of that; you'll need it in just a minute.

Getting the plugin to run on your site is simple. With the ZIP archive of the plugin ready on your desktop:

  1. Log in to your WordPress dashboard, go to Plugins → Add New.
  2. Click on the Upload Plugin button.
  3. Select the plugin's ZIP file, click on Install Now and then on Activate.

Lastly, go to the plugin's settings panel in Settings → Protected Categories, and enter your license key.

license

You don't need to go through all the other settings on this page (unless you want to). The plugin will work just fine on its default settings.

2. Begin building your WordPress intranet

The first thing that needs doing is some good ol' brainstorming. Look through the list of the possible WordPress intranet use cases from above, and note down the ones that make the most sense in your organization.

  • Do you need an internal social network? Or just a knowledge base? Maybe an internal catalog of training videos?

Whatever that might be, list them all!

Your next task is to figure out which content types you'll use to create the intranet with.

Like with most things WordPress, you get to use posts, pages, and custom post types.

Now, one important thing - or two:

  • If you're not using any additional plugins to create the intranet with - meaning, you're just taking standard content and putting it on your intranet - then you'll most likely utilize only posts and/or pages.
  • If you want to use third-party plugins (for a knowledge base, for example) then those will probably come with their own custom post types. This is great news, actually, because the Password Protected Categories plugin works with those no problem.

Let me give you two examples:

  • A) If you want to build a simple internal knowledge base for your organization then you'll probably stumble upon a plugin called Heroic Knowledgebase. It's a neat solution, and it does its job. Once you install and activate it, you'll see a new custom post type in your sidebar called Knowledge Base. You can hide intranet articles within this custom post type via Password Protected Categories. I'll show you how in just a sec.
  • B) If you want your own, manually created custom post types, then you can do that as well. For this, we recommend using the Easy Post Types and Fields plugin. It allows you to create any number of custom post types, and then use those post types as part of your WordPress intranet. This scenario might be a better solution if you want to keep your intranet and normal website sections separate in the WordPress Dashboard. We have a whole tutorial on how to set up custom post types with Easy Post Types and Fields plugin here.

Again, at the end of your brainstorming session, you should have a general list of the things that you want to make part of your WordPress intranet. Your list will also include the content types that you're going to use.

3. Put it all together

Here's a possible use case when building a WordPress intranet:

  • Let's say you've done your brainstorming and you've decided to use just posts and pages as the core of your intranet. You're going to feature some training videos there (for onboarding new employees) along with text articles on how to handle customer requests coming in through your contact channels. A fairly typical setup for a business that's growing.

First, a word on how the Password Protected Categories plugin works:

Quite simply, it hooks up to your site's category structure and allows you to protect any number of those categories. You can make them either password protected (people need to know the password to access), or role protected (they need to have an account on your site to access with the appropriate user role).

In either scenario, what we're actually going to be doing is creating new categories, assigning your intranet content to them, and then making them invisible to the public.

This is arguably the simplest way of building an intranet, for a couple of reasons:

  • you don't need to be able to code - you can just check off a couple of settings boxes and you're done,
  • you don't need to know server settings or understand access rights on a server level - how intranets used to be handled old school in more traditional enterprises,
  • and you can create new intranet content freely just like you're creating your other WordPress content.

4. Set your intranet categories

If you're just using posts for your intranet, simply go to your WordPress dashboard and then Posts → Categories.

The Password Protected Categories plugin has added some new options here:

Those radio buttons are where all the magic happens!

Start by creating your intranet categories. It's best to make them stand out from the standard blog categories. Some possibilities:

  • intranet-videos
  • intranet-knowledge-base
  • etc.

Example:

WordPress intranet category

So far so good. Now let's look at the main setting.

Creating password protected intranet categories

visibility

If you check Password protected, you'll be able to assign a password to your new category. Click on "+" if you want more than one universal password for everyone to share.

In this scenario, only the visitors who know the password will be able to see the content assigned to the new intranet category. Just give the password to each staff member.

If you want multiple categories for your intranet, just add sub-categories to your main password protected intranet category. Leave them set to 'Public' and the plugin will automatically be protect them with the same password as the main category.

Restricting intranet categories to logged in users

Alternatively, you can select the 'User roles' box. This will make the intranet category visible to logged-in users with the selected roles only.

You can select any of the standard WordPress roles, such as 'Subscriber', and add each staff member to that role. Alternatively, you can install a free plugin called User Role Editor to create a special role for your employees and give them access to private intranet content. We have a separate guide on how to set it up.

The User Roles option makes the most sense if all the people in your organization have their user accounts on the site. If that's not the case, you're probably better off sticking with the Password protected option, since you can give the password to anyone, or even create separate passwords for separate categories that make up your intranet.

Finish creating your intranet categories

Once you set the password or restrict your new intranet category based on user role, click Add New Category. From this point on, every post that you assign to this new category will become part of your intranet and not accessible to anyone from the outside.

This is what an unauthorized person will see when trying to access your password protected WordPress intranet content:

no access

This sort of intranet structure works well for storing training videos that you can then share with new employees. You can simply embed those videos inside new blog posts (e.g. from YouTube) and then assign them to your WordPress intranet categories.

But there's one thing missing:

5. Create a hub for your intranet content

Having a set of blog posts for your intranet content is all fine and dandy. However, we also need a hub to link to all those posts and make them available from a single location.

One option is just to use the default category pages that come with your WordPress site. Something like, yoursite.com/category/intranet-videos/. This will work automatically. No need to tweak it in any way. In other words, you can share a link like that with your team members and they will be able to access all the content just fine. It will automatically update as you add new intranet content to that category in future.

6. Include pages on your intranet

As I mentioned earlier, your intranet doesn't need to only consist of posts. You can use custom post types and pages as well.

Making custom post types part of your intranet is pretty similar to how you work with posts. When you navigate to any custom post type in the WordPress dashboard, you will see a similar option in the sidebar menu, labeled Categories:

knowledge base

You can either password protect or make those categories private just like you did with posts.

For pages, though, there's an additional step required. By default, there are no categories for pages in WordPress. To add them, follow this guide.

Essentially, this will allow you to assign your pages to categories, and thus make some of those categories private / password protected. So whether you want to create a WordPress intranet using posts, pages or a custom post type, we've got you covered.

List your WordPress intranet content in a searchable table with filters

By default, when your staff and colleagues unlock your private intranet categories, the posts inside will be listed in the default layout for your theme. This will normally look the same as your blog page, with posts listed in reverse date order.

Most WordPress intranets need to be displayed in a more structural way. This needs to include extra data, quick-find filters, and direct download links.

Here are two plugins that can help with this, depending on the type of content in your WordPress intranet site.

List posts and pages with Posts Table Pro

WordPress index plugin example
You can list any type of intranet information with Posts Table Pro

If your intranet contains normal WordPress pages, posts or a custom post type you've created, then you can list them in a searchable table using Posts Table Pro.

Multimedia product gallery

It's simple to set up and perfect for all kinds of text information. This table structure is also great for displaying multimedia content such as training videos.

People can quickly find and watch the videos directly on the intranet page.

Create an intranet document library

For example, if you're using your intranet as a staff document library then you will want to list the documents in a searchable layout.

Something like this:

WordPress document library plugin

For full instructions, follow our WordPress document library plugin tutorial. Use it with the instructions above to make your document library private on the intranet site.

Where to get the WordPress intranet plugin

At this stage, you have your intranet fully created and available to anyone who either has the password or sufficient access credentials (user account on your site).

No matter if your intranet is just one additional category, or a full, 100-page long repository, the Password Protected Categories plugin can handle it and make things easily customizable.

What do you think of the whole WordPress intranet concept? Does it sound like something your business can benefit from?

Again, click on the button below to get the Password Protected Categories plugin and start building your WordPress intranet now:

To learn more about this intranet WordPress plugin, check out the official knowledge base here.

Gravity Forms User Submitted Posts Plugin

Welcome to our comprehensive tutorial on how to display Gravity Forms entries on the front end of your WordPress website!

As the leading WordPress form plugin, Gravity Forms allows you to create and manage advanced forms with ease, streamlining your data collection process. However, many users are left wondering how they can showcase this valuable information on their site's front end in a way that is both visually appealing and functional. That's where the Posts Table Pro plugin comes into play.

In this in-depth, step-by-step guide, we'll walk you through the entire process of how to integrate and display Gravity Forms Entries with Posts Table Pro to effortlessly display user-submitted content in a searchable, filterable table. This powerful combination not only makes the submitted entries easily accessible to your website visitors but also provides them with an interactive and engaging experience by using the Gravity Forms view entries on front end.

The end result will look something like this - a neat table listing your users' form submissions!

Member directory dynamic filters
A WordPress member director listing user-submitted profiles

Display any type of user-submitted content from Gravity Forms

This tutorial is perfect for a wide range of applications, including community-driven websites, online directories, event listings, or any project where you want to create a seamless experience for users to view and interact with Gravity forms front end posting submitted date. By the end of this guide, you'll have a thorough understanding of how to:

  • Set up and configure Gravity Forms to capture user-submitted content.
  • Install and activate the Posts Table Pro plugin.
  • Integrate the two plugins to display Gravity Forms entries in a sortable and filterable table on your website's front end.
  • Customize the appearance and functionality of your table to match your site's design and meet your specific needs.

With detailed instructions, helpful tips, and best practices, this tutorial aims to be the ultimate resource for unlocking the full potential of Gravity Forms and Posts Table Pro. So, whether you're a seasoned WordPress professional or a novice just getting started, join us as we dive in and explore the powerful capabilities of Gravity Forms and Post Table Pro plugins working together in harmony.

Why display user-submitted information in the front end?

There are lots of reasons why you might want to let Gravity Forms get submitted data and display Gravity Forms Entries on your website:

  • WordPress member directory with user profiles If you're using a WordPress member directory plugin to list members or consultants in a table, then you might want to allow people to register and upload a profile. If you don't want to install a heavyweight membership or e-commerce plugin, then it can be simpler to use Gravity Forms for member registration and profile upload.
  • WordPress directory website If you're creating any type of directory, such as a business or local events directory, then it makes sense for users to submit listings. If you're trying to keep your website simple, then you can avoid installing a full directory theme or plugin by using Gravity Forms and a WordPress table plugin instead. You can even take payment via PayPal and hold submissions for moderation by the administrator before they're published!
  • WooCommerce user-submitted products If you're using WooCommerce then you can let users submit products to sell in your store.
  • User-submitted events If you're using a WordPress events plugin such as The Events Calendar, then your users can submit events to display Gravity Forms Entries on your website
  • WordPress document library with user-submitted documents Lots of websites use a WordPress document library plugin to allow users to type in the search bar to find and download documents. If you need a way for users to submit their own documents, then you can do this with Gravity Forms. However, unlike the other use cases listed above, there's actually an even simpler option! As an alternative to Gravity Forms, just install the Document Library Pro plugin and use its front-end upload form to let users submit downloadable documents to your site:
demo document library pro
A simpler alternative: Use the Document Library Pro plugin to display user-submitted document downloads.

Unlocking the potential of Gravity Forms

As you can see, there are loads of reasons to let users upload information which you then display on your website. If you want to display website content rather than downloadable documents, then Gravity Forms is the best solution. Keep reading to see a real-life use case, and then learn how to set it up.

Case study - TV Production Contacts' Job Board

Job detail submission form for TV Production Jobs

TVProductionContacts.com acts as a networking site for TV production professionals, it also hosts a WordPress job board listing jobs available in the industry.

The job board is powered by our Posts Table Pro plugin. The site also uses the Gravity Forms plugin and the Gravity Forms + Custom Post Types add-on to power the job board submission form.

Gravity Forms display entries on front end which makes the job board simple to manage. Hiring managers submit all the job details using the form. The user-submitted information is then approved before being automatically displayed on the sortable job board.

Keep reading to find out how to create your own Gravity Froms for users to submit information to your site.

What to expect from this tutorial

This tutorial will teach you how to add the following features to any WordPress website. Read it all, or skip straight to the sections you need:

  1. Use Gravity Forms to collect user-submitted information
  2. Store the information as a WordPress post, document, or custom post type
  3. Display the user-submitted data in a table on the front end of your website

You can also watch us setting it up from start to finish in this video:

Step 1 - Use Gravity Forms to collect user-submitted information

The first step is to install the Gravity Forms WordPress plugin and create a form. Your visitors will use this to submit information to you. This is useful whether you want them to upload a document, member profile, business listing, upcoming event, or something else.

  1. First, buy Gravity Forms, download the plugin, and install it on your WordPress website (Plugins → Add New).
  2. You'll see a 'Forms' link appear on the left of the WordPress Dashboard. Navigate to Forms → Add New.
  3. Enter a name for your form, then add all the fields. (If you haven't created a form before, please see the official documentation.)
    • Title, content, and custom fields - Instead of using Standard and Advanced Fields, you should use Post Fields. These map to fields on your WordPress post type, so that the user data will be stored in the correct place.  
    • Custom taxonomies - Create a Standard Field and then click on the 'Advanced' tab when editing that field. You can use this to map the field to the custom taxonomy on your WordPress post type.
    • If you want users to be able to upload documents via Gravity Forms, use the File Upload field type.
    • Gravity Forms Add User Submitted Listing Form
  4. Click 'Update' to save your form.
  5. Next, create a page (Pages → Add New) and click the 'Add Form' button above the WordPress toolbar if you're using the Classic Editor, or use a Gutenberg block if you're using Gutenberg. Select the form you just created and insert it into the page. You can also add other content to the page:
    Add Gravity Form to Page
  6. Finally, view the page and make sure you're happy with it.

Your Gravity Forms get submitted data content page should look something like this:

Gravity Forms User Submitted Content Form

Optional - hide and protect your Gravity Forms page

By utilizing the functionality of Gravity Forms to display entries on the front end, restricting user-submitted content to authorized individuals is possible. You can do this by protecting the page containing the form.

There are several ways to do this:

  • The simplest way to secure the Gravity Forms page is to password protect it.
  • If you're using an SEO plugin (e.g. Yoast SEO), then you can also use this to noindex the page. This will ensure it is hidden from search engines.
  • For a more secure approach, use a WordPress membership plugin such as All Access Manager to restrict the page to logged in users with a certain role only.

Step 2 - Store the information as a WordPress post or custom post type

So far, you've learned how to use Gravity Forms to create a form that users can use to submit information to you. It looks pretty, but it's not much use yet! At this stage, the information will be emailed to you and stored in the WordPress database. In Step 2, I'll show you how to automatically use this Gravity Forms get submitted data to create WordPress posts, documents, WooCommerce products, and custom posts. This saves you from having to manually input the data to your website.

How to use Gravity Forms to save user-submitted information as a WordPress post

Gravity Wiz has an excellent tutorial about how to save Gravity Forms submissions as posts. Do this, then come back to learn how to display the user-submitted content in a table on the front end.

When you follow the Gravity Wiz tutorial, don't forget to set the 'Status' to draft. This is essential if you want to hold the form submissions for moderation for a WordPress admin to approve before they're published.

How to use Gravity Forms to create a custom post

Storing user-submitted information as normal WordPress posts is fine, but it can clutter up your blog. It's normally better to create a dedicated custom post type for this. For example, if you're creating user-submitted business listings then you can create a 'Business Listings' custom post type. This will add a 'Business Listings' link to the left of the WordPress Dashboard. It's a convenient way to organize the listings, separate from your other website content.

You'll also need to do this if you want to store Gravity Forms entries in a post type created by another plugin. For example, this might be:

  • The 'Documents' post type is created by our Document Library Pro plugin.
  • The 'products' post type created by WooCommerce, the 'tribe_events' post type created by the Events Calendar plugin, or any other custom post type.

You'll need a free plugin called Gravity Forms + Custom Post Types for this:

  1. Get the plugin and install it on your WordPress site.
  2. (Optional) If you don't already have a custom post type for this purpose, create one now. I recommend the free Pods plugin for this. For full instructions, please see my tutorial about how to create a custom post type, then return here and continue this tutorial.
  3. Use the how-to instructions on the plugin page to map your form fields to the custom post type.

Step 3 - Display user-submitted data in a table on the front end

So far, you've learned how to use Gravity Forms to let users submit information via your website and save it as a post, document, or custom post type. The next step is to showcase user-submitted posts on the front end of your WordPress website through Gravity Forms show entries frontend, the subsequent action is to be taken. You'll need a dynamic table plugin for this. We have 3 table plugins, so choose the one that lists the type of content that your users will be submitting:

All three plugins list user-submitted information in a searchable, filter options of datatables view. It's the perfect way to display Gravity Forms Entries because each entry data is listed in a separate row of the table. Visitors to your website can use the search box to find specific or multiple entries, use the advanced filtering to refine the list, display entries depending on a user role, and sort by any column.

Display WordPress user submitted content posts

How to list user-submitted content in WordPress

  1. Get Posts Table Pro or Document Library Pro and install it on your WordPress website.
  2. Copy your license key from the confirmation page, then enter it on the plugin settings page.
  3. Stay on the settings page, and spend a minute choosing how you want your tables to look and behave.
  4. Next, create a new page. You'll use this to list the user-submitted content from Gravity Forms. Use the plugin documentation to add a table.

After completing the process, access the page to witness a table on the front end that displays all the posts, documents, or custom posts (depending on the post type chosen on the plugin settings page) that have been listed through the utilization of Gravity Forms show entries frontend. This is the information that your users have submitted using Gravity Forms. Perfect!

Choosing which items to display

You may wish to add multiple tables to your site, each containing different posts, documents, or custom posts. Suppose you're designing a WordPress business directory and wish to customize the view layout of each page with different business categories and field values. In that case, you may opt to display listings based on the respective category.

Fortunately, Posts Table Pro and Document Library Pro come with several options for choosing which user-submitted content is listed in the table. You can list items by category, tag, and much more using the Gravity Forms view entries on front end feature.

File uploads

Gravity Forms comes with 'Post Image' and ‘File Upload’ fields which allow users to upload an image or other file type. There are a couple of ways to display file uploads on the front end with Posts Table Pro and Document Library Pro.

Display user-uploaded media and documents on your website

  • If users are uploading images then the easiest option is to add a 'Post Image' field to your Gravity Form and map this to the post/document featured image. You can then display this using the ‘image’ column of the table.
  • If you are using Document Library Pro then you can add the 'File Upload' field to your Gravity Form and use the following snippet to set the document link. Make sure to replace the $form_id and $file_upload_field_id variable values to match those in the Gravity Form you have created.
    add_action( 'gform_after_create_post', function ( $post_id, $entry, $form ) {
        $form_id = 1; // The ID of your Gravity Form.
        $file_upload_field_id = 6; // The ID of the File Upload field.
    
        if ( $form_id !== rgar( $form,'id' ) ) {
            return;
        }
    
        $document = dlp_get_document( $post_id );
        $file_url = rgar( $entry, $file_upload_field_id );
    
        if ( ! $document || ! $file_url ) {
            return;
        }
    
        $document->set_document_link( 'url', [ 'direct_url' => $file_url ] );
    }, 10, 3 );
  • If you are using Posts Table Pro then you can map other file types to a custom field, and display it as a custom field column in the table. Gravity Forms saves the URL of the uploaded file in the WordPress database, and the table plugin will display this as a clickable link when you include it as a column. By itself, this may not be ideal, as the link will be very long and won't look very professional. To modify the text inside this link, you can add some shortcode to your site's backend to utilize one of the development filters. For example:
    add_filter( 'posts_table_url_custom_field_text', function ( $link_text, $field_key ) {
        if ( $field_key === 'file_upload' ) {
            return 'Download';
        }
        return $link_text;
    }, 10, 2 );

    In this code snippet, "file_upload" is the 'Custom Field Name' specified in the Gravity Forms custom field, and "Download" is the text that will be displayed to users. Either of these can be updated to fit your circumstances.

If you're looking to achieve this without the aid of a developer skilled in CSS, HTML, PHP, or prefer a DIY approach to streamline your workflow, we recommend outsourcing the task to Codeable.

Can users edit posts after submitting them?

WordPress frontend editor table plugin

Yes, there are two ways that you can allow users to edit entries in the table:

  1. Use Posts Table Pro/Document Library Pro with a front-end spreadsheet editor plugin. Add an 'Edit' link above or below the table. Logged in users with the correct role can click this to access a front-end spreadsheet editor, which allows them to edit the content of the table. They then save their changes and return to the main table. (Read the tutorial.)
  2. Install a WordPress front-end editor plugin such as Editus. People can click through to the single post or document page on your website and edit the information from there. This is important because they can't edit the content from within the table itself. On the single post or document page, they can edit the content as required.

Where to get the plugins

That brings us to the end of our tutorial. You've learned how to use and display Gravity Forms Entries on page to allow users to upload information to your website and save it as a post, document, or custom post type. You know how to hold these posts for moderation so that they're not published until an administrator approves them. You've discovered the best way to display this information in a table on the front end of your WordPress website. It's the perfect way to create a user-contributed document library, member directory, or business listing.

To set it up, you'll need:

I'd love to hear about how you use and display Gravity Forms entries on page for user-submitted content. Do you keep this private or list it on the front end of your website? What sort of Gravity Forms data do you collect and display? Please let me know in the comments below.

Get Gravity Forms

Contact Form 7 spam tips from WordPress experts

Spam is a huge issue with contact forms on WordPress websites - both the websites we design, and on a global scale. As the most popular free WordPress contact form plugin, Contact Form 7 is highly targeted by spammers. Spam contact form submissions can be a huge issue for WordPress websites with high traffic, receiving hundreds of spam emails each day. These are inconvenient and make it difficult to spot the genuine messages amongst the spam.

Comments can be a huge asset to your blog, and there are some fantastic plugins available to enhance the comments facility built into WordPress itself. Our friends at SoftwareFindr spent time researching the best WordPress form builders out there, it's a comprehensive roundup and well worth a read.  However, no matter how good your comment form is, spam comments can make you want to disable comments on your blog completely, which would be a shame.

For example, one of our WordPress web design clients complained about the amount of spam they were receiving through their Contact Form 7 contact form. We tested a range of methods to find the best solution, which I will share with you now. And the best thing is, you don't need to be a WordPress expert to use them. You can also have a look at Classified WordPress themes, which would be a great option for building your WordPress website.

Should I use all the anti-spam methods you recommend?

In a word, no. I do NOT recommend that you implement all of the methods suggested in this article. A WordPress website should be kept as clean and minimal as possible behind the scenes, and you should not install unnecessary plugins. Instead, I recommend using trial and error to experiment with these solutions - whether you're a WordPress expert or a novice. Track how much contact form spam you receive after implementing one or two methods, and make changes until you are happy. Install Akismet as a starting point, and take it from there.

Using Contact Form 7's in-built anti-spam measures

You'll find a lot of articles recommending CAPTCHA and quiz plugins that work with Contact Form 7. Most of these are unnecessary as it's better to use the features already built into the Contact Form 7 WordPress plugin.

Contact Forms 7 spam
Quiz

Simple quizzes are becoming a popular way to combat contact form spam. They work by asking the user a simple question such as "Which is bigger, 2 or 8?" Bots can't answer this question. As a result, only people who enter the correct response can submit the contact form.

To add a quiz, edit your contact form and click the Generate Tag dropdown. Paste the shortcode that appears below into your contact form. It will look something like this:

[quiz capital-quiz "Which is bigger, 2 or 8?|8"]

2. Minimum character count

The WordPress website featured in this article received a lot of spam contact forms with 2-digit messages - usually a number. I have no idea what they were trying to achieve, but it's obviously a popular type of spam at the moment.

If all your spam messages follow an obvious pattern, you can block them by setting up your contact form to block messages that meet this pattern. In this case, I used the Max and Min Length options in Contact Form 7 to require messages to be more than 20 characters long. Genuine enquiries will usually provide more than 20 characters, so this blocks bots without frustrating real users.

The Message/Comments field will look something like this:

[textarea* your-message minlength:20 maxlength:500]

3. Akismet

Akismet has a reputation as the best WordPress anti-spam plugin. Not everyone knows that it works with Contact Form 7 as well as blog comments.

Once you have activated the Akismet WordPress plugin and followed the on-screen instructions to add your API key (free for non-profit-making website, small monthly fee for business sites), you need to do a bit of extra config to make it talk to Contact Form 7 - see https://contactform7.com/spam-filtering-with-akismet/.

In my tests, Akismet stopped about 70% of the Contact Form 7 spam but not all of it. It worked well in conjunction with some of the other solutions mentioned in this article.

Get Akismet

4. Contact Form 7 Honeypot

Contact Form 7 Honeypot is a WordPress plugin that adds a hidden field to your contact form. Real users won't complete it because the field is invisible. However bots won't know this and will fill it in. This allows the plugin to recognise them as bots and block their submission.

After you have installed and activated the Contact Form 7 Honeypot WordPress plugin, use the Generate Tag option to create a honeypot shortcode to insert into your contact form. It will look something like this (Contact Form 7 recommend changing the ID to something unique, so replace 827 with something else):

[honeypot honeypot-837]

Get Contact Form 7 Honeypot

5. Really Simple CAPTCHA

The Really Simple CAPTCHA WordPress plugin was created by the developer of Contact Form 7 so they work together seamlessly. The plugin allows you to add a CAPTCHA to your contact form. It's designed to prevent bots from submitting forms on your WordPress website.

Once you have installed and activated Really Simple CAPTCHA, insert a CAPTCHA tag into your Contact Form 7 form. (Click the Generate Tag dropdown to see the available options and create a customized tag to paste into your form.) It will look something like this:

[captchac captcha-14]

Further instructions at https://contactform7.com/captcha/.

Please note that CAPTCHAs are becoming slightly old fashioned and are not great for user-experience. They also require particular features to be enabled on your server, which may not be in place for your WordPress website.

I would recommend adding a quiz first (see above), and only trying CAPTCHA if this doesn't work. The two methods basically do the same thing. They prevent automated bots from submitting your website contact form - so you shouldn't need both.

Get Really Simple CAPTCHA

What worked for me

All WordPress websites receive spam in slightly different ways. What works for one website may not work for another.

When I had to stop Contact Form 7 spam on a WordPress website, I immediately achieved a huge reduction in spam simply by installing Akismet. The spam messages reduced from dozens per day to 5-10.

I fixed the problem completely by combining Akismet with the Contact Form 7 Honeypot plugin, a quiz and minimum character count.

If you just want to add one method to reduce Contact Form 7 spam, then I recommend Akismet. This is the best standalone solution as it's so powerful and comprehensive. You can use it whether you're a WordPress expert or a beginner. It can make a real difference to your WordPress contact form spam.

Get Akismet