How to Build Product Tables & List Products with BigCommerce for WordPress

The new BigCommerce for WordPress plugin adds the flexibility of WordPress to any BigCommerce-powered online store.

One of its biggest benefits is that displaying BigCommerce products on a WordPress website gives you full control over your store layouts. For the first time, you can now list BigCommerce products in a table layout, one-page order form, or product list view. This is a fantastic opportunity because your store layouts can have a huge impact on customer experience and the store’s bottom line.

In this article, we’ll explain what an e-commerce product table is and how you can benefit from creating one for your client’s stores. We’ll also show you how to create a BigCommerce product table in WordPress using a premium plugin called Posts Table Pro.

For developers, using Posts Table Pro is much quicker than coding it yourself from scratch. HTML tables are notoriously fiddly, especially when you start adding extra features such as sorting and filtering, mobile-responsive layouts, and displaying dynamic content. By using an existing solution for listing BigCommerce products in a one-page table or order form, you can make your projects more profitable while delivering on time, and on budget.

What Is a BigCommerce Product Table?

When you add BigCommerce products to WordPress, the products are generally displayed in a grid layout. And although this layout is incredibly visually appealing, it might not be the best solution for every online store.

For example, online stores that sell products that aren’t particularly image-centric wouldn’t benefit from listing product titles in a grid layout. Similarly, if your client sells products with different variations or products that customers typically click-through to find out more about then you’d need a product table to display important product information.

With a BigCommerce product table, end users will be able to view more products per page as compared to a grid layout. Additionally, they’ll have the option to search, sort, and filter the table to find exactly what they’re looking for.

Let’s step through some use cases where creating a product table can bring new value to a business:

1. BigCommerce restaurant ordering system. A product table plugin lets you create a restaurant ordering system that customers can use to order food online. You’re able to list all important details in a neat table layout, with separate tables for each section of the menu (starters, mains, etc.). This makes it easy for customers to customize their orders. It effectively doubles as a BigCommerce order form.
2. BigCommerce wholesale stores. If customers make B2B or bulk purchases at your client’s BigCommerce wholesale store, you’ll need a quick way for them to view their regular products and place orders.
3. Stores selling products that don’t require images. If you’re listing products that customers are more interested in reading the specifications about (such as smartphones, laptops, or hardware products), you might be better off displaying them in a product table. This makes it easy for customers to sort products or search for the exact specifications they’re looking for.

Next, let’s take a look at some of the ways having a product table can benefit an ecommerce store and improve its bottom line.

What Are the Benefits of Having a BigCommerce Product Table?

The standard way to display BigCommerce products in WordPress is in a grid layout, with large images. This is perfect for many types of store. However, there are other products that sell best in a product table layout.

Here are just some of the ways a product table can help BigCommerce store owners:

• Makes it easy to curate a selection of products to showcase (e.g. all gluten-free food items or all products on sale).
• Lets you create multiple product tables for a single page (e.g. a restaurant menu).
• Lets you display more products in the same amount of space.

As well as benefiting your clients, it helps you as the developer by saving you a huge amount of time. As a result, you can either reduce the project budget, increase profitability, or put the extra time into other important features.

And here’s how creating a BigCommerce product table will help improve the end user’s shopping experience:

• They’re able to see everything the ecommerce store offers at a glance.
• Browsing and comparing products becomes significantly easier.
• Effectively simplifies the product purchasing user flow.

Product tables are efficient, organized, and informative. This makes them arguably one of the best layout styles for a wide range of products.

Creating a BigCommerce Product Table in WordPress Using Posts Table Pro

If you’re already using BigCommerce and want list products in a table layout, you can do this by linking the BigCommerce store with any WordPress website. Once the BigCommerce products are visible in WordPress, you can use Posts Table Pro to list them in a table layout. It’s much quicker than coding something from scratch.

Posts Table Pro is a premium BigCommerce for WordPress product table plugin that enables developers and store owners to create a dynamic searchable, sortable table with filters. It can be used to display BigCommerce products on a WordPress website in a neat and organized way.

You may already be using WordPress for your client’s main company website, in which case you can simply add a BigCommerce product table to the existing WordPress site. Alternatively, if you’re not already using WordPress then you can create a brand new site and integrate it with BigCommerce. Either way, you’ll be able to manage the store from BigCommerce and use Posts Table Pro display products in a table on a WordPress website.

