How to Build a Custom WooCommerce Shop Page
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.
In this post, we’ll walk you through a quick, step-by-step tutorial about how to customize the default WooCommerce shop page so that you have complete control over the layout. 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:
- Encourage 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 or hide the WooCommerce shop page (so you can replace and customize it)
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.
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.
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:
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:
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.
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.
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.
It should look something like this:
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:
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
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:
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).
Step #3: Configure the WooCommerce Product Table settings
To configure the WooCommerce Product Table plugin’s settings, navigate to the WooCommerce → Settings → Products → Product tables from the WordPress dashboard.
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!
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).
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!