How to Build a Custom WooCommerce Shop Page

April 7, 2020 4 comments

Out of the box, the default WooCommerce shop page showcases products in a grid layout. The shop page is an integral part of your online store – after all, it’s the page your customers will interact with most.

For this reason, you need more control over its design in order to create an intuitive, user-friendly layout that’s suited to your specific business and delivers value to your customers. You need a custom WooCommerce shop page to increase your conversion rate – and sales.

Custom WooCommerce shop page

In this post, we’ll walk you through a quick, step-by-step tutorial about how to use product tables to customize the default WooCommerce shop page. Before we jump into the tutorial, let’s quickly explore the WooCommerce shop page.

What is the WooCommerce shop page?

The WooCommerce shop page serves as a placeholder for a post type archive to display products. A post type archive displays a list of all posts under a particular post type, tag, or category. In this case, it would be the Products post type to display WooCommerce products.

Behind the scenes, the shop page may be rendered differently as compared to other pages on your online store. If you use SEO plugins on your site, they might have specific settings for custom post type archives. You’ll need to use these same settings to control the WooCommerce shop page.

The exact layout and appearance of the default WooCommerce shop page depends on your theme. In most themes, it looks something like this:

The products are listed in a grid layout with some basic information about each one. This typically includes a large image, the product name, price, and maybe star ratings from reviews. It doesn’t include product options such as variations, or the ability to choose a quantity and add to the cart.

The default shop page may be full-width, or it may have a sidebar where you can add filter widgets etc.

As you can see, the basic WooCommerce shop page can look great without any customization work. However, while it’s well suited to some types of products, it’s completely inappropriate for others. If it’s not the best way to showcase the types of products in your store, then you will need to customize the WooCommerce shop page.

Customizing the default WooCommerce shop page

When it comes to customizing the default WooCommerce shop page, there are several different ways to achieve a completely unique look and feel. However, you’ll have to do this using HTML and CSS or a pre-designed template file – more on this later. As for the actual customizations, there’s no limit to what you can do! For example, you could tweak the default layout, add custom fields, include product filters, show exclusive offers, and much more.

That said, it’s important to keep in mind that you want to implement a design and layout that suits the types of products you’re selling. Ideally, your custom WooCommerce shop page should:

  • WooCommerce product variations dropdown pluginEncourage prospective customers to browse through more products.
  • Make it easy for customers to find exactly what they’re looking for.
  • Simplify the purchasing process and make it more intuitive and user-friendly.

One way to create a high-converting WooCommerce shop page is by showcasing your products in a searchable, sortable table layout with filter options. You can do this using the fully customizable WooCommerce Product Table plugin.

This is an ideal solution for online store owners who sell products in bulk (wholesale sellers), customizable products (like pizzas, chocolate boxes, or gift hampers), products that have lots of specifications (such as hardware goods, kitchen counter, or laptops), and products with variations or add-on options (like clothes, shoes, and personalized gifts).

Two ways to redesign the WooCommerce shop page

Many online store owners choose to replace the default WooCommerce shop page with an interactive, front-end product table created using the WooCommerce Product Table WooCommerce plugin.

WooCommerce Product Table
The easy way to create an intuitive, custom WooCommerce shop page layout designed for maximum conversions.

You can do this by following one of two methods:

  • Add the product table to the default WooCommerce shop page.
  • Replace the default shop page with another page that contains a product table (this could be a landing page or your home page, for example).

You can’t delete the default shop page from your WordPress site because it powers other WooCommerce pages, like the checkout and shopping cart. This is why it must exist and remain selected in your WordPress site’s WooCommerce settings. Instead, you want to restrict people from accessing your main shop page and instead direct them to another page containing the product table. You can do this by using the free Redirection plugin.

Additionally, you may have noticed that when you empty your WooCommerce shopping cart, a Back to shop button shows up on the WooCommerce cart page linking to the main (default) WooCommerce shop page. If you direct your customers from the shop page to the product table page using the Redirection plugin, then the shop page won’t be accessible to them. In this case, you don’t have to change the Back to shop link. However, if you absolutely must remove the link, you can do so by editing the code.

