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 all 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 customisation 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 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.
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. Most people using this plugin typically do this by creating tables on WordPress pages (or posts) by adding a simple shortcode. However, the shortcode can also be added to the WooCommerce shop page template in your WordPress site’s active theme so that the default WooCommerce store layout is replaced by the user-friendly product table layout.
In this section, 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.
We’ll do this by modifying the relevant WooCommerce template file in the active WordPress theme. In this tutorial, you’ll find complete instructions on how to do this in addition to a sample WooCommerce shop page template to help you get started with a step in the right direction. We’ll be using the WooCommerce-ready Storefront theme throughout this tutorial.
Note: These instructions will show how you can add the product table layout to all of the above mentioned pages. This is possible because all of these layouts use the same WooCommerce shop page template (i.e. archive-product.php), and there isn’t a separate WooCommerce category template file. If you wish to use product tables on certain specific templates – such as on the search results page but not the default WooCommerce shop page – you’ll need to do some custom coding or hire a developer.
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, category pages, and any additional pages
Log into your server via FTP and create a folder named woocommerce in your active theme’s (or child theme’s) directory. (If you already have this folder in your theme, simply ignore this step.) Upload the folder to your server in the /wp-content/themes/<your theme>/woocommerce/ directory.
Download our sample archive-product.php template, and upload it to the /woocommerce/ folder you created in the previous step.
Your default WooCommerce shop page, category pages, and any other pages should now be displaying product tables on the front-end.
If you’re unable to see product tables, check to see if:
- The correct theme is active You may have uploaded the template to the parent theme, whereas your child theme might be the active theme on your WordPress website. In this case, it won’t allow your theme to pick up the template. If this is the case, you’ll have to activate the parent theme on your website.
- Your theme has a file named woocommerce.php Check to see if your theme’s root folder has a file called woocommerce.php. It should be located in the theme’s parent folder i.e. /wp-content/themes/<your theme>/woocommerce.php. This file will override the archive-product.php template (and other templates) which will prevent the product tables from being displayed on the front-end. To fix this, you would need to rename (or delete) the woocommerce.php file from the active theme’s root directory.
- You’ve installed a caching plugin This can sometimes prevent new templates from working. Check to see whether temporarily disabling the caching plugin or clearing the cache solves the problem.
Step #3: Configure the product table
Open the sample template file you uploaded to your WordPress website in a code editor. On line #60, you’ll find this product table shortcode:
$shortcode = '[product_table columns="image,name,price,add-to-cart"]';
You can modify the shortcode here to give your product table a unique look and feel on the front-end. Do this using any of the 50+ shortcode options. You can also keep your shortcode simply by setting most of these options globally on the plugin settings page.
When you’re done, it might look something like this:
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.
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!
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!