Here’s what you’ll need to get started:

• A BigCommerce account with some products added to it.
• A WordPress website where you’d like to list the products.
• The BigCommerce for WordPress plugin to connect the WordPress site to the BigCommerce store.
• The Posts Table Pro plugin to create BigCommerce product tables.

We’ve provided full step-by-step setup instructions below.

1. Install and activate the Posts Table Pro plugin.

Get the Posts Table Pro plugin and install and activate it to any WordPress website. Once that’s done, head over to Settings; Posts Table Pro from the dashboard and enter the license key you received in the email at the time of purchase.

Next, scroll down till you reach the Posts selection section. Set the Post type option to bigcommerce_product. Click Save Changes at the bottom of the screen to continue.

2. Select the columns you want to display in the product table.

From the same screen (i.e. Posts Table Pro settings screen) scroll down to the Table content section. Next, enter the columns you’d like to include in the product table. You can choose any combination from the following parameters:

• title — the product’s title
• image — the product’s image
• content or excerpt — a long or short description
• tax:bigcommerce_category — product categories
• tax:bigcommerce_brand — product brands

For example, you might want to display product image, title, a short description, categories, and brands, you would add the following string to the Columns option:

image,title,excerpt,tax:bigcommerce_category,tax:bigcommerce_brand

In addition to this, you can also configure the image size, content length, and excerpt length from the same screen.

Click the Save Changes button to continue.

3. Add the product table to your BigCommerce site.

The next step is to create a new page to add the BigCommerce product table to. To do this, navigate to Pages; Add New from the WordPress dashboard.

If you’re using the Gutenberg editor or any WordPress page builder plugin:

1. Click the + icon in the top-left corner of the screen.
2. Select the Shortcode option to add it to the text editor.
3. Insert the [posts_table] shortcode to the Shortcode block.
4. Click the Publish button and preview it on your store’s front-end.

If you’re using the classic editor:

1. Click the Insert Posts Table icon in the toolbar. This will automatically add the [posts_table] shortcode to the text editor.
2. Click the Publish button and preview it on your store’s front-end.

Regardless of which text editor you’re using, the product table will look something like this on the front-end:

4. Bonus tip: Display specific products.

The great thing about Posts Table Pro is that it’s incredibly customizable. You can use the settings page to configure dozens of options without having to spend time writing code. For example, if you want to list specific products only you can do so by slightly changing the shortcode.

• Listing specific categories: [posts_table term=”bigcommerce_category:your-category”]
• Listing specific brands: [posts_table term=”bigcommerce_brand:your-brand”]

Simply replace ‘your-category’ and ‘your-brand’ with the slug for the category (or brand) you’d like to list in the product table.

5. Bonus tip: Display product filters.

If you’d like to make the most of product filters, head over to the Posts Table Pro settings screen and follow these instructions:

1. Scroll down till you reach the Table Controls section.
2. Set the Search filters option to Custom using the dropdown menu.
3. Add tax:bigcommerce_category,tax:bigcommerce_brand to the Custom filters option.
4. Click Save Changes to proceed.

Now, when you preview the product table on the front-end it should look something like this:

6. Make any styling tweaks or customizations.

By default, the BigCommerce table will inherit the styling from the WordPress theme. For example, the colors and fonts will match the reset of the site.

As a developer-friendly plugin, it’s easy to make any further customizations to tailor Posts Table Pro. For example, the WordPress plugin comes with a range of CSS selectors which you can use to restyle the product table. It also has a comprehensive list of hooks and filters ideal for customizing the functionality.

Set up the plugin with its built-in features, and this should provide 99% (or even 100%) of what you need. You can then make any additional modifications to meet your client’s exact requirements.

Conclusion

Depending on the types of products your client sells, using Posts Table Pro to list them in a product table layout just might make their online store more intuitive and user-friendly. By creating a searchable, sortable, table layout with filters, you can make it easy for online shoppers to:

• Find exactly what they’re looking for, faster.
• Present important product details (such as product image, title, short description, categories, and price) in a neat, organized table layout.
• Browse through the store and use filters (such as categories) or column sorting options (by price, alphabetically, by category) to view specific types of products.

Remember: the easier you make it for customers to buy from you, the better the chance they will!

What are some other plugins you use with BigCommerce on your client’s WordPress-powered websites? Share your thoughts in the comments section below.