How to build and customize your WooCommerce shop page

The WooCommerce Product Table plugin allows you to list your products in a dynamic, front-end table layout.

It has an option to enable the product table layout on your main WooCommerce shop page, replacing the default layout in your theme. Or if you prefer, then you can use a simple shortcode to insert product tables onto any page of your WordPress site.

We’ll take a look at how you can add a WooCommerce-friendly product table layout to different pages in your online store, including:

  • The main shop page.
  • The product category and the product tag archive pages.
  • The custom product taxonomy archive.
  • The product search results page.
  • Any other page on your site.

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

Get the WooCommerce Product Table plugin and install it to your WordPress website. Next, head over to WooCommerce → Settings → Products → Product tables to enter the plugin’s license key.

WooCommerce Product Table license key

Step #2: Add product tables to the default WooCommerce shop page and category pages

Still on the WooCommerce Product Table settings page, find the ‘Table display’ section and choose where you want to use the product table layout:

WooCommerce add product table to shop and category pages

Select ‘shop page’ to use the product table layout on the main WooCommerce shop page. ‘Product category archives’ will enable product tables on all your product category pages, product tax archives, and product search results.

Save your changes, and your default WooCommerce shop page, category pages, and any other pages should now display product tables on the front-end.

Step #3: Configure the product table

Read through the other options on the WooCommerce Product Table settings page, and use them to configure your product tables. These options will be used on all the pages where you have enabled product tables (e.g. the WooCommerce shop front page).

When you’re done, it might look something like this:

Custom WooCommerce shop page

Alternate option – shortcode method

If you don’t want to enable product tables globally in your WooCommerce shop, then you can use the shortcode method instead.

Simply add a [product_table] shortcode wherever you want to insert a product table.

You can modify the shortcode to display different products and give each table a unique look and feel on the front-end. Do this using any of the 50+ shortcode options.

Bonus: Using filter widgets on the shop page

WooCommerce Product Table offers a number of built-in product widgets that can be added to any widgetized area (such as sidebars or footers) on your website. However, these widgets can only be used for enhancing product tables on regular WordPress posts and pages. What this means is that they won’t work for product tables that are added directly to the default WooCommerce shop page or category pages.

Filter products by widgets in WordPress

To add these filter widgets, you’ll have to use the built-in WooCommerce filter widget and not the dedicated product table widgets. You can find these widgets by heading over to Appearance → Widgets from the WordPress dashboard. The widgets you can use in the WooCommerce shop pages begin with Filter Products by … instead of Product Table.

WooCommerce Product Table Filters

Bonus – Listing categories as well as products on the shop page

If your WooCommerce shop has lots of categories, then you might want to list these on the top page – instead of just listing all the products in a table.

To do this, go to Appearance → Customize → WooCommerce → Product Catalog. Change the ‘Shop page display’ option to ‘Show categories & products’. This will list all your categories in a grid layout at the top of the WooCommerce shop page, with a product table listing the products underneath.

How to use WooCommerce Product Table with Elementor (or other page builders)

Instead of customizing the default WooCommerce shop page, you can also create an entirely new shop page using a page builder like Elementor. Here, we’ll show you how you can use WooCommerce Product Table with Elementor – with the Storefront theme – to create a unique shop page for your online store. We’ll assume you already have both WooCommerce Product Table and the Elementor page builder installed and activated to your website.

Step #1: Create a new page and edit it using Elementor

Create a new page or post (or select an existing one) and edit it using the Elementor editor. You can do this by clicking on the Edit with Elementor button.

Edit page using the Elementor page builder

It should look something like this:

Elementor page builder preview

Step #2: Add the WooCommerce Product Table shortcode to a text editor or shortcode widget

You can also add a product table to different Elementor widgets. Here, we’ll show you how you can add a widget to a text editor widget and a shortcode widget.

