How customize your WooCommerce shop page

Out of the box, the default shop page in WooCommerce showcases products in a grid layout. Keep reading to discover some simple but effective ways to edit and customize WooCommerce shop pages.

The WooCommerce shop page is an integral part of your online store – after all, it’s the page your customers will interact with most. That's why 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 customers.

In this post, we'll walk you through a quick, step-by-step tutorial about how to customize the WooCommerce shop page by transforming it into a conversion-optimized order form. We'll do it using the WooCommerce Product Table plugin.

But 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 than other pages on your WordPress site. 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. 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 that you sell, then you will need to edit or customize the WooCommerce shop page. I'll tell you how to do that next.

Methods to edit the 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. There's no limit to what you can do! For example, you can edit the default layout, add custom fields, include product filters, show exclusive offers, and much more 🪄

Your priority should be to customize the WooCommerce shop page in a way that suits the types of products you're selling. Ideally, your custom shop page should:

I'm going to tell you several different ways to use WooCommerce to edit the shop page. First we'll look at the built-in WooCommerce edit shop page options, and then we'll look at how you can use plugins to get even more flexibility.

1. Using the WooCommerce Customizer

Your first stop to customize the WooCommerce shop page is the Customizer. You'll find this at Appearance → Customize → WooCommerce.

This contains a range of options to edit the shop page. These let you customize the details of the shop page in WooCommerce. They don't change the overall look and feel or the information which is displayed about each product.

• Store Notice - Optionally show a banner at the bottom of every page in the shop.
• Product Catalog:
  • Shop page display - Choose whether to show products, categories or both.
  • Category display - Similarly, choose whether to show products, subcategories or both on category archive pages.
  • Default product sorting - Change how products are sorted when the WooCommerce shop page custom loads.
  • Products per row - Customize the number of shop page product per row.
  • Rows per page - Edit the number of rows of products on the shop page grid before pagination buttons appear underneath.

2. Customizing with the Gutenberg block editor

You can use the built-in WordPress block editor to create a custom WooCommerce shop page. This comes with a range of WooCommerce blocks for displaying products in different ways.

For example, you could create a customized shop page which has some static content first, then a list of your top selling products, then another heading followed by your entire product catalog.

The best way to find the WooCommerce shop page blocks is to click the + icon to add a new blog. You can then search for 'products' and the relevant blocks will appear. You can list all products, products by category, best selling products, and so on.

For shop page WooCommerce blocks that let you select which products to include, you'll then see a range of options like this:

Use the options in the main block to select which products to display on the customized WooCommerce shop page. Also use the options in the 'Block' tab on the right to customize details like the number of columns and rows in the product grid, and whether to hide any of the product data.

The WooCommerce blocks provide a neat way to edit the shop page structure. However, as with the Customizer, they don't actually change the layout of how the products are listed. Moveover, they don't let you show additional data about each product, or allow customers to select quantities or variations from the shop page.

3. Manual customization (using code and hooks)

It's also possible to write custom code to customize the WooCommerce shop page.

This is a developer-level task so I won't go into this option in much detail. It's a good option if you just need to make some minor tweaks. However, if you want to make significant changes then it's better to use a plugin. If you're a developer and want to edit the shop page using code then Sellbrite have provided a useful guide on the available hooks and filters.

4. Using WooCommerce extensions and plugins

Finally, you can use plugins to create a completely custom shop page. This is by far the most flexible option because you can choose from a wide range of plugins to edit different parts of the shop page.

In the next section, I'll show you how to customize the WooCommerce shop page using 2 high quality plugins:

• WooCommerce Product Table, which replaces the default product grid with a conversion-optimized order form view.
• WooCommerce Product Filters, which adds professional-grade product filters to the shop page to aid product discovery.

Step-by-step guide: Customizing the shop page with product tables

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

For many types of products, the table layout can significantly boost conversions because:

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 counters, or laptops), and products with variations or add-on options (like clothes, shoes, and personalized gifts).

Next, I'll show you how to set it up on your WooCommerce shop page.

1. Install and set up Product Tables for WooCommerce

First, get the WooCommerce Product Table plugin and install it on your WordPress website.

2. Create your first product table

When you first activate the plugin, this will launch the product table builder. You can also launch it by going to Products → Product Tables. Set up your shop page product table by going through each page of the builder:

On the first page, choose the option to "Display on a shop page (e.g. main storefront, category page, etc.)".

On the next page, select which WooCommerce shop page templates you will enable the table view on. As a minimum, you should choose the shop page. You can also display the table on categories, attribute archive pages, etc.

The remaining pages allows you to choose which product data to display on the WooCommerce shop page, add filters, replace the add to cart buttons with checkboxes, display variations on the shop page, and more.

Once you've finished, your customized WooCommerce shop page, category pages, and any other pages will now display product tables on the front end:

Bonus plugin: Adding advanced product filters to the shop page

As you can see in the screenshots above, WooCommerce Product Table comes with some basic filter dropdowns. These appear at the top of the custom WooCommerce shop page. You can also add the default filter widgets to your shop page sidebar.

Alternatively, you can use the WooCommerce Product Filters plugin to add even more advanced filters to the shop page. This works on its own, or with WooCommerce Product Table.

WooCommerce Product Filters gives you even more filtering options which can appear above the products on the shop page, or as widgets in the shop sidebar. Here's an example of what your supercharged shop page filters might look like:

Bonus plugin: Allow customers to check out directly on the shop page

Above, we learned how the WooCommerce Product Table lets you create a custom shop page layout which is better for conversions. It achieves this by making it quicker and easier for customers to find products and add them to their cart.

However, that's only half of the story.

The other half is the final part of the purchase process. That is, reviewing and completing an order. And that's where the WooCommerce Fast Cart plugin comes in.

WooCommerce Fast Cart adds either a popup cart or a floating cart icon to your custom WooCommerce shop page. Customers use this to review their order, enter their details, pay and check out - without ever leaving the shop page. It's a much faster way to complete an order, and therefore can help to reduce abandoned carts.

Next steps: Customize the WooCommerce shop page today

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

We recommend using the WooCommerce Product Table plugin to upgrade the default shop page layout with an intuitive, user-friendly table layout. This will allow 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 the WooCommerce shop page's layout and design will help you simplify the purchasing process? Share your thoughts in the comments below!

FAQ

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. We'll show you how to use WooCommerce Product Table with Elementor - with the Storefront theme - to create a unique shop page for your online store. The process is similar for other page builders, too.

1. Create a new page and edit it using Elementor

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

2. Add the WooCommerce Product Table shortcode to a text editor or shortcode widget

When you create a product table at Products → Product Tables, you're given a shortcode for adding it to a page. Add this to an Elementor widget, such as a text editor or shortcode widget.

Here’s what it might look like on the front end: