Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Enhance WooCommerce Store’s UX By Adding Product Tables

July 14, 2017

5 Min Read
Reading Time: 5 minutes

To be successful in the ecommerce industry, you need to combine well-presented products with detailed product tables. This is especially true for WooCommerce web stores. A customer is always attracted to a clear product brief.

Woocommerce Store-Sales by Adding Product Tables

WooCommerce product tables can increase your sales by listing products in a more informative, customer-friendly layout. Customers can see more products on a single page, with all the data they need – not just standard information such as image, title, and price.

If you use product tables as a one-page WooCommerce order form, then customers can order quickly from the product page. This increases sales and reduces bounce rate.

Here are some examples to show you how product tables can enhance your ecommerce store.

WooCommerce Product Catalog or Order Form

More and more websites are using WooCommerce as a product catalog or bulk order form. This presents all the products in a grid layout with add to cart buttons. Customers can quickly find products, select as many as they like, and add to cart straight from the product table.

You can add as many product tables as you like, each displaying different products. For example, a lot of restaurants are using WooCommerce to create a restaurant order system. Each section of the menu (e.g. starters, mains, and desserts) are presented in separate tables, allowing customers to add all the foods to their cart using the one-page order form.

Wholesale customers already know what they need to order and don’t want to scroll through big images or long descriptions. By using product tables to create a wholesale order form, you can easily adapt WooCommerce for wholesale or trade users.

WooCommerce Directory

Product tables are ideal for creating a WooCommerce directory with hundreds or even thousands of products. With large product directories, customers want to quickly find what they’re looking for. They don’t want to scroll through lots of pages. A WooCommerce powered bookstore typically lists large numbers of books, with data such as author, series and publication date. The traditional store layout would be off-putting to customers wanting to browse books, as they need to see more books per page.

By presenting a book directory in a product table, customers can search, sort and filter to find books. If the table contains images, they should be compressed thumbnails, which take up less space than full-size product images. All the information about the books is presented on the main directory page. Customers can select one or more books and add to cart straight from the WooCommerce book directory. Alternatively, they can click through to read the full blurb for each book.

WooCommerce Audio or Video Gallery

If you want to enhance your product listings with multimedia content, it can be tricky to add audio and video to the default WooCommerce store page. Instead, you can create a WooCommerce product table listing each product alongside embedded audio and video.

Customers can now learn more about your products by watching a video and listening to audio directly from the product table. This brings the product to life and convinces the customers into the buy decision.

Audio and video can help you sell almost any type of product. If you’re selling audio or video through a WooCommerce store, product tables are even more useful. You can add samples to the product table, encouraging customers to try out the samples before buying the full product. Use the product tables to create a complete WooCommerce video or audio gallery.

Setup WooCommerce Product Table

Get WooCommerce Product Table and install it using the instructions in the confirmation email. Go to any page and enter the following shortcode: [product_table] This will list WooCommerce products in a neat table or list view, with the default columns and settings. Use the product table documentation to change the columns in the product table, set the sort order, add filters and more.

Fine-Tune Your Product Tables

You could customize your WooCommerce product tables through the following list of popular options:

  • Columns: You can display almost any data about WooCommerce products in the table. This includes the product name, short description, long description, image, price, weight, dimensions, product variations, attributes, categories, tags, stock and reviews. You can even create bespoke data via custom fields and taxonomies and list these as extra columns.
  • Product filters: WooCommerce Product Table comes with optional filter dropdowns. You can add filters for categories, tags, attributes, variations or custom taxonomies. This makes it quicker for customers to find your products.
  • Show specific products: You can list all your products in the table view. Alternatively, you can show or hide products based on their category, tag, ID, custom taxonomy, date, etc.
  • Lazy load/AJAX: The product tables come with a lazy load option which uses Ajax to load the table more quickly. On optimized WordPress hosting, most product tables will load fast without lazy load. However, if you have a big WooCommerce database with hundreds or thousands of products then Ajax gives your tables an extra speed boost.
  • Add to Cart buttons: Your product tables come with 3 ways of adding Add to Cart buttons in the grid. You can have simple buttons and/or multi-select checkboxes. Choose simple buttons if customers are likely to buy one product at a time, or checkboxes if they need to quickly order lots of products. (ideal for a WooCommerce powered wholesale store.)
  • Responsive options: If your product table has lots of columns then they’re unlikely to fit on small screen sizes. The tables are fully responsive and a plus icon will appear for any hidden rows. There are options to control how this works, for example, which columns to hide first. Use this to ensure that the most important columns (e.g. name, price and add to cart) are visible on all screen sizes.

Create a Logical Structure for Your WooCommerce Store

Once you’ve finished creating your WooCommerce product tables, it’s time to test everything and make sure customers can find your products. Add any other content such as your homepage, about page and contact page that you think would help your customers.

Use Appearance > Menus to create a logical navigation structure. Either link to the page containing your product table(s), or use product tables alongside the built-in WooCommerce layouts, such as the main shop page. Plan the website from your customers’ perspective and make sure your WooCommerce site is intuitive and easy to use.


To generate maximum revenue from your WooCommerce store, you need to present your products in a way that makes it easier for your customers to choose and buy from your store. WooCommerce product tables are an ideal way to list products. Combined with optimized WordPress hosting, they create a winning formula to make your WooCommerce store a success!

Disclaimer: This is a guest post by Katie Smith, Operations Director at Barn2 Media, Katie is a WordPress web designer who specializes in helping companies to build their online presence. The opinions and ideas expressed herein are author’s own, and in no way reflect Cloudways position.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Convert Traffic into Buyers with Managed Ecommerce Hosting

See your business grow without worrying about server management!

Tahha Ashraf

Tahha Ashraf is a Digital Content Producer at Cloudways, a Managed Cloud Hosting Platform. He loves talking about brands and writes content related to online marketing. He is fond of creativity and writes poetry in his free time.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

BFCM 2019