Text editor widget:

Adding the WooCommerce Product Table shortcode in Elementor

Click and drag the Text Editor widget over to where it says Drag widget here. Next, click anywhere inside the widget and add the product table’s shortcode [product_table].

This is great for when you want to add some text (such as instructions) or images (for visual appeal) above or below the product table. Here’s what it might look like on the front end:

WooCommerce Product Table preview on the front-end

Shortcode widget:

Adding the WooCommerce Product Table shortcode in Elementor using the shortcode widget

You can also use the shortcode widget if you’d simply like to display the product table on the front-end (i.e. without any instructions or images).

WooCommerce Product Table preview on the front-end

Step #3: Configure the WooCommerce Product Table settings

To configure the WooCommerce Product Table plugin’s settings, navigate to the WooCommerce → SettingsProductsProduct tables from the WordPress dashboard.

WooCommerce Product Table settings screen

Here, you’ll see an extensive list of configurations for your WooCommerce product table. You can select the information you want to display in the table, add variables and filters to it, and much more. When you’re done making changes, simply save the settings and you’re done!

If you are willing to boost your sales, the you should start promoting your WooCommerce store products on Google Shopping center or Facebook Dynamic Ads. Here is a great guide to help you learn all about generating proper WooCommerce product feed for promoting on Google and Facebook. Read the guide here.

Create your custom WooCommerce shop page

The default WooCommerce shop page offers a number of useful features for online store owners. However, it’s not the best solution for all types of online stores. By optimizing your shop page’s layout, you’ll be able to enhance your online store’s visual appeal, improve usability, increase sales, and boost conversions.

We recommend using the WooCommerce Product Table plugin to replace the default shop page layout with an intuitive, user-friendly table layout that allows customers to:

  • Search, sort, and filter products to find what they’re looking for, quickly.
  • Add multiple products to cart in one go.
  • Select product variations without having to click through to the single product page.
  • View more products per page in a neat and organized way (with complete product information).
WooCommerce Product Table
The easy way to create an intuitive, custom WooCommerce shop page layout designed for maximum conversions.

Do you agree that customizing your WooCommerce shop page’s layout and design will help you simplify the purchasing process? Share your thoughts in the comments section below!

Maria Ansari

From C++ to PHP, the language Maria thinks in is code, and translates it to English for humans to understand. She has a degree in Computer Science and is the writer of choice for many organizations. She is also The Big Boss at BloggInc., calling all the shots and personally supervising every word and piece of content.

4 Comments

  1. Mehul Chhagan
    July 14, 2020 Reply

    Hi
    I have followed the steps above but I'm having trouble hiding the original/default Product listing on the Shop page - is there somewhere else I have to enable/disable it?

    Thanks

    Mehul

    • EJ
      July 14, 2020 Reply

      Hi, Mehul. Thanks for getting in touch and sorry to hear you're having this difficulty. So that we may assist you best, please could you go to our Support Center at https://barn2.co.uk/support-center/ and fill up a technical issue form to send us a plugin support request using the email address you used to purchase the plugin or include your plugin License key so that we can pull up your Barn2 Plugins account. Thanks in advance!

  2. jafarsydi
    March 11, 2020 Reply

    Hello admin,
    i want to add a photo below The “ADD TO CART” button . like this :
    https://3dmaxfarsi.com/wp-content/uploads/2020/03/add-to-cart.jpg
    can you help me how can i do that without plugin ?

    • EJ
      April 17, 2020 Reply

      Hi, Jafar.

      Thanks for your comment and for the example image. You can do that by adding custom code or customizing the single product page template, which is a developer-level task. If you don't have a developer who can do this for you, then I recommend that you post a job on Codeable where their pre-approved WordPress experts will send you a quote. We have partnered with them to provide plugin customization for our customers.

      Let me know if you have any other questions by filling up a form at our Support Center.

      Best regards,

Please share your thoughts...

Your email address will not be published.