As an online store owner, you might want to create a WordPress product catalog to showcase your products. The only problem is that most e-commerce plugins don't provide much flexibility in terms of how to display products.
One way to create a visually appealing, user-friendly product catalog in WordPress is by using a product table layout, with a simple WordPress plugin - WooCommerce Product Table. It makes it easy for customers to browse your product listings, view details, and act on your conversion goal – whether it’s to make a purchase or get in touch for a quote.
In this article, we’ll start off by explaining in more detail what a WP product catalog table is. We’ll also walk you through a step by step tutorial on how you can create a WordPress product catalog – with or without a shopping cart.
What is a WordPress product catalog and who needs one?
Out of the box, most e-commerce plugins only let you display products in a standard format. Each product takes up a large amount of screen real estate. And while this creates a visually appealing layout, it’s not user-friendly – especially for WordPress online stores that sell more than a few products.
This is mainly because a grid layout makes it difficult for prospective customers to quickly browse through products or compare product details.
With a product table plugin, you can create a WordPress product catalog – with or without a shopping cart – to effectively display more products per page. In addition, it makes it easy for customers to search, sort, and filter products to find exactly what they’re looking for.
Who needs a WordPress product catalog?
Anyone who’s looking for a user-friendly way to showcase a lot of products can benefit from a WordPress catalog plugin. You can list products in a neat table (or grid) layout along with important details without the need for finicky custom CSS or complicated HTML. As a result, customers can view more products per page.
E-commerce stores that sell products
Online stores that sell products directly through their website can also benefit from a product table layout. A product table layout makes it easy to display more products – with important product information and Add to Cart buttons – on a single page.
Since products are displayed in a table layout, this makes it easy for customers to make bulk purchases. For example, online stores that generally sell multiple products per transaction (such as wholesale suppliers or stationery shop) can benefit from using a product table to create a WordPress product catalog.
In addition to this, they generally include features that lets customers find specific products through search or sort and filter them based on different parameters (such as price).
Businesses wanting to showcase products without e-commerce
Some businesses need to be able to showcase products without letting customers purchase them directly from the website. Instead, they might want to create an online product catalog in WordPress that customers can browse, to make a selection.
These sorts of businesses generally want to take orders by phone or have customers request a quote. Therefore, using an e-commerce plugin with shopping cart functionality isn’t a practical solution.
However, a WordPress product catalog makes it easy for businesses to showcase their products on their website without having to display a price or enable shopping cart functionality.
The WooCommerce Product Table plugin lets you create a product catalog in WordPress to display products in a searchable, sortable, and filterable table layout.
This product catalog plugin is hugely beneficial to both businesses and e-commerce stores because:
Works with WooCommerce, the world's leading WordPress e-commerce platform.
Lets customers browse your entire product listing – or a curated selection of products – at a glance.
Makes it easy for customers to view important product information and compare products quickly.
Takes up less room on your website as compared to the standard format offered by most WordPress e-commerce plugins.
Simplifies the purchasing process by allowing customers to buy multiple products from a single page. In other words, they don’t have to visit individual product pages to add products to their shopping cart.
You can improve the buying process even further by using Product Table with its sister plugin, WooCommerce Quick View Pro.
I've tried so many product table and list view plugins over the past year. None of them were supported well and often simply were non-functional. I recently discovered BARN2 and WooCommerce Product Table; it does everything I need for my store that I had been searching for. My large and growing product catalogue was becoming irritating to customers and having data readily in view helps tremendously. The plugin worked perfectly for my site, the documentation is thorough and helpful, its simple to setup, and I highly recommend it.
In addition, the WooCommerce Product Table plugin lets you decide which columns you’d like to display in your WordPress product catalog (and in what order). You also have the option to decide how customers can filter through products e.g. by product category.
How to list products in a catalog for e-commerce
If you’d like to give customers the option to buy products directly from your online store then you’d want to display Add to Cart buttons in your WordPress product catalog.
Below, we’ll show you how you can do this regardless of which WP e-commerce plugin you’re using.
For WooCommerce
To get started, you’ll need a WordPress website with the WooCommerce plugin installed and some products added. You’ll also need to purchase the WooCommerce Product Table plugin and install and activate it to your website.
Step #1: Create a page for the WordPress product catalog
Log in to your WordPress admin panel and head over to Pages -> Add New to create a new page for the WordPress product catalog. Give your new page a name. For example, you might call it Our Product Catalog.
Alternatively, you can add the product catalog to an existing page by navigating to Pages > All Pages and opening it up in the Edit Page screen.
Step #2: Enter the product catalog table shortcode
Next, we’ll add the WooCommerce Product Table plugin’s shortcode to the text editor.
For Gutenberg:
Click the (+) icon in the top left corner of the screen to add a block.
Add a Shortcode block to the text editor.
Enter the WooCommerce Product Table shortcode [product_table] to the shortcode input field.
For the classic text editor:
Click the Insert Product Table icon in the toolbar. This will add the [product_table] shortcode to the text editor.
Once you’re done, click the Publish… button and preview the page. The WordPress product catalog should look something like this:
You’ll see a dynamic product catalog in a table layout. At this time, the table layout displays the default columns. In the next step, I’ll show you how to display the columns that would be most relevant to your products.
Next, navigate to WooCommerce -> Settings -> Products -> Product tables to set the columns you’d like to have displayed in the front-end WordPress product catalog.
If you’d like to display Add to Cart buttons, enter image,name,description,categories,price,buy in the Columns field under the Table content options.
Step #3: Decide which columns to display in the WordPress product catalog
Navigate to WooCommerce -> Settings -> Products -> Product tables to set the columns you’d like to have displayed in the front-end WordPress product catalog. Be sure to check out the complete list of available columns and advanced options in the plugin knowledge base.
For example, you might consider displaying the product’s image, name, a description, price, ands add to cart buttons. To do this, you would enter image,name,description,categories,price,buy in the Columns field under the Table content options.
Now, when you preview the WordPress product catalog, it should look something like this:
Used alone, WooCommerce Product Table comes with an add to cart column where customers can choose variations, pick a quantity, and add to the cart.
Some stores find that they want to show extra information, without taking customers to a separate page for each product. They might want to show multiple product images. Or they might have too many variations to fit neatly in the product table.
Add quick view buttons or links to the product catalog.
If any of this applies to you, then you can enhance your product tables by adding WooCommerce Quick View Pro. This plugin works alongside the table-based product catalog. It adds quick view links or buttons to the catalog pages.
Customers use the lightbox to view the full image gallery, read more information, choose variations and add to the cart.
Quick view is a great alternative to having a separate page for each product. Add it to your WooCommerce product catalog as follows:
Go to WooCommerce → Settings → Products → Quick view. Enter your license key and choose what you'd like to appear in the quick view lightbox.
Return to the Product Table settings page (WooCommerce → Settings → Products → Product table) and add quick-view to the list of columns. If you want to disable the links to the single product page, scroll down to the Quick View settings on the same page, and enable this option.
For WP eCommerce, Easy Digital Downloads, or any other e-commerce plugin
If you’re using any other e-commerce plugin – such as WP eCommerce or Easy Digital Downloads – to power your online store, you can use the Posts Table Pro plugin to create a dynamic, functional WordPress product catalog.
The only condition is that the e-commerce plugin must create its own custom post type in WordPress for storing products. That's fine, as nearly all WordPress e-commerce plugins do this.
With the Posts Table Pro plugin installed and activated, simply select the products post type from your e-commerce plugin on the Posts Table Pro settings page. Then, enter the [posts_table] shortcode wherever you’d like to display the WordPress product catalog.
How to create a WordPress product catalog without a shopping cart
In some cases, you might want to create a WordPress product catalog without a shopping cart. In other words, you want to showcase your products in a product table layout with e-commerce functionality disabled.
Below, we’ve outlined the steps you need to follow to combine product tables with catalog mode while disabling the e-commerce functionality.
Strangely, I'm going to talk about WooCommerce again. Yes, I know it's an e-commerce plugin - but you can equally use it without offering an online ordering facility. I'll show you how this works, and I'll also tell you how to create a WordPress product catalog without installing any e-commerce plugin at all.
Create a WooCommerce product catalog without online ordering
Start off by following Steps 1 and 2 outlined in the previous section. The only differences are:
Do not include a buy column when you choose your product table columns.
When you add your products in WooCommerce, do NOT add prices. This is important because you're not selling them online. If you don't add prices then no add to cart buttons will appear. Or if you really want to show prices, then use the Catalog Visibility Options extension to hide product prices and add to cart buttons throughout your online store.
Your non-eCommerce WordPress product catalog will look something like this:
Perfect!
Create a product catalog without an e-commerce plugin
Finally, I'll reveal how to create a WordPress product catalog without needing an e-commerce plugin at all! E-commerce plugins such as WooCommerce are fantastic, free of charge, and won't weigh down your site too much.
But if you really don't want one, then you can create your own custom post type and use this to store your products instead. This will add a 'Products' section (or whatever you want to call it) to the left of the WordPress admin.
Once you've added the products, use the Posts Table Pro plugin to them in a table-style WordPress product catalog on the front-end of your website.
The WooCommerce Product Table and Posts Table Pro plugins let you create a functional, dynamic WordPress product catalog for your store – regardless of whether you simply want to showcase products or allow customers to buy them from your store.
And the best part is that it gives you complete control over how your product listing appears on the front-end. You can choose to display the columns that are most relevant to your products, offer search, sort, and filter options, and allow customers to make bulk purchases.
Do you agree that creating a WordPress product catalog in a table layout enhances customer experience? Share your thoughts in the comments section below!
Today I'm going to tell you about a free plugin which adds Favorite buttons to your lists of WordPress posts, documents or custom post types. When used with our Posts Table or Document Library plugin, you can list WordPress content in a searchable table - complete with 'Add to Favorite' buttons.
Whatever your reason for needing favourite buttons on your website, you can use these instructions to add them to any list of WordPress posts, documents, or any custom post type.
You can use one of our table plugins to list your WordPress content in a table. Then, you can use the Favorite plugin to add Favorite buttons. Your visitors can select their favorite posts or documents and create a handy shortlist.
When a visitor comes back to your website, they will still be able to see their selections. If they're not logged in then their favorites are stored via browser session or a cookie. If they have an account on your website, then their favorites will appear even if they re-visit from a different browser or device.
How to add Favorite buttons to WordPress
First, use Posts Table Pro or Document Library Pro to list your WordPress posts, documents or any custom post type in a table view. Set up the plugin using the instructions in the knowledge base, with these settings:
Columns - include the 'content' column. The favorite button will appear here automatically.
Tick the 'Shortcodes' option. This makes sure the button appears in the table correctly.
Now go to Plugins→ Add New in the WP Dashboard.
Search for 'Favorites' and install the plugin by Kyle Phillips.
Now check the page where you've added the table. There will be a 'Favorite' button in the content column for each post or document in the table.
You can also add favorite buttons to other locations
The instructions above tell you how to add favorite buttons to the content/description columns the table. If you'd like to add them elsewhere - for example because you don't want this column in your table - then that's fine. Simply remove the content/description column and add the following shortcode to one of the other fields that you're displaying in the table (e.g. the excerpt or a text or Visual Editor custom field).
[favorite_button]
Where to get the plugins
Use the free Favorite plugin from wordpress.org with whichever Barn2 plugin works with the type of content you're adding:
Posts Table Pro - list pages, posts or any custom post type.
This article explains how to use our table plugins with the Advanced Access Manager plugin. It's perfect for creating tables that show different content to each user - also known as WordPress user specific content.
At Barn2, we create plugins that list content from your WordPress website in a searchable, sortable table. This might be blog posts, pages, documents, or any other post type. Our table plugins are:
Posts Table Pro - Lists WordPress pages, posts, and any custom post type such as members or events.
Document Library Pro - Creates a searchable document library of resources, publications, audio or video.
But what if you want each user to see different items in the table? Well, that's when you need to use our plugins with Advanced Access Manager.
Keep reading to learn how to create an interactive table with user specific content. I'll also reveal how to hide your entire table so that only certain people can see it.
Why would I want to list WordPress user specific content?
There are lots of reasons why you'd want to create a WordPress table with user-specific content. For example:
Your index of blog posts might include some hidden posts that only logged in users with a specific role can see.
You might have an e-commerce site that sells user-specific products (e.g. branded logo wear to sports teams).
You can do all this and more by combining our table plugins with Advanced Access Manager.
Creating user specific content with Advanced Access Manager
Advanced Access Manager has a surprising number of features for a free WordPress plugin. It comes with several ways to control access to WordPress content:
Create role-specific content that only specific logged in user roles can see.
Protect user-specific content that only named logged in user accounts can access.
Choose whether or not visits (i.e. guest users) can see the content.
For each option, you can choose what appears for people without the correct privileges. You can hide the information completely, restrict it so that only people with the direct URL can see it, or display a custom message. You can restrict the ability to add comments, redirect people to another page, or password protect the content. It's even possible to add an expiration date so that the user's access automatically expires at a future date.
How to control access to pages, posts & custom post types
When you add or edit a page, post or custom post type, you'll find a new 'Access Manager' section.
On the left, there are tabs for the different protection options. These let you create user role specific content, user specific content, as well as choosing what happens for guests.
On the right, choose one or more access restriction settings. (More on this in the next section.)
How does it work with Barn2's table plugins?
So far, I've told you how to create WordPress user specific content with Advanced Access Manager. Next, I'll reveal how each restriction option works when you list your WP content in a table with our table plugins:
List - Hides user specific content from public areas, while remaining available to anyone with the direct URL. Restricted items are hidden from your tables for unauthorized users. Users with the correct role or login can see them in the table.
Read - Lists protected content as usual, but unauthorized users will see an 'Access denied' message when they try to access the page. Content is listed for all users in the table but unauthorized users cannot access the single post page.
Limit - Not recommended, as the teaser message will not appear in the table.
Read Counter - Restricts how many people can access the restricted content. The restriction only applies when people click on a link in the table to access the single post page. The post/document/product still appears in the table after the limit has been reached.
Comment - Restricts who can comment on the single post page.
Redirect - Redirects unauthorized users to your chosen URL if they try to access the single page/post/document/product.
Password Protected - Password protects the page/post so that only people with the password can access it. It is still listed in the table as usual. Most of the columns in the table will appear for everyone, but information in the content column is hidden. A password login form appears in the content column so that users can enter the password directly into the table and reveal the hidden content.
Access Expiration - Choose a date when the content will expire and people can no longer access the single post page.
Combining the access restrictions
You can combine the above options to create more complex rules for your WordPress user specific content.
For example, you can combine the 'List' and 'Password Protected' options to hide information from the table and require a password when someone tries to access the direct URL to the protected content.
Can I show different information in the table columns to different users?
Yes, you can do this with the Advanced Access Manager shortcodes. Create a column in the table as usual (e.g. a custom field column), and add Advanced Access Manager shortcodes to this field. You'll need to add a separate shortcode for each group of users who needs to see different content.
For example, you might be listing ebooks in a table and want to add a 'Register' button for visitors and a 'Download' button for logged in users. You can do this by adding both buttons to a field in your table. Wrap one in a shortcode that is only visible to visitors; and wrap the other in a shortcode that is only visible to logged in users.
If you use this option, make sure you disable the caching option and enable the 'Shortcodes' option on the table plugin settings page. You must also disable the lazy load option in the Barn2 table plugin because the shortcodes only work when lazy load is inactive.
Please note that AAM has a 'Message' option in its shortcodes which lets you specify a message that appears to users without access to the content of the shortcode. This does not work with our table plugins - the column will simply appear blank to unauthorized users, with no message. Instead, you need to add multiple shortcodes - one for each user group.
I want to restrict entire categories, not individual posts
The free version of Advanced Access Manager forces you to create user specific content on a per-post basis. There are a few choices for restricting access to entire categories:
Advanced Access Manager Pro has a category-wide option.
By now, you've learned how to list posts, pages or custom post types in a table with user specific access restrictions. Each user sees different information in the table - or can access different links from the table - depending on the restrictions.
If you prefer, you can hide the page containing your table instead. Simply use the 'Access Manager' controls at the bottom of the page where you're using our table plugin. This will hide the entire page - including the table - from non-authorized users.
Can I sell access to members-only content?
Yes, the Pro version of WP Advanced Access Manager has this feature. It lets you sell access to exclusive content. You can then restrict certain pages/posts/custom posts so that only people who have purchased access can view it in the table.
Does it work with other WordPress membership plugins?
There are dozens of WordPress membership plugins available, and we can't realistically test with all of them. The other one that we have tested with is Groups, which also works nicely with our table plugins.
With Groups, you have to create a 'group' (hence the name!) and add users to one or more groups. You can then restrict your content so that only logged in users in the correct group can see it. If you're listing content using our table plugins, then users will only see information that their group has access to.
We love Groups, but Advanced Access Manager is a simpler option for many people. This is because it lets you lock down content to specific user roles, so you don't have to bother creating groups and adding users to the correct group.
Do you use Barn2's table plugins with access restrictions?
If you want to add tables to your WordPress site which show different items to different users, then choose one of Barn2's table plugins and use it alongside Advanced Access Manager:
Posts Table Pro - Lists WordPress pages, posts, and any custom post type such as members or events.
Document Library Pro - Creates a searchable document library of resources, publications, audio or video.
We'd love to hear how you use our table plugins to show different WordPress content to different types of user. Please add your comments below.
Want to add WooCommerce frontend product submission to your store? This allows other people to add products from the frontend of your website. They never need to visit your WordPress admin dashboard.
Frontend product creation is great for any type of multi-vendor store. That's because most people will find it more convenient to work from the frontend. It can also come in handy for many other types of WooCommerce store.
In this post, you'll learn how to allow WooCommerce frontend product submission using Gravity Forms and then display those products using WooCommerce Product Table.
Thanks to Gravity Forms' flexibility, you'll have a ton of control over how your frontend add product forms look and where they appear. Here's an example of what you can build:
You can then display the user-submitted products in a table layout, like this:
Beyond that, we'll also share tons of tips for working more effectively with your frontend forms. This includes restricting access to the forms, assigning custom taxonomies for vendors, and displaying user-submitted products in a shopper-friendly manner.
Either read the article below, or watch this video:
What sorts of website need WooCommerce frontend product submission?
The biggest use case for frontend product submission is any type of WooCommerce multi-vendor store. That is, a situation where third-party users can add products from the frontend and sell them through your Woo store.
While there are quality full-service multi-vendor plugins, sometimes you don't need all that extra functionality for commissions, vendor reports, etc. This method is a much more lightweight approach.
For example, maybe you're creating a website for a food festival and you want to let each restaurant owner add their menu items as WooCommerce products. This method would make that easy, without bogging you down with a bunch of functionality that you don't need.
Beyond letting other people add their own WooCommerce products, you might find this method helpful even if you're the only one selling products.
For example, maybe you've hired an assistant to help with uploading new products. Rather than forcing your assistant to learn the WordPress backend, you can just have them work with a WooCommerce frontend add product form instead. Beyond being more user-friendly, this also helps keep things secure as you don't need to worry about which backend capabilities the user has.
What you'll need to follow this tutorial
To create your WooCommerce frontend product submission form, you'll need two plugins:
Gravity Forms - this is the core form builder that you'll use to build the structure of your form.
Gravity Forms + Custom Post Types - by default, Gravity Forms' form-to-post functionality creates a standard WordPress post. This free plugin lets you change the post type to a WooCommerce product instead.
Then, you'll also learn how to use the WooCommerce Product Table plugin to display the products submitted through your add product form.
We'll use WooCommerce Product Table to list the uploaded products in different ways. For example, you'll learn how to create a separate page for each vendor's products, or let shoppers filter products by a specific vendor:
As such, we'll divide this tutorial into two parts.
First, we'll cover building the form and mapping it to a WC product. Then, we'll cover how to take those product submissions and display them to potential shoppers.
Part 1: Create your frontend product form with Gravity Forms
Ok, so you want to let users add WooCommerce product from the frontend - great plan! To get started, you'll need to create the actual form that people will use to add products on the frontend. To do that, go to Forms → Add New.
Step 1: Map form submissions to WooCommerce product
Unlike most WordPress form plugins, Gravity Forms has a neat feature that lets you automatically create a WP post whenever someone submits a form.
To map form submissions to a post, Gravity Forms includes a special set of Post Fields. By default, these post fields create a standard WordPress post. The Gravity Forms + Custom Post Types add-on plugins let you change that and map fields to a WooCommerce product, instead. That's what transforms Gravity Forms into a WooCommerce frontend product uploader.
To set up this mapping, add the Post title field from the Post Fields area. Beyond letting users enter the name of the product, this Post title field also includes some important configuration options:
Once you've added the field, click on it to edit it. Here's what you'll need to configure:
Post Type - use the dropdown to select Products. If you can't see this, don't forget to install the free Gravity Forms + Custom Post Types plugin.
Post Status - we recommend leaving this as "Draft" or choosing the "Pending Review" option. This ensures that you're able to moderate all the submitted products before they're publicly available at your store. Alternatively, you can also choose "Published" to make products live right away without admin approval.
Default Post Author - WooCommerce products don't support authors by default, so this setting isn't relevant. We'll show you how to use a custom taxonomy to store vendor/author information later on.
Post Category - you can select the default category here. You'll also be able to let submitters choose their own categories and tags, if required.
And that's it! You're part way there. Now, a user can submit the form and Gravity Forms will add a new product.
But...you still need to collect some more information, right? What about prices, pictures, categories...you get the idea.
Step 2: Add form fields for WooCommerce product information
Next up, you need to add form fields for all the product information. Exactly how you do this depends on what type of information you're collecting, so bear with us here! There are four different approaches for:
Featured image
Description
Basic product information like price, stock status, etc.
Taxonomies (categories, tags, custom taxonomies)
We'll go through each approach in detail.
How to add the product image
To add the featured product image, drag over the Post Image field. Then, edit the field and check the box for Set as Featured Image. This will let the form submitter upload an image that will be used as the Product featured image:
How to add the product description
To add a field for the product long description, use the Body field from the Post Fields area. In the field settings, you'll want to configure the basic information to be the same as the information you added in Step 1:
If you want to also add a separate Product short description, you can use the Excerpt field from the Posts fields area.
How to add prices, stock status, etc.
To add basic product information like price and stock status, you'll use Gravity Forms' Custom Field field from the Posts Field area.
This is the trickiest field to add, but we'll try to simplify the process as much as possible.
When you drag over the Custom Field field, the first thing that you'll want to do is choose the Field Type. This type depends on what type of information you're adding with this field, but for most of the fields, you'll use a Number. For example:
Price - Number
Shipping weight - Number
Etc.
[/image_border]
Then, under the Custom Field Name, choose New (you're not really creating a new field - but Gravity Forms doesn't let you select most WooCommerce fields from the existing drop-down).
In the text box underneath, you need to enter the custom field ID. Here are the field IDs for the most relevant fields:
Price - _regular_price
Shipping weight - _weight
It should look something like this:
You might also want to add some other restrictions, like a minimum and maximum range.
Then, repeat the process for as much information as you want to collect.
If you need to add other WooCommerce fields beyond price and stock status, a neat trick to find the field name is to use Chrome Developer tools on the edit product page and look at the label for ="FIELD NAME":
Finally, let's cover how to work with taxonomies like categories or tags (or your own custom taxonomies - more on this later).
For product categories (or other hierarchical taxonomies), you can let users choose one or more of your existing categories. And for product tags, you can also let users add their own tags.
Let's cover categories first…
To let users select from your product categories, you can use one of these Standard Fields:
Drop-down - users will only be able to select a single category with this method.
Multi-select - users can select one or more categories using a multi-select box.
Checkboxes - users can select one or more categories using checkboxes.
Radio buttons- users will only be able to select a single category with this method.
You can choose whichever method works for you. No matter which one you choose, you'll first need to drag the relevant field over from the Standard Fields area.
Then:
Edit the field
Go to the Advanced tab
Check the box for Populate with a taxonomy
Select Product categories from the drop-down
For product tags (or other non-hierarchical taxonomies), you can use all the same field types. However, you also get a new option.
If desired, you can use a Single Line Text field. Then:
Edit the field
Go to the Advanced tab
Check the box for Save To Taxonomy
Select Product tags from the dropdown
Check the box for Enable enhanced UI
The benefit of using this approach for tags over checkboxes or a multi-select field is that people submitting products will be able to use that same "autosuggest" style box that you get in the back-end. Here's an example of what we mean:
Step 3: Configure other basic form settings
Phew - that was a lot! If you made it through, you can be happy to know that pretty much all the hard work is done now.
Next, you'll just want to go to the Settings and configure some things there. First, you'll want to consider these options in the Form Settings:
Button text - changing this to "Submit Product" or something more descriptive is good for UX.
Require user to be logged in - you can check this box so that only logged-in users can add new WooCommerce products from the frontend.
Beyond that, you also might want to configure the Confirmations and Notifications so that they're more relevant to creating a product. For example, you can receive an email whenever someone adds a product from the frontend in WooCommerce.
Putting it all together
Ok, so here's what the finished form looks like on the frontend of our site. We've filled it out with some basic information:
Now, when we submit that form, the product shows up as a draft when we go to the Products area in our dashboard:
And if we edit that product, you can see that it also includes both the product description and the product image:
Protect your frontend add product form with a password
One way to restrict access to your form is to use Gravity Forms' feature that requires users to be logged in.
However, maybe you don't want to create user accounts for each person. Maybe you don't want all registered users to be able to add WooCommerce products from the frontend. If so, then you can easily password protect the form.
Then, you can add a field to your Gravity Forms form and populate it with information from your Vendors custom taxonomy, just like you did for your regular product categories. Here's what it should look like:
Then, form submitters can choose the vendor when they add a new product:
Part 2: Display WooCommerce frontend product submissions to shoppers
In Part 1, you learned how to create a WooCommerce frontend add product form. Now, let's cover how to take those frontend product submissions and display them in a shopper-friendly way at your store.
To do that, you'll use the WooCommerce Product Table plugin. WooCommerce Product Table takes all or some of your products and displays them in a searchable, sortable, and filterable table anywhere on your site.
Step 1: Configure basic settings
Once you've installed and activated the plugin, you can configure its basic settings by going to WooCommerce → Settings → Products → Product tables:
You can configure the settings according to your preferences, but you'll want to pay special attention to these settings:
Columns - this lets you control what information displays in your columns. For example, you could include the product short description, a column for price, etc. Learn more about columns options.
Add to cart column - this lets you control how the add to cart functionality works, including how product variations are displayed. Learn more about add to cart.
Table controls - these let you control filters, search boxes, etc. Depending on your implementation, you might want to use filters to let shoppers filter out products from specific vendors. Learn more about filters.
Step 2: Choose how/where to display tables
Once you've configured the basic settings, you'll want to decide exactly how and where you want to display the tables.
To display your tables, you'll use a shortcode.
You can either use the shortcode to display all products. Or, you can use the include/exclude rules to only display specific products. For example, you could filter out products from:
So where can you put that shortcode? Well, you have a few different options here. You can:
Create a single page and display all your products in one table
Create a single page and use multiple shortcodes with different include rules to create different sections on the page.
User separate pages and use the include rules to display different products on each page.
Add the table to your theme's category archive template to automatically use the product table layout on all category pages. Here's a tutorial for how to do that.
For example, here's what it looks like to create a separate page and populate it with only products from the "Barn2 Sports" vendor using the custom taxonomy term include rule:
And here's what that looks like on the frontend:
Alternatively, you could also use one table for all vendors and use WooCommerce Product Table's filter options to let shoppers filter by the Vendor custom taxonomy like this:
If desired, you could also display the vendor information as a column in your table, as well.
Bonus tip: Show extra information in a quick view lightbox
When you list products in a table layout, you can show information submitted by the user in the various columns.
If you'd like to show more information than will neatly fit into the table, then you can add the WooCommerce Quick View Pro plugin. This handy plugin adds quick view buttons or links to the product table. Or if you're not listing your user-submitted products in a table, then you can also use quick view with the default WooCommerce shop and category pages.
Either way, customers can click on the quick view links to view extra product information in a lightbox. This can include the product image, short description, price, and add to cart column. The customer can view this information and add the product to the cart without having to visit a separate page for each product.
It's an excellent option if you want to keep your product tables clean and simple, while still providing extra information about each product.
Can users add products in the frontend and then them?
You might want users to be able to edit the products in the table after they go live in your store. There are 2 ways to do this:
You can use WooCommerce Product Table with a frontend editor plugin and add an 'Edit' button above or below the table. Logged in users with the correct role can use this to access an editable spreadsheet, from which they can edit products without having to access the WordPress admin. If you just want users to edit their own products, then you can use the free User Role Editor plugin to edit the appropriate user role, adding the capability "edit products" and removing the capability "edit others products". (Read tutorial.)
You can allow them to edit information about your products using a WordPress frontend editor plugin such as Editus. Logged in users with the correct privileges would click through to the single product page to make changes. This is because Editus makes the single product page editable, but not the product table.
Create your own WooCommerce frontend product submission form today!
Click below to get started with WooCommerce Product Table, and leave a comment if you have any further questions.
It can be a nightmare to expect your WooCommerce store's customers to remember their username and password. The 'Lost Password' feature in WordPress is all well and good. However, emails can be spammed and it's plagued with caching problems.
That's when you need a WooCommerce URL-based login plugin. This type of plugin lets you generate a secret link that users can click on to log into their WordPress or WooCommerce account on your website. They'll never have to remember a username or password again!
In this article, I'm going to recommend the best automatic login plugin for WordPress and WooCommerce, and tell you how to set it up. I'll also tell you how to use it with other plugins to allow customers to click on a URL to instantly log into a hidden area of your website that no one else can see. This is perfect for creating a private WooCommerce store, wholesale login area, or hidden product categories that only specific users (or user roles) can see. It's also ideal for creating customer-specific products that are exclusive to each user.
Which is the best WooCommerce URL-based login plugin?
There used to be a free WordPress plugin called - you guessed it - URL-Based Login. This worked on any WordPress site, including WooCommerce online stores. Unfortunately the developer no longer supports this plugin, so you need to find a more modern alternative.
Instead, I recommend the Login Me Now plugin. This is another free WordPress plugin that lets customers log into their WP or WooCommerce account simply by clicking on a link to a secret login URL.
How do the automatic WooCommerce login URL's work?
The Login Me Now plugin works by letting administrators of your WordPress website create a hidden login URL for each user. They can easily do this on the 'Edit User' page under the Users section of the WordPress admin.
You can do this for any WordPress website, including WooCommerce stores. That's because Woo uses the standard WordPress login facility for its customer accounts.
First, an administrator logs into the WordPress admin for their WC store, goes to the Users section and clicks on the user who they want to create a URL-based login for.
Scroll down to the Auto-login section of the page and click the 'New' button next to 'Auto-login link':
Copy the URL that appears on the page.
Give the WooCommerce login link to the customer. Tell them to use it as the instant login link for their account.
Scroll down to the bottom of the 'Edit User' page and click 'Save'. The URL-based login will only work if you remember to save the page.
Now send the user a link to their unique login URL for your WooCommerce store (e.g. by email).
Finally, the user clicks on the link (for example in an email). It automatically takes them to your WordPress website or WooCommerce store and logs them in. They don't have to enter a username or password. This is because the plugin automatically passes this to WordPress via the auto-login URL.
For example, this sample WooCommerce URL-based login link will take users to the homepage of my website.com and log them into their account.
Each customer will have a unique URL-based login for their account. The random string in my example URL will therefore be different for each person.
Can I use URL's to log users into a completely hidden WooCommerce store?
Used alone, the Login Me Now plugin lets you provide URL-based login for WooCommerce stores where all the products are public. This means that the products are available for everyone to view, and the user-specific login links simply log customers into their account.
You can extend the Login Me Now plugin to change the actual visibility of products by using it with a WooCommerce protection plugin. Choose one of the following plugins, depending on whether you want to hide some or all of your products.
WooCommerce Private Store
WooCommerce Private Store - as its name suggests - makes your entire WooCommerce store hidden. The rest of your website (e.g. your homepage and blog) remains public, but all the WooCommerce parts (shop page, products, categories, cart, etc.) are hidden from logged out users.
Use WooCommerce Private Store with the Login Me Now plugin to create an auto-login URL that will unlock the hidden store and log them into their account in a single click.
WooCommerce Protected Categories
WooCommerce Protected Categories is similar to WooCommerce Protected Categories, but with more fine-grained control. Instead of making your entire shop private, you can use it to create hidden areas within your store.
For example:
You might have a public shop that anyone can access, and a hidden area that only logged in users with a specific role can see.
Maybe you need customer-specific products, with a different hidden category for each customer.
Either way, you can use WooCommerce Protected Categories to protect any or all of your categories so that only specific logged in users or user roles can see them. Use it with the Login Me Now plugin to give each customer a unique link, and make their lives easier with WooCommerce URL-based login.
WooCommerce Wholesale Pro
The WooCommerce Wholesale Pro plugin adds a hidden wholesale area to your online store. It comes complete with all the features you need to sell to B2B buyers, including:
Wholesale user registration and login
An unlimited number of wholesale roles, each of which can have different product pricing and discounts
Built-in emails for your wholesale users
A wholesale-friendly quick order form
Use the WooCommerce wholesale plugin with Login Me Now to allow wholesale users to login without having to enter their details.
Can I redirect customers to a specific page after they login?
Yes, absolutely. When you create the URL-based login link for each user, simply amend the link to add the URL of the correct page. Just make sure you don't change the autologin code at the end of the URL.
For example, this login URL will take customers directly to the shop page and log them into their user account:
Alternatively, you can use the free Peter's Login Redirect plugin to choose where people are taken to after they login. It even has a feature to choose a different login URL redirect for each role or individual user account.
How secure are auto-login URL's?
Letting your customers login by clicking on a link is - by definition - less secure than requiring a username and password. As a WordPress website manager or WooCommerce store owner, you need to make a balanced decision about usability vs. security.
Allowing users to click a link to automatically login to their account on your WooCommerce website can make your store much more user-friendly. Implement it carefully to maximize security in your store, and relax while your customers log into their accounts with ease.
Can I use URL based login with password protected store and categories?
Unfortunately this doesn't work with auto-login URL's, which only work with actual user logins. To automatically unlock the hidden content by clicking on a URL, you need to use one of the options in these plugins which work with individual user accounts.
Many WooCommerce online stores are highly visual by nature. You may have noticed that your page layouts place a lot of emphasis on WooCommerce product images. However, what if you don’t have access to high-quality photographs for your products? Keep reading to learn how to create a WooCommerce product list without images.
While displaying lots of media can be very valuable for some stores, it’s not always necessary. In some cases, a featured image for your storefront and WordPress theme may be more than enough.
However, there's no need to worry if you have a different vision for your shop, or are constrained as to what type of WooCommerce product images to use. There are alternative ways you can display your products in an attractive and compelling manner, such as in a dynamic table:
In this post, we’re going to talk about the reasons you might want to create a WooCommerce list view with no product images, or with small images. We’ll also show you some examples of this feature in action, and introduce you to a tool you can use on your own site – WooCommerce Product Table.
Let’s jump right in!
The benefits of creating a WooCommerce product list without images
There’s no denying the power of visuals. In many cases, people use images as a key part of their decision-making process when buying items online. That’s why you’ll see so many stores that put a significant focus on what each product looks like:
However, the benefits of having large images only apply to certain types of product. Sometimes, you might want to avoid placing a lot of focus on product imagery. In fact, you may prefer to have no WooCommerce product images. Or you might want small product thumbnail product images, instead of high pixel imagery that takes over the page.
There are a lot of reasons your store might benefit from small product images, or no images at all:
Lack of high-quality WooCommerce product images. Quite rightly, you don’t want to shortchange your products by using photos that don’t represent them at their best. This also applies to developers building sites for clients who’ve provided less-than-stellar product imagery (or nothing at all). Let's face it, we've all been there and received blurry product images from clients 😅.
Your products are completely digital – such as ebooks, music albums, computer programs, or PDFs – and so there’s nothing to take images of.
While your products are physical, they’re very simple or not interesting to look at. For instance, maybe you’re selling machine parts, or other items where appearance isn’t a key factor. Here, you may only need thumbnail-size catalog images, or none.
Removing images places emphasis on your products’ details or specifications, rather than the way they look. It may be more important that your customers are able to compare a large number of items quickly, based on their sizes, materials, capacities, and so on.
A WooCommerce product list without images will make your store load faster. High-quality images, are, by nature, large image files. If larger images fill your product gallery, they may slow your website’s loading time and hurt your SEO performance.
To give you some real-life example, here are some quotes from our own customers who wanted to have no product images:
My client HAD to have the table layout. The grid layout just does not work for boring electronic parts.
I’m selling digital goods that require little more than a thumbnail image, excerpt, title, and price. The product details page is largely redundant.
Most of the products we sell do not have pictures, and a list looks cleaner than a blank thumbnail.
Ultimately, not all stores need or can benefit from including a lot of large, dominant WooCommerce images.
Which WooCommerce products sell best with no image?
By now, you have some idea of the reasons a WooCommerce store might not have product images (or only use small, simple photos). However, you may still not be sure whether this applies in your specific situation.
To answer that question, you’ll want to consider the types of non-visual products you’re selling. Of course, we can’t possibly list all the types of items that fall into one of the categories discussed above. However, here are some examples of products that don’t need to rely on images:
Lab products, scientific instruments, or medical devices
Machine parts, electronic parts, blueprint templates and similar items
Ground support equipment for airports
Instrument cases (and other types of containers)
Gift certificates
Any sort of digital products (music, games, files, etc.)
Pharmaceuticals
Modular furniture (for example, a selection of various cupboard doors)
Event tickets and registrations
Certain food and beverage items, such as wine or spices
Practical household items (such as fans)
Even if you do have access to images for these types of items, it can be a better choice to have no product images, or to keep them small. Customers are more interested in making comparisons and viewing details about your products than what they look like.
To further illustrate the point, let’s take a look at how having small WooCommerce product images might work in action.
Universal Fans: A case study of selling non-visual products in WooCommerce
As it turns out, there are a lot of e-commerce stores that have decided not to emphasize product imagery, and have found ways to do so successfully. For example, Universal Fans is a website selling – you guessed it – fans and similar products:
This store owner offers everything from ceiling fans to exhaust fans, and lists a wide range of products, parts, and options on its website. For some of those items, WooCommerce images do in fact matter. If you’re looking to buy a ceiling fan, for example, you probably care what it looks like:
Other types of fans are a lot less exciting to look at. For instance, there’s not much reason to include a single product image of an exhaust fan. What customers care about when searching for that type of product is its specifications, not its appearance.
The team at Universal Fans understand that fact, which is why they use product tables to display non-visual items:
This listing of exhaust fansdoes include WooCommerce product images, but they are small, simple, and basic thumbnail pictures. Instead, the focus is on the products’ key details, such as duct size, capacity, and wattage. Customers viewing this page can easily see all the different sizes and options on offer, make comparisons between them, and plan out exactly what they want to buy.
This is made even easier by the table’s dynamic design. Individual columns can be sorted, and there’s a handy search bar. Plus, you can use a dropdown menu at the top to filter the listing, and only include products with a specific duct size:
You could even create a table like this with no product images at all. As you can see, it wouldn’t make a significant different to the listing’s usefulness.
It’s clear that Universal Fans knows what its customers are interested in, and how they shop. That’s why this business has tailored the design of its e-commerce store to focus on the elements that really matter – which isn’t always WooCommerce product images.
How to create a WooCommerce product list without images
By this point, you probably have a good idea of whether or not listing WooCommerce products with no images (or with small, simple photos) would benefit your store.
If you’re using Woo to run your store, this can be a little tricky. After all, WooCommerce is designed with product images in mind. Its layouts assume that everyone will want to display large, high-quality images on individual product pages. But as we’ve seen, this isn’t always the best approach.
That doesn't mean you can’t use WooCommerce, however. After all, it’s an easy and flexible way to set up an e-commerce shop. Instead, the solution is to pick up an additional tool as well – the WooCommerce Product Table plugin.
This WP plugin is designed to work right alongside WooCommerce. More specifically, it enables you to create a dynamic product listing with no product images or with small thumbnails:
While this plugin has many applications, it’s especially useful if you want to create a WooCommerce product list without images, or keep the photos understated. Let’s talk about why.
How WooCommerce Product Table can display your inventory more effectively
At first, WooCommerce Product Table may seem like a simple tool. Its goal is straightforward – helping you design a better product listing for your WooCommerce store.
However, there are a lot more benefits to using this plugin than you might at first expect. Some of its key features include:
Enabling you to fully customize the information that appears in your product table.
Letting customers search, sort, and filter the table to find what they need quickly.
Keeping all your products and their key information organized.
Saving space by displaying everything on a single page.
Making it possible to list your store’s entire inventory in a single shop page, or to pick and choose. which items you want to include.
As one customer put it:
We sell relatively technical products, so it is really helpful for customers to be able to see products in certain categories and view them in a list format, which can be sorted by custom attributes.
What’s more, there are a variety of ways you can use WooCommerce Product Table to display products with no images, or to draw visitors’ focus to other key elements. Here are just a few of the ways you can customize your product table:
You can remove WooCommerce product images entirely, by simply not including them in your table.
Alternately, you can include a product image column, but keep the photos small.
You’re also able to customize the image dimensions in your table, so you have complete control over how prominent they are.
Instead of putting all the focus on images, the product image settings in WooCommerce Product Table help you display what is important about the items you’re selling. That helps to sell your products more effectively, leading to increased conversions.
How to get started with WooCommerce Product Table
At this point, all that’s left is to start using WooCommerce Product Table for yourself. Watch this video or follow the written instructions below:
Activate your license key in the setup wizard which opens automatically. You'll find the license key in your order confirmation email.
Now go to the plugin settings page at WooCommerce → Settings → Product tables. Choose the following options:
Shop page display - If you want to use the table layout on all your shop pages, tick the relevant boxes. Alternatively, you can insert the table by adding the [product_table] shortcode anywhere on your site.
Columns - Choose which columns to include in the table. Remove the default 'Image' column if you want to hide images from the shop pages.
WooCommerce product image size - If you're keeping the image column but want small single product images, then enter the desired size in pixels.
Now view the page where you added the product table. This might be the shop page or wherever you added the shortcode. It should look something like this, if you opted to have small product images:
Or maybe there's no product image column at all.
How do images in the table work?
By default, customers can click on the WooCommerce product images to open them in a lightbox. If you're working with poor-quality or blurry images, small resolution or image sizes, there's an option on the plugin settings page to disable the lightbox. That way, customers will only see the small version of each product image.
You can also disable the links from the product table to the single product page. This keeps the customer on the product table, where they can use it as a one-page order form. There's no need for them to access the product detail page, which will display a much bigger version of each WooCommerce product image.
For more information, you can take a look at the complete list of options in WooCommerce Product Table. With a little time and tweaking, you’ll find it easy to list WooCommerce products with no images.
Bonus tip - Add WooCommerce quick view without images
As you can see, it's easy to list products in a table layout without images. You can build on this by providing extra product information and purchase options within quick view lightboxes - also with no product images!
To do this, you need to use WooCommerce Product Table with our other plugin - Quick View Pro. This adds a 'quick view' column to the product table, which customers can click to open extra information in a lightbox. You can choose what information to include in the quick view, including:
Whether to show product information with or without an image gallery. (If you're reading this tutorial, then you probably want the lightbox option without no product images!)
Product data such as the price, categories, tags and reviews.
Add to cart information including the quantity picker, variation dropdowns and add to cart button.
WooCommerce quick view is an excellent way of providing extra information about non-visual products. Use it to encourage customers to buy more and immediately return to the product list, without being taken to a separate page for each product.
The next or the final step in an ideal buyer’s journey is the cart and checkout pages. The default WooCommerce cart page is designed to show the product images alongside the product list and there’s no option in the settings to disable the images. But, if you want to create a true non-visual shopping experience, this can be achieved by our WooCommerce Fast Cart plugin.
WooCommerce Fast Cart plugin is designed to increase conversions by providing a more seamless checkout experience by trimming down the long and tedious traditional WooCommerce checkout process.
The WooCommerce Fast Cart plugin features a custom popup cart and checkout window that comes with loads of customization options and one of those options is to remove product images from the cart page.
You can use this plugin in combination with the WooCommerce Product Table plugin to give your store visitors a complete non-visual shopping experience.
After installing and activating the WooCommerce Fast Cart plugin, go to WooCommerce → Settings → Fast Cart, and in the cart contents section, deselect the product image item and the product images will not be displayed on the cart page. Simple as that!
WooCommerce Fast Cart is perfect for giving your shoppers a more streamlined and swift checkout experience. Using it can reduce the cart abandonment rate by shortening the checkout process.
Product images matter - but not for every store!
WooCommerce is an excellent way to design and run an online store. At the same time, it isn’t perfect. It makes certain assumptions about the kind of shop you want to create. For instance, it provides few options for helping you build an e-commerce store that doesn’t rely on large, high-quality WooCommerce images.
If you don’t have product images or can only access low-quality photos, you’re in luck. The WooCommerce Product Table plugin makes it simple to design a WooCommerce product list with no images, or to display small images instead.
Do you have any questions about how to use WooCommerce Product Table on your own site? Let us know in the comments section below!
WooCommerce is an incredibly powerful and flexible e-commerce platform. You can use it to create just about any type of online store and offer all kinds of online shopping experiences. You can even use it to create a WooCommerce mix and match products website.
Whether you’d like to start selling custom gift hampers, assorted donuts, and pastries, or bespoke food boxes, WooCommerce makes it incredibly easy to get started.
Paired with the right plugins, WooCommerce is the perfect solution for selling bespoke mix and match products and taking customized orders. After ensuring compatibility and setting everything up, your customers will have the ability to place personalized orders on your online store. They can view items in a user-friendly, catalog-like list, choose options and tick the items they’d like to add to their order and place their customized order. All from a one-page WooCommerce order form.
In this article, we’ll cover everything you need to know about WooCommerce mix and match products. You'll learn how to add products in WooCommerce, as well as how enabling customers to personalize their orders can benefit your online shop and how people are utilizing this feature. We’ll also step through a quick tutorial to help you create your own WooCommerce mix and match online store using the WooCommerce Product Table plugin.
Let’s get started!
Some examples of WooCommerce mix and match products
Mix and match products work by allowing customers to select individual products they’d like to purchase and add them to a gift hamper, product box, or bundle items. Let’s take a look at some of the most popular types of WooCommerce mix and match products that you can sell with WooCommerce.
Example #1: Pizza, sandwich, and salads
Customizable food items such as pizzas, sandwiches, and salads are often sold using a mix and match system. For instance, a WooCommerce-based restaurant that allows customers to place orders online usually allows customers to choose toppings and filings to put together their own meals. This is just one of many mix and match products examples, where WooCommerce can be utilized to offer personalized and customizable options to customers, such as selecting ingredients for their pizza, sandwich, or salad.
Your WooCommerce mix and match products offering may vary slightly depending on what you're selling. However, the core concept remains the same. Essentially, you allow your customers to build their own meals. For instance, if you were selling pizzas then you’d let customers choose their base, sauce, toppings, and dips. They mix and match the pizza options to create their own customized pizza - all using WordPress and WooCommerce.
Example #2: Gift hampers and product boxes
Buying a hamper as a gift is always more special when you can select the individual items you’d like to add to it. Whether you’re selling face and body products, wines and candles, decadent chocolate, corporate gifts, or gourmet products, you can create a personal gift experience by letting customers mix and match their own selection of items.
Learning how to add products in WooCommerce opens up several avenues for offering WooCommerce mix and match products on your online store. Some companies, for instance, sell custom meat or vegetable boxes to customers on a subscription basis. With WooCommerce, you can easily offer this option on your online store, in addition to selling custom meat or vegetable boxes on a subscription basis and other mix and match products examples. Keep reading to learn how to do this and more.
How do customers mix and match products in WooCommerce?
Create WooCommerce mix and match products order forms to let customers build their own customized product boxes. It will look something like this:
This is how the WooCommerce mix and match products system works:
You have a page on your online store where you list all of the products (and variations or other options) that customers can choose from Generally, the products are divided into several categories, each listed separately on the mix and match page. The categories should be based on how the customer would actually put together their mix and match product box.
The customer chooses items to create their own unique mix and match products box Standalone items appear on individual rows of a table, whereas mutually exclusive items appear as dropdown lists within a single row of the table. The customer simply ticks a checkbox next to each item they’d like to add to their mix and match product box.
Once they’ve picked out all of the items they’d like to purchase, they click the Add Selected to Cart button This adds all the selected items to the WooCommerce shopping cart.
The customer views their cart and can make changes to it, if necessary Once they’re happy with the order, they can proceed to the Woo checkout page and make a payment.
As the store owner, you’ll receive an email with the order details You can then build the customer's mix and match product box, add the products they selected to it, and ship it to them.
Which WordPress plugins will I need?
Under the hood, the mix and match products system uses WordPress to power your overall ecommerce website. It requires a free WooCommerce plugin to create products and manage the checkout process. You'll also need the WooCommerce Product Table plugin to list your inventory in a table layout on the mix and match product order form.
Next, I'll tell you how to set up your WooCommerce mix and match plugin. But first, let's look at a real-life case study of a website with this exact setup.
Case studies - How other WooCommerce websites sell mix and match products
Inspire Cosmetics - mix and match cosmetics boxes
Inspire Cosmetics - selling mix and match cosmetics boxes
Inspire Cosmetics has created a multi-step process for ordering mix and match make-up and cosmetics boxes.
They used the Beaver Builder WordPress page builder plugin to create a series of four connected pages in tabbed layout options. Each tab contains a separate list of WooCommerce mix and match products, created using the WooCommerce Product Table plugin.
This makes it quick and easy for customers to choose a box, select the contents and place their order in WooCommerce.
Barks & Squeaks - selling mix and match pet hampers
Barks & Squeaks use WooCommerce and WooCommerce Product Table to sell mix and match gift hampers for pets.
They list the items from each category on a single page. The customer chooses their box options first, then scrolls down to mix and match the contents.
Now you've learned all about how a WooCommerce mix and match plugin works. Next, I'll tell you how to set it up on your own WordPress website! Keep reading and we'll get started straight away.
How to create a WooCommerce mix and match products website
Letting customers put together their own product bundles using a product configurator can help you increase sales and make the customer feel special.
This tutorial assumes you already have WooCommerce installed on your WP website. If not, check out the fantastic guide on how to create a WooCommerce online store. When you're ready, continue this tutorial to transform it into a WooCommerce mix and match product configurator.
Here's a video on how to set it all up. You can also read our detailed written instructions below.
Step 1: Create the mix and match product categories
First, figure out how you’d like to design the mix and match products' user flow. Decide which categories you’d like to divide the WooCommerce mix and match ordering system into.
For example, if you wanted to let customers build their own gift hampers, you might consider creating a category for the box (or hamper), the contents, and wrapping and filling:
It’s a good idea to create a logical category structure that takes the customer on a journey and helps them put together their WooCommerce mix and match product in an intuitive and user-friendly way. In the above example, customers would order using a three-step process:
Select a box or hamper.
Choose the items they’d like to add to the box or hamper.
Configure padding and wrapping options.
This way, your customers can mix and match their own bespoke gift hampers and personalized product boxes.
Once you’ve settled on which categories you’d like to create, head over to Products -> Categories and create as many as you need.
Step 2: Plan out products and add them to your online store
Next, we’ll add the individual items we want to sell to our WC online store. The items that customers can mix and match to build their product box should be added as WooCommerce products.
Following our example, here are some of the WooCommerce products you might add under each mix and match category:
Box/Hamper
Hamper
Box
Contents
Candied Nuts
Luxury Biscuits
Decadent Chocolates
Red Wine Bottle
White Wine Bottle
Packaging
Gift Wrap
Ribbon
Straw Filling
First, jot down all of the products you’d like to sell. Categorize them under one of the categories you created in the previous step. Once that’s done, you need to decide whether you’d like to create each item on your list as an individual product or group it into variations.
To decide whether a particular product needs to have variations, consider whether the customer would have to make an either/or choice. In the example outlined above, the customer would have to pick either the hamper or the box. Whereas in the second stage, they’d simply be asked to select all of the items they’d like to add to their product box (or gift hamper).
Add products and/or variations based on these principles:
For 'or' choices where the customer can only choose one option, create a WooCommerce variable product. Add each option as a variation.
For 'and' choices where the customer can choose multiple options, create a standalone WooCommerce product for each item.
Tip: If you want to add multi-select options to individual products, keep reading to learn how.
Step 3. Add products to WooCommerce
Once you’ve planned out your products, add them to your WooCommerce store by following these steps:
Navigate to Products -> Add New from the admin panel.
Enter the WooCommerce mix and match the product’s details such as product title, description, and featured images.
Assign categories and tags.
From the Product Data section, choose a product type based on the format you’ve decided:
Simple Product. For standalone products that customers can add to their mix and match product bundles without variations, select the Simple Product.
Variable Product. Select Variable Product for all mutually exclusive items that customers can personalize before adding to their shopping carts. Follow these instructions to add variable products.
Click the Publish button.
Follow these steps to add all of your products to your online store.
Step 4: Create a mix and match products page
Now we're getting to the fun part! This is where your WooCommerce mix and match products configurator comes to life.
By now we’ve added all of the products to our WooCommerce store and categorized them. Next, we'll list everything in a mix and match products order form. By doing so, customers will be able to mix and match products and build custom gift boxes.
How to set it up
Purchase the WooCommerce Product Table plugin and install it on your WordPress website. You’ll receive a confirmation email with installation instructions and a plugin license key.
Head over to WooCommerce -> Settings -> Products -> Product Tables. Configure the following settings in the Add to cart column section:
Set the Add to cart button option to Checkbox only.
Set the Variations option to Show as a dropdown list.
Choose the Below table next to the ‘Add Selected’ position
Go to Pages -> Add New to create a new page where we’ll list the WooCommerce mix and match products. Add any text that will appear above the order form, such as instructions or information about the ordering process.
Divide the page into sub-headings. Each sub-heading will be based on the categories you created in Step 1. Following our example, the sub-headings might be Step 1 - Choose a Box, Step 2 - Choose your Contents, and Step 3 - Choose the Finishing Touches.
Finally, add the following shortcode under each sub-heading: [product_table category="toppings"]. Replace toppings with the slug of the corresponding category. You can get the category slug from the Products > Categories.
Tip: Use the other settings and the Product Table knowledge base to further customize your WooCommerce mix and match products order forms. For example, you can choose which columns to include in the product list.
That’s it! Now hit the Publish button and preview your page on the storefront. It should look something like this:
Bonus tip #1 - Add extra mix and match product options
Product add-ons appear in the add to cart column of the mix and match product configurator.
So far, you've learned how to use variations to add a choice of options for each mix and match products. This is fine for most WooCommerce mix and match configurators. However, variations aren't suitable if customers need to be able to select more than one option at a time.
Fortunately, you can easily do this with the WooCommerce Product Options plugin. This fantastic WooCommerce extension makes it easy to add extra options to your mix and match products. For example, you can add multi-select checkboxes to each product. You can even add text boxes where the customer can enter a personalized message.
Bonus tip #2 - Too many options? Add quick view lightboxes
Some WooCommerce mix and match products websites end up with a large number of variations or options for each product. For example, look at the Pizza Fiorentina product in the screenshot above. This product has 2 rows of product add-ons, which isn't a huge number of options - and it's already taking up a fair amount of vertical space. As a result, you can easily imagine what would happen if you tried to list several dozen options per product!
The solution is to remove the add to cart column from your mix and match products table, and replace it with quick view buttons. You can do this by adding the WooCommerce Quick View Pro WordPress plugin.
Customers click on the quick view buttons to view more product information and purchase options in a lightbox window.
There are lots of benefits from using quick view to sell WooCommerce mix and match products:
You can choose what information to include in the lightbox. For example, you may wish to show the full gallery of product images. Or you may wish to hide the images and just show extra product data or add to cart options. Alternatively, you can have both! Either way, there's no limit to the number of variations and options that you can offer in the lightbox.
Customers remain on the product table at all times and don't have to visit a separate page to purchase each better. That's why quick view is better than using the single product page to sell mix and match products.
WooCommerce Quick View Pro also supports other methods of selling mix and match products such as grouped products, Composite products, and Product Bundles. List the products in a table, and customers can create custom product bundles from within the quick view lightbox.
Bonus tip #3 - Sell mix and match product subscriptions
Most mix and match WooCommerce products configurators sell products on a one-off basis, with a single payment.
If you prefer, you can create mix and match product box subscriptions. The instructions are the same as above, but you need to add the YITH WooCommerce Subscriptions plugin to take repeat payments.
WooCommerce Subscriptions make it easy to accept free trials and regular payments for each product. You can choose whether to offer a free trial and whether customers will be billed weekly, monthly, or whatever frequency you like.
Bonus tip #4 - Restrict how many mix and match items the customer will order
So far, you've learned how to sell mix and match products by setting a fixed regular price for each product or variation. The total order cost is the sum of all the products that the customer selects and adds to their cart.
Some WooCommerce mix and match websites prefer to set a fixed cost for the entire product box. If you do this, then you'll need to add a product price for the box itself and set the price of the contents products as $0.00. (You can easily hide the item pricing column of the tables listing the box contents.)
If you do this, then you'll want to restrict the number of products that the customer can order. You can easily do this with the WooCommerce Quantity Manager plugin. Its plugin lets you create a minimum and maximum quantity rules. The rules prevent customers from ordering the wrong amount - essential for selling fixed price mix and match products in WooCommerce.
For example, you might set a minimum and maximum quantity of 1 for the box itself. You would then add a maximum quantity or value for the 'box contents' category. This controls how many items can be added to the box.
Bonus tip #5 - Sell mix and match packages with quantity-based discounts
Perhaps you want to sell WooCommerce mix and match products with a choice of packages, with discounts based on the number of products ordered. This is a good way to give discounts based on the number of photos purchased, without having to restrict the number of products that each person can buy.
To do this, use the WooCommerce Discount Manager plugin to dynamically change the price based on the number of products in the cart.
Next, you need to display the information in the frontend in a format that will encourage people to buy more:
At the top of the page, add information about the different packages and prices.
Underneath, use WooCommerce Product Table to list your mix and match products.
Customers can choose as many photos as they like and they will automatically be charged the correct price for their package.
Where to get the plugins
Letting customers mix and match products to create personalized product boxes and gift hampers is a great way to deliver an exceptional customer experience. And the best part is that it’s incredibly easy to do with the WooCommerce, WooCommerce Product Table, and Quick View WordPress plugins.
Now you know how to create your own WooCommerce mix and match product order form. Hopefully, you’re in a good position to take things further.
How do you use mix and match products in your WooCommerce store? We’d love to hear from you so let us know by commenting below!
A WordPress member directory plugin lets you create a list of your organisation's members. The member list will appear on a public or private page on your website.
Creating a member directory in WordPress can help you showcase your community and provide valuable resources for your users. In this tutorial, we'll walk you through how to set up a searchable table with user profile fields using the Posts Table Pro plugin. In addition, we'll cover how to allow members to sign up from the front end and sell access to the user directory using Gravity Forms payment extensions.
Members will be listed in a table with options to sort, search, or filter to find a particular member. When a user finds the member they're searching for in the members' directory, they can just click through to read their full profile. With the added ability to sign up for membership and pay for a directory listing, your member directory will become a valuable resource for your users and a source of revenue for your business.
A new type of WordPress member directory plugin
This is completely different from a WordPress membership plugin. While a membership plugin lets you create a private members-only area for your members to log into, this member directory plugin creates a directory of people or members that's sortable and filterable by the user. The directory can list people whether they're members or not.
It's also different from most WordPress member directory plugins, which typically create a fairly basic directory listing all the users from your WordPress website (i.e. everyone from the Users section of the WordPress admin.)
While this might be fine for some membership site directories, what happens if your members are not WordPress admin users? Your directory of members might contain different people from your list of WordPress users.
This makes it tricky to find the best plugin for your WordPress member directory with your profile. If you search for this sort of plugin, you'll find membership plugins designed to create a protected members-only area of your website, or member directories listing all your WordPress users.
This tutorial will show you how to build a different sort of WordPress member directory. We'll use the Posts Table Pro plugin, alongside other free WordPress plugins for creating member profiles. The members in your directory don't need to have logins for your website - your users are kept completely separate.
The best part about this tutorial? It's surprisingly simple (and you don't need any technical expertise!). If you follow these steps, you'll have your WordPress member directory up and running in no time.
Check out these examples of WordPress websites with a searchable member directory with the profile. See what's possible and find inspiration to start building your own directory of members today.
Case study 1 - CEPPs members directory
CEPPs is a charity that supports mothers and early childhood. They use the Posts Table Pro plugin to create a WordPress member directory with profiles.
The CEPPS directory of members lists their supporters in a mobile-friendly, fully responsive WordPress table. Each supporter is listed within a custom post type in WordPress. Information about each member is stored as custom fields, categories, and taxonomies. Each piece of data is stored as a separate column in the table. Visitors can sort the table by clicking on any column header. They can search for any keyword by typing it into the search box. They can also filter the WordPress member directory by clicking on country, city, type or tag. This makes the member directory really flexible and quick to use.
You can click on a logo, name, or 'Visit' link to view the individual member profile page. This contains further information about each member.
Case study 2 - SuperConnection consultants directory
SuperConnection has a WordPress member directory, listing their expert consultants. Each consultant has attended their training and is available for consultation.
Consultants are listed in alphabetical order with their names and location. You can sort by either column or perform an instant search using the search box. This makes it easy to find a consultant in your area.
You can click from the directory to the individual member profile pages. These include various custom fields about each member including contact details, location map, and classes completed.
Consultants directory table:
Member profile page:
If these examples are the sort of WordPress member directory that you want to build, keep reading... This tutorial will teach you how to do the same for your own website. We'll actually be going even further as I'll show you how to add extra columns and filter drop-downs to the directory, too!
Case study 3 - Private members-only database of authors
He was looking for an easily searchable members database that would allow the authors to search for other members with skills or knowledge in a particular area.
When one member finds another with the skills they are interested in, they can contact them, ask questions, or chat.
Christopher set up his WordPress members-only directory by following the instructions in this tutorial and was delighted with the result. You can read his review of the plugin.
What are your requirements for a WordPress membership directory with profiles?
First, it's important to think about your requirements. What do you want to achieve from your WordPress member directory plugin? This will help you decide if the type of member directory covered in this tutorial is right for you.
Planning your member directory
Will your WordPress member directory be publicly available or hidden from public view? I'll show you how to create a public member directory and how to password protect it. If you want to add further security - for example, by making it available to specific groups via a WordPress membership plugin - then we won't be covering this. However, techniques covered in this tutorial can be used anywhere on a WordPress site. This means that you can put it on a page that is restricted using another membership plugin, if you like.
Can members create and manage their own profiles? This tutorial is about how to create a WordPress member directory with profiles that you will maintain as the website administrator. If you want members to be able to create their own profiles then you'll need to do some extra work outside of this tutorial. (Bonus tip: You could use Gravity Forms with the Gravity Forms + Custom Post Types plugin to let members submit their own profiles to the directory. You could even take payment via PayPal if required. New members would complete an online form with their profile information which would then be saved in the 'Members' custom post type to be displayed in the directory. Please see our tutorial on how to set this up.)
Do your members have to be WordPress users? Unlike other membership directory WordPress plugins, you'll be adding the members as a custom post type in WordPress. The Posts Table Pro plugin we'll be using as our member directory plugin displays custom post types but NOT WordPress users or user roles. If your members are also WordPress users (i.e. they're listed in the Users section of the WordPress admin) then you can't list them in the directory. To do this, you'd need to add each member to the 'Members' custom post type we'll be creating in this tutorial.
What information will the WordPress member directory plugin contain?
You should also consider:
What information do you want to display about each member? Write a list of the data you want to display using Posts Table Pro, the best WordPress member directory plugin. This can include various text fields (name, description, experience, etc.), one or more images, icons (e.g. linking to their social media profiles), etc. Basically, anything you like. You'll use this later in the tutorial when you create the custom fields for your WordPress directory of members with member profiles.
How will you structure your WordPress directory of members? As well as the unique data about each member such as their name and email, you'll probably want to categorize your directory of members. Write a list of the different ways you want users to be able to sort and filter the member directory.
Armed with this information, you're ready to start building your WordPress member directory.
1. Create a 'Members' custom post type
Part 1 covers the initial setup of creating a WordPress member directory. You can also read the full instructions below.
Each WordPress member in your directory will be stored with their profile data in a WordPress custom post type called 'Members'. (Don't worry, you can call it something else if you prefer.) This will create a 'Members' section on the left of the WordPress admin. Each member will be added as a separate 'post' within this section.
If you're a developer, you can create a 'Members' custom post type the way you would usually. If not, you can do it using the Custom Post Type UI plugin.
Go to Plugins > Add New and search for 'Custom Post Type UI'.
Install and activate the plugin.
Go to CPT UI > Add/Edit Post Types.
Complete the following fields on the 'Add New Post Type' tab:
Post Type Slug - Add a lower case label for the post type, e.g. 'members'. This will be used in the URL for your member profile pages, e.g. www.yoursite.com/members/joebloggs.
Plural Label - Add a plural label for your Members post type, e.g. 'Members'. This will appear in the left of the WordPress admin.
Singular Label - Add a singular label, e.g. 'Member'. This will appear when you add a new post in your Members post type, e.g. 'Add New Member'.
Now scroll down to the Supports section, ignoring everything in between. (Feel free to check these fields and change them if they're relevant.) Tick the boxes for the fields that you plan to use for your member profiles. Most member directories will need the title, editor (main content area/description) as a minimum. You may also want a featured image and excerpt. I'll also show you how to add custom fields and taxonomies later in this tutorial.
Scroll a bit further to the Built-in Taxonomies section. Tick 'Categories' and 'Tags' if you plan to use these.
Click the blue 'Save Post Type' button at the bottom of the page.
2. Create your categories, tags & custom taxonomies
Categories, tags, and custom taxonomies let you store information that will apply to multiple members in your directory. People viewing your members directory can filter the table to find all the members with a specific category/tag/taxonomy.
For example, you might want to categorize your WordPress member directory by local area. You could create a category, tag, or taxonomy for each geographical area. An 'Area' filter could appear above the member directory so that users can filter the table for members in a specific area.
These 3 ways of organizing content in WordPress are quite similar. To be honest, it's not that important which you use, but here are some tips to help you decide between them:
Categories - Use WordPress categories as the primary way of organizing your member directory plugin. All members should come under one or more categories.
Tags - Tags are labels that provide extra information about your members. They're optional and members can have no tags or several.
Custom Taxonomies - Use these for additional categorization that you want to use in the WordPress member directory. For example, if you're using your main categories for the geographical area then you might want custom taxonomies for any other ways you want to categorize your members.
Some examples
For example, you might use categories to record the geographical area of each member, e.g. 'England'. Each member might have some tags relating to their specific skills such as 'French speaking' or '5+ years experience'. You might have custom taxonomies for 'Level' (e.g. Junior, Intermediate, or Senior Consultant).
You can create tags when you add the members later, but you need to add the categories and custom taxonomies now.
2a. Create your categories
Go to Members > Categories in the WordPress admin.
On the left-hand side, add the name and slug (the end bit of the URL) for each category you want to create.
Click 'Add New Category'.
Repeat the process for all the categories you want to create.
Tip: You can create sub-categories by selecting another category as the 'parent'. However, your member directory will list all the categories and sub-categories on the same level, for example in the 'Categories' filter dropdown. If you want to list them separately then you should create a custom taxonomy instead. For example, you might be using your top-level categories to record each member's country. Instead of adding the regions within each country as sub-categories, you can create a custom taxonomy for 'Region'. This will let you list the regions as a separate dropdown filter above the members table, instead of combining the countries and regions in a single list of categories.
2b. Create your custom taxonomies
Create custom taxonomies using the Custom Post Type UI plugin you used to create the 'Members' post type:
Go to CPT UI > Add/Edit Taxonomies in the WordPress admin.
Complete the following fields in the Add New Taxonomy tab:
Taxonomy Slug - a lowercase label for the taxonomy (e.g. 'town').
Plural Label - The name for the taxonomy in the plural (e.g. 'Towns').
Singular Label - The name for the taxonomy in the singular (e.g. 'Town').
Attach to Post Type - Select the Members custom post type.
Click the blue 'Save Taxonomy' button.
Now when you add new members to the directory, you'll be able to add data to the taxonomy you have added. You can create as many custom taxonomies as you like.
3. Custom fields
Custom fields let you store unique data about your members that isn't possible within standard WordPress fields. Look at the list you wrote earlier about the data you need in the WordPress member directory. This probably includes things like member name, phone number, etc. Mark which items in the list correspond to the following WordPress fields:
ID - This is the unique ID for the member which is stored in the WordPress database and will be created automatically when you add each member. The IDs will be non-sequential as they are used for other types of content in WordPress too. You may want to use this to store member ids. Or if you want to choose the ID, you should use a custom field instead.
Title - Use this for the member's name.
Content - Use this for the main description on the member profile.
Excerpt - Use this if you want to display a brief introduction to the member on the main directory page. (If you prefer, you can leave this blank and just display the first few words of the main description instead.)
Image - Use this for the member's photo or logo.
Date - This is the date when the member was added to the website. You can change the date if needed.
Any fields that don't come under the above list and aren't suitable for categories, tags, or custom taxonomies (i.e. they're not unique to each member) should be added as custom fields. Examples of the sort of member data you'll need custom fields for include email address, phone number, and date of birth.
3a. Create your custom fields
Once you've decided which custom fields you'll need, it's time to add them to your Members custom post type. We'll do this using the Advanced Custom Fields plugin.
Go to Plugins > Add New.
Search for 'Advanced Custom Fields'.
Install and activate the plugin.
Go to Custom Fields in the WordPress admin.
Click Add New Field Group. Enter the name for the group of custom fields you'll create for your Members post type.
Now click 'Add Field' and add the following information for each of the custom fields you want to create. (e.g. add 1 custom field for 'Phone' and another for 'Email'):
Field Label - The title for your custom field (e.g. 'Phone').
Field Name - Lower case label for the custom field (e.g. 'phone').
Field Type - Select the method that you'll use to complete this custom field in the WordPress admin. e.g. select 'Text' to add basic information about each member. Or 'Email' for an email address. Or maybe a Select dropdown, Check Box or Radio Button to add some pre-set options to choose from.
Also complete any of the other fields, as needed.
Location Rules - Select 'Show this field group' if the post type is equal to your members post type.
Now, your custom fields will appear on the 'Add New Member' page. You can store this information about everyone in your member directory.
4. Add your members to the directory
Now you've finished creating the infrastructure for storing your member profiles in the directory. It's time to add all your members:
Go to Members > Add New in the WordPress admin.
Add the member profile using the standard WordPress fields, categories, tags, taxonomies, and custom fields you created earlier.
Click the blue 'Publish' button.
Repeat the process for all your other member profiles.
5. Create your searchable member directory table
The next step is to add a members directory table to a page on your website. This will list all your members, with optional click-throughs to the individual member profile pages.
Here's Part 2 of my video tutorial on how to create a WordPress members directory with profiles. Or you can read the written instructions below.
EMBED THIS VIDEO ON YOUR WEBSITE Embed code: <iframe src="https://www.youtube.com/embed/wGrx8BUsTB4?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Buy the Posts Table Pro plugin, download the plugin files from the order confirmation page and copy your license key.
Go to Posts → Add New in the WordPress admin.
Click 'Upload' and upload the Posts Table Pro files.
Activate the plugin.
Go to Post Tables → Settings, enter your license key and click save.
Go to the page on your WordPress website where you want to add the member directory table. Add the shortcode: [posts_table post_type="members"]. This tells Posts Table Pro to list all your member custom posts in a table. (Note: If you chose something other than 'members' as the slug for your custom post type, enter this instead.)
Save the page and view it.
You will see all your members listed in an interactive table.
6. Customise your WordPress member directory
By default, your member directory table will include columns for title, content, author, and date. Some of these are more relevant to a blog than a directory of members. Next, I'll show you how to customize the columns and various other elements of your WordPress member directory.
The WordPress table plugin Posts Table Pro comes with lots of options to control how your member directory looks and behaves. You can read about all the options in the knowledge base. Here's a summary of the ones most relevant to a WordPress member directory.
Choose your columns to appear in the table
Your member's table can include columns for ID, title, content, excerpt, image, date, author, categories, tags, status, or any custom field or taxonomy. Add these to the shortcode in the following format. This example will add columns for image, name, excerpt, categories, a custom field called 'phone', and a custom taxonomy called 'level'.
By default, the WordPress member directory includes a search box above the table. You can also add filter dropdowns to let users filter by category, tax, or custom taxonomy.
The default member directory lists members on the date they were added, with the most recent first. You can change it to sort by any column in the table or other options such as setting a custom order.
Most WordPress member directory plugins sort the list alphabetically. This shortcode will sort the table alphabetically by name in ascending order (i.e. A-Z).
This will disable all links in the WordPress member directory. If you want people to be able to click on the categories, tags or taxonomies to filter the table, while still disabling the profile page links, use this instead:
[posts_table post_type="members" columns="image,title,excerpt,categories,cf:phone,tax:level" links="categories,tags,tax:level"] (you may need to change this slightly depending on which taxonomies you're displaying)
This way, all your members will still be listed in the directory table. But users won't be able to view separate profile pages for each member.
Advanced: Create a directory listing specific members only
The examples above will list all members in the directory table. If you prefer, you can create multiple tables - each listing different types of members. For example:
You may want to list members with different skill levels on different pages of your website.
Alternatively, you might want to divide your member directory page into multiple sections. You might have a 'Europe' subheading followed by a table of members in the Europe category. Then you could have an 'Asia' subheading and a table of members in the 'Asia' category. And so on.
You can add tables containing members with a specific category, tag, taxonomy, or custom field. (It's also possible to create tables with members who were added on a specific day, month or year but you're less likely to need this.)
7. Test the member profile page
Next, go to the individual profile page for a member and check if it looks ok. You can find this by clicking the name of a member in the directory. Or go to the Members page in the WordPress admin, hover over a member, and click 'View'.
By default, the member profile pages will use the same template as the standard blog posts in your theme. The exact content depends on the theme but probably includes the title, content, featured image, tags, and categories. There may also be information you don't want such as the date or author. It definitely won't include any custom fields or taxonomies.
Customizing the member profile
This is where it gets a bit tricky. If you're happy with the member profile page as it is, that's great. Your custom fields and taxonomies are listed in the member directory table so you may not need them on the individual member profile. If you've disabled the links to the member profile pages (see above), that's fine too.
However, if you want to change the content or layout of your member profiles then this requires a bit more technical know-how. The only way to customize the member profile page is to create a new template for the custom post type in your theme or child theme. You then need to edit the code to make the required changes.
This is beyond the scope of this introductory tutorial and if you're not comfortable editing code, I recommend posting a job on Codeable. Codeable is a well-known marketplace of tried and tested WordPress experts. It's a good place to find someone good for small jobs like this. Alternatively, the Advanced Custom Fields documentation includes instructions on adding custom fields and taxonomies to your template.
How to password protect your WordPress member directory
If you want your WordPress member directory and profiles to be publicly available then you've finished - well done! To create a private members directory, the easiest option is to password protect the relevant page in WordPress.
Go to 'Pages' in the admin and click on the page used for your WordPress member directory table.
Click the 'Edit' link next to 'Visibility' in the 'Publish' panel at the top right of the screen.
Choose 'Password protected' and enter a password for the page.
Click the blue Publish or Update button.
You can then give the password to everyone who needs access to the member directory.
For a more advanced solution, you can use a WordPress membership plugin to protect the page or to create a wider members area. The Groups WordPress plugin offers a simple, user-friendly way to create a protected members area.
Create a members sidebar widget
If your WordPress member directory website has a page sidebar, then it can be a good idea to list members in a widget. The best way to do this is to show the full member directory on the main page, and a simpler version in a sidebar widget.
This is how to add a simplified member directory to your website's sidebar:
Go to Tables → Add New.
Create a table listing the 'Members' post type you created earlier in this tutorial.
On the 'Columns' page, just choose two or three columns. I would recommend something like "image, title, button". This will create a 3-column WordPress member directory containing the name of each member, plus their image and a button linking to their full member profile.
If your page sidebar is created using the Gutenberg block editor, then use the 'Posts Table' widget to insert the new table. Alternatively, copy the shortcode from the last page of the table builder and paste it into a text widget.
How to allow members to sign up from the front end and sell access to the member directory
One of the best ways to make your member directory more valuable is to allow users to sign up for membership directly from the front end of your website. This can be done easily using Gravity Forms, a popular form builder plugin for WordPress.
The way it works is that you'll use Gravity Forms to create a membership signup form. You'll set this up so that when a new member registers, it will save their information to the 'Members' post type you created earlier in this tutorial. When you approve the new registration, the member will automatically appear in the member directory which you created using Posts Table Pro.
This is the fastest way to create an automated WordPress member directory. I recommend holding new member registrations for moderation, but you can automate it 100% by auto-publishing the new member posts instead of saving them as drafts and publishing them manually.
Step 1: Create a member's custom post type with Gravity Forms
Make sure you have followed the instructions above to create a members custom post type in WordPress. Once this is set up, you can use Gravity Forms to create a form that allows users to sign up for membership. To do this, you'll need to install the Gravity Forms add-on, which allows you to save the information submitted by the user to the member's custom post type.
To create a form, simply navigate to Forms → New Form in your WordPress dashboard and add the necessary fields. You can include fields for user information, such as name, email address, and a brief description, as well as any other relevant details you want to collect. Make you have created a field for each of the pieces of data that you added to your members custom post type.
Next, you need to use the Gravity Forms + Custom Post Types plugin to map the form fields to your members custom post type. This means that when a new member registers, their data will automatically be saved to the correct fields in your member directory. Gravity Wiz have a tutorial about how to save Gravity Forms submissions as custom posts. Do this, then come back finish the process of setting up the WordPress members directory plugin.
Once you've created your form, you can add it to a page on your website using the Gravity Forms shortcode. Name the page something like 'Member Registration' or 'Become a Member'.
Step 2: Use Gravity Forms payment extensions to sell access
To sell access to your member directory, you can use Gravity Forms payment extensions to create a payment gateway for users who want to be included in the directory. There are several payment gateway options available, including PayPal, Stripe, and Authorize.net, so you can choose the one that works best for your business.
To set up a payment gateway, you'll need to install and activate the appropriate Gravity Forms payment extension. Once this is done, you can create a new form and add the payment fields to it. This will allow users to pay for their membership directly from your website.
Create your own WordPress member directory with a profile
Now it's your turn! I've given you all the information to create a fully functional member directory for your WordPress site. You know how to create a 'Members' custom post type with various fields of data about your members. I've told you how to use Posts Table Pro to create a searchable members directory table. You know how to customize the members' table and where to get the resources to edit your member profile template. I've even shown you how to hide the member directory from public view.
Allowing users to sign up for membership directly from the front end of your website and selling access to your member directory can also greatly increase the value of your directory while generating revenue for your business. By following the steps outlined above, you can easily set up these features using Gravity Forms and WordPress. Don't forget to enable moderation to ensure your directory stays up-to-date and relevant.
I'd love to see a link to your own WordPress member directory after you've created it. How did you get on? Is there anything I can do to improve this WordPress tutorial? Please leave your comments below.
This is the ultimate guide to WooCommerce for photographers. WooCommerce offers some fantastic opportunities to sell photos online, whether this is to the general public or specific clients. I'll walk you through the best WooCommerce photography plugins and WooCommerce gallery plugins , as well as provide tips on how to sell more photos on your WordPress website.
Not all photographers want to sell their images to the general public. If you provide bespoke photography services, you'll want to sell photos in secure areas of your website that only certain clients can access. Fortunately, WooCommerce for photographers is straightforward. And if you're not a photographer, don't worry! These solutions are suitable for anyone wanting to create client-specific products or categories in WooCommerce.
By the end of this article, you'll know how to choose the best WooCommerce for photographers plugins and set them up:
Skip straight to the section you're interested in for detailed written instructions. To bring it all together, we've also created this video tutorial on how to create a complete WooCommerce photography website. It covers all the features you need, including quick bulk upload, photo order form pages with variations, plus a password protected category for each client:
WooCommerce & WordPress for Photographers: how useful is it?
Does just what I needed. I list the set of photos based on each client.
Good adjustment and easy to use.
There a huge number of WooCommerce gallery plugins, WooCommerce gallery plugins and other miscellaneous plugins for photographers. A huge number already have WordPress websites. It's hardly surprising given that WordPress powers over 1/4 of all websites. A huge number of WordPress photography themes and plugins are available. This makes WP for photographers easy: you can create professional websites using flexible, off-the-shelf solutions.
WooCommerce is the world's biggest e-commerce platform. As well as powering a huge 94.3% of all WordPress e-commerce websites, it's used by over 41% of all e-commerce sites worldwide. Wow.
While popularity isn't everything, WooCommerce is obviously here to stay. It's well supported with a huge ecosystem of Woo experts behind it. With so many plugins and add-ons available, there are plenty of options for selling client-specific products in WooCommerce. Not to mention all the other great plugins and features for displaying photos in WooCommerce.
Types of photography you can sell with WooCommerce
You can use WooCommerce to sell absolutely any tip of photography product - digital or printed. For example:
Type of photography Artistic photography, aerial or drone images, client photography (e.g. family, couple or wedding photos), editorial images, event photos, portraits, stock photos.
Image genres Animals, architecture, beaches, holidays and travel, business, celebrities, cities, fashion, food and cookery, home and lifestyle, natural photography, panoramas, seasonal photography, sports and fitness, technology.
Delivery mechanism Digital photos, printed photos, or images printed onto other media such as stationery and promotional materials.
Whatever type of photos you need to sell, you can do it with WooCommerce. Keep reading to find out how.
WooCommerce for Photographers case study – Photo Studio TNK WooCommerce photography website
Photo Studio TNK is a WooCommerce for photographers website run by Thierry in Paris, France. His clients book him for photoshoots, he then sells the prints to them on his WooCommerce website. Selling prints is a big part of his business, so Thierry's clients each need access to a private space where they can view and purchase their photos. That’s why Thierry’s WooCommerce website is powered by our WooCommerce Protected Categories and WooCommerce Product Table plugins.
This is how it works. After a photoshoot, Thierry uploads the images into the client’s hidden WC category. The client is sent a password. They log on to their hidden area to view the images. Each image is displayed in one table than can be filtered. Clients can view images, select variations and add multiple photos to the cart, all from this one table.
It works well for customers as they can view the images on their mobile or laptop and they don't need to leave the page to purchase their chosen images.
You can read more about Thierry’s WooCommerce photography website here. Or read on to find out more about how to make WooCommerce gallery plugins work for your photography business.
Why sell client-specific products in WooCommerce?
There are lots of reasons why a photographer might want a WooCommerce photography plugin to sell client-specific products. Woo for photographers is highly flexible. Let's take a look:
Event or wedding photography
Wedding photographers take photos of a specific event such as a wedding. Afterwards, they need to upload the photos of the event for the couple to view.
A wedding photographer will typically charge a fixed fee for the event itself, with perhaps a photo album included in the price. They may earn extra revenue from the wedding by selling extra options to the couple and their guests. For example, the photos can be bought individually (either as photo prints with different framing options, or as digital prints for download) via the photographer's website. The photographer might also sell packages via their website, such as additional albums or photo montages.
The images must be uploaded to a secure area of the WooCommerce photography website that only the couple - and possibly their guests - can access. People with access to the photos should be able to buy them online.
Family photographer
A family photographer is similar to a wedding or event photographer in that they're commissioned to do a photoshoot of a specific family. They might do the photoshoot for free, with the family just paying for the photos they actually want.
After the photoshoot, the photos need uploading to a private area on their website. The family can login, choose their photos and buy online.
School photography
School photographers take individual and class photos of school children. After visiting the school (which they typically won't charge for), they earn money by selling the photos to parents. The same often happens in nurseries, pre-schools and kindergardens.
Traditionally, school photographers would print a preview of each photo which the school would distribute to parents. This still happens, but parents are typically directed to the school photographer's website where they can view all the images of the class and buy online. The website often sells many options such as different packs and framing choices, and even other objects printed with the photo (e.g. mugs or mouse mats).
Given the confidentiality around photos of children, it's important that school photography is uploaded to a secure area. Only the individual parents - or perhaps the parents for the whole class - can access the photos.
How photographers can sell client-specific products in WooCommerce
There's an excellent plugin to sell client-specific products to photography clients. It involves creating hidden areas of your WordPress WooCommerce website that only the appropriate client can access. It does this by password protecting a category so that only people with the correct password can view and buy the hidden photos.
Password protected categories are better than creating a separate login for each user and giving them access to specific photos in WC. This is because:
You don't have to spend time creating a separate user login for each client.
You can easily give multiple clients access to a hidden category of photos. For example, wedding photographers can give a shared password to the bride and groom, and all their wedding guests. Everyone can access the protected category and buy the photos, resulting in more sales for you! (Tip: You can create multiple passwords for each customer, if you want to. This is still easier to manage than creating a full WordPress user login for each person who accesses your protected photos.)
Create a password protected category for each client
To use the plugin, photographers can create a separate product category for each client in WooCommerce. You can then upload all the photos for that client to the relevant category. For regular clients, you can create sub-categories - one for each event or photoshoot.
How to create client-specific WooCommerce password protected categories
In Pages > Add New, create a page called 'Client Login' (or similar). Leave this blank and Publish the page.
Go to WooCommerce > Settings > Products > Password Protected Categories. De-select the options to show protected categories and products in the public areas of the site. This will hide your client-specific products so no one else will know they exist. Change any other settings as needed, for example to customise the text on the WooCommerce category login form.
Go to Products > Categories and create a category (plus any sub-categories) for each photography client. In the 'Visibility' section, choose 'Password protected' and enter 1 or more passwords. (Tip: Don't password protect any sub-categories - they will automatically inherit the same password as the parent category.)
Upload the photos that you want to sell to each client by creating products in WooCommerce and assigning them to the correct category. (If you've already added your photos products for the client, go to the main Products list in WP. Use Quick Edit to categorise them quickly.)
Finally, go to Appearance Menus and add your Client Login page to the menu. Or if you prefer, link to this page from the header, footer or anywhere else on your site. (Or just keep it hidden from your public website and send the link to your clients.) You can also add a login form to a text widget using the shortcode: [category_login].
And that's it!
That's all you need to do to sell client-specific products and categories for a WooCommerce photography website. When a client visits your website, they can click on the 'Client login' link to view the login page. On entering the correct password, they will be automatically directed to their own category. They won't be able to see your other clients' categories - just their own.
The plugin is simple but secure. Visitors will be prompted for a password whether they try to access the login page, the category page, a sub-category or a specific product page. Once they've unlocked their client-specific category, they can navigate anywhere within that category without having to re-enter the password.
It's the perfect way for any photographer to securely sell customer-specific products in WooCommerce.
Bonus! Tips on using WooCommerce for a photography website
So far, you've discovered an easy way for photographers to use WooCommerce to sell photos to specific clients. Then some tips on how photographers can use WooCommerce more effectively.
Sell physical photo prints, downloadable digital photos & other types of product
One of the best things about WooCommerce for photographers is that you can sell multiple product types. The ones most suited to a WooCommerce photography website are:
Standard products This is a traditional 'physical' product which you will ship to the customer. With this product type, you can add postage costs.
Downloadable products You can also use WooCommerce to sell downloadable products. These don't have a shipping cost. When you create a downloadable product, you can upload the digital image file of the photo. Once a client has purchased the digital version of a photo, they will be given access to a secure link where they can download it.
By combining simple and downloadable products, you can design a WooCommerce photography website where you can sell photo prints and digital versions. If you only want to sell one of these product types (e.g. some photographers refuse to sell digital versions of their photos), that's fine too!
Use WooCommerce Product Table to list more photos per page
Most themes have a fairly typical WooCommerce category layout, which may or may not be suitable for selling client-specific photography products. This tends to have big images with the product name, price and add to cart button.
The usual layout is pretty good on most WooCommerce for photographers websites due to the big images. However, it's less appropriate for selling photography products that aren't so visual. For example, a product category for framing options and photo bundles may not need big images. Instead, you might prefer to list as many products per possible, with extra information to make it easy to compare products such as size and colour.
If that applies to any of your products then WooCommerce Product Table offers a better photo gallery layout. It lists products in a searchable, sortable table or grid with filters.
You can make the product images as big or as small as you like (or hide them completely). This is better for less visual products such as frames or bundles, where you just want to list the options on a single page.
How to use WooCommerce Product Table to sell photos with password protected categories for each client
WooCommerce Product Table is fully compatible with the Password Protected Categories plugin that I told you about earlier. To use the two plugins together, you just need to follow these instructions to automatically add the product table layout to your category archive template file.
When your photography clients log into their hidden password protected category, they will see their photos presented in a product table layout.
What if my client has already paid for their photos?
Some photographers upload photos so that clients can buy them individually, whereas others take payment as a package beforehand. You can let clients order photos without having to pay for each one. The exact method depends on whether you're selling physical or digital downloadable photos.
Photo prints and physical products
Add your photos as WooCommerce products using the method that I described above. Instead of requiring payment online, choose an offline payment gateway such as 'Invoice'. You can rename this to anything you like, so the word 'invoice' won't appear anywhere.
When the customer adds photos to the cart and the checkout, they can use this pseudo payment method to complete their order without having to pay.
If you still want to take payment for other types of product, then that's fine too. Simply use the Conditional Shipping and Payments plugin to show the pseudo payment method for specific categories only.
Downloadable digital photos
Your customers can also download their pre-paid photos from their private portal, without having to pay online. To do this, I recommend using the following plugins alongside WooCommerce Protected Categories and WooCommerce Product Table:
Free Downloads WooCommerce - Add each photo as a downloadable WooCommerce product, and use this free plugin to allow customers to download them without having to check out or pay online.
WooCommerce Quantity Manager - If a client has pre-paid to download a specific number of photos, then use this plugin to restrict the number of products they can download. For example, if they have purchased a package of 20 photos then you should set a maximum quantity of 20. You can set limits on the client's whole category, or individual products/photos.
Use quickview to show multiple photos and image zoom
WooCommerce Product Table is ideal for listing photography products. However, the size constraints of the image column mean that it can only show one static image of each product.
You can show extra images by adding the WooCommerce Quick View Pro plugin. This handy plugin displays the full image gallery for each product, and customers can scroll between images by clicking on the thumbnails or using navigation bullets.
You can hover over an image to zoom in on it, showcasing your photos in full high definition that will inspire people to buy them.
The quick view plugin is very flexible and you can choose which style of photo gallery to show, and whether to include images only or whether to add extra product data and purchase options. It's the perfect way to provide further information and show off your photography more effectively without taking people to a separate page for each product.
Use product variations or add-ons to provide multiple options
WooCommerce photography websites often need to sell products with several options. For example, you might sell a photo print in multiple sizes. You might offer a choice of framing options. You could offer different file formats for your photos.
Give customers a choice with product variations
Use variable products in WooCommerce to add extra options. Customers can select the combination of variations they need and see the updated price before adding photos to the cart.
Sell optional extras and customizations with Product Add-Ons
If you need extra flexibility (e.g. multi-select checkboxes or space for the customer to add a personal message), then you can use the WooCommerce Product Options plugin.
This WooCommerce extension adds extra add-on fields to the product page where clients can add text, upload a file, or choose additional options.
The add-on options will appear in the add to cart column of your product table. Customers can select them before adding to the cart.
Add a watermark to protect your images
Many photographers who sell photos in WooCommerce wish to protect their images and prevent people from downloading them without making a purchase. After all, the product featured image is available for people to see before they buy. Anyone with basic computer knowledge knows how to right click on a photo to download it, or how to take a screenshot of it.
There are several easy ways to protect your photos:
When you add the product featured image, make sure it's low resolution. That way, if anyone downloads it then it won't be print quality. They must pay for the high resolution downloadable product in order to get the full quality version. (Of course, they can still share the low res photo on social media, so you may want more protection.)
You can also use the YITH WooCommerce Watermark plugin to automatically add a watermark to your featured images. This is a neat compromise because while it doesn't prevent people from downloading the image, the watermark will prevent them from using it. They must buy the photo in order to receive the un-watermarked version.
Bulk import photo products: WooCommerce import and WooCommerce Gallery plugins
Since publishing this tutorial, lots of you have asked how to bulk import photos to sell in WooCommerce for photographers. For example, a photographer might want to upload an entire photoshoot to their website and sell each image as a separate product. It would take too long to do this manually, so you need a WooCommerce gallery import plugin that can import simple, variable and downloadable products.
You can do this using the official Product CSV Import Suite plugin. I'll tell you how to import your photos using this plugin now:
Use FTP to upload all the photos to the /wp-content/uploads/ folder on your website. To keep your photos organized, add them under the current month. This is easy, as the uploads folder is already structured by month. (If you haven't used FTP before, learn how here.)
If you want to create a lower resolution version of each photo to use as the main product image, upload these too.
Next, prepare a CSV file containing the product data that you wish to import. The easiest way to create a CSV file is to use spreadsheet software such as Microsoft Excel or Numbers. When you've finished, use the Save As or Export option to save the file as CSV.
Add all the product data using the column headers in the import plugin documentation. If you want each product or variation to have the same data (e.g. price) then you can copy and paste rows of the spreadsheet to quickly add them - just make sure each row has a unique URL for the actual image.
If you're selling photos as downloadable products, use this section of the documentation to add the downloadable product data to the CSV file. This includes downloadable file URL (this will be the URL of the photo that you uploaded via FTP), download limit and expiry.
When the CSV file is complete, upload it using the Product CSV Import Suite plugin. This will automatically import your photos as WooCommerce products, so you can start selling them.
Preparing your CSV file sounds a bit daunting. Stick with it, as the documentation is excellent and covers everything you need to know. WooCommerce.com also provide excellent live chat support to help with any problems. Once you've created your first CSV file, it will be much easier next time.
WooCommerce for photographers – time to create your website!
I hope this guide has helped you to choose the best WooCommerce photography plugins or WooCommerce gallery plugin for your WordPress website. I'd love to hear how you get on.
[/image_border]
This is how it works. After a photoshoot, Thierry uploads the images into the client’s hidden WC category. The client is sent a password. They log on to their hidden area to view the images. Each image is displayed in one table than can be filtered. Clients can view images, select variations and add multiple photos to the cart, all from this one table.
