How to Customize WooCommerce Shop Page – The Complete Guide

The shop page is where you display your products so it’s one of the most important pages in your store. That’s why it should have an attractive and user-friendly design. However, the shop page is a pre-designed component of your store and doesn’t have a built-in tool to change its look and feel. However, that doesn’t mean you can’t change it at all. In this guide, you will learn how to customize the WooCommerce shop page using three different methods: manually, with a page builder, and with plugins.

What is WooCommerce Shop Page and Why Should you Customize It?

A shop page, as defined by WooCommerce, is “a placeholder for a post type archive for products”. Simply put, it’s the page where you display your products so it’s vital for the success of your business.

Before going into how you can edit it, let’s have a look at why you should customize the WooCommerce shop page. Now, imagine you walk into a store to buy something. What determines your satisfaction with the shopping process? One of the most important things is how the products are arranged and how easily you can find what you’re looking for. We live in an interconnected world thanks to the Internet. And, especially in the time of the global pandemic, shopping has shifted from physical to online stores. It is expected that in the next 20 years, around 95% of all purchases will be online.

People shop online because it’s easier and faster (or at least it should be). So, how you arrange your products on the WooCommerce shop page and how you display them to your customers can make a big difference. Not only to your conversions and revenue but also to the reputation of your shop. So how can you make a good impression on your customers when they reach your shop page? The key is to have an attractive and user-friendly design that makes the buying process easy.

That’s easier said than done. However, in this guide, we’ll show you how to gain full control over the design of the WooCommerce shop page. We’ll show you how to customize it using three different methods:

  1. Manually
  2. With a page builder
  3. With plugins

How to Customize WooCommerce Shop Page: A step-by-step Guide

1) Customizing the WooCommerce Shop Page Manually

First, let’s see how to customize your WooCommerce shop page without relying on a page builder or a plugin. The greatest advantage of this method is that you won’t add any third-party app to your site. Even though this shouldn’t take more than a few minutes because we won’t do any difficult coding, it’s better if you have some basic coding skills.

Step 1: Create a child theme

If you haven’t created a child theme for your theme up to this point, it’s high time you had one. We recommend a child theme because if you make changes to your theme and then update it, the new files will replace the old ones and you’ll lose the changes. However, you can avoid that by customizing your theme from the child theme.

You can create a child theme using different methods. You can use a child theme plugin or code it yourself. For more information about both methods, check out our guide on how to create a child theme in WordPress.

Step 2: Create the folder structure in your child theme

Now, we’ll use an FTP client to change the website files. If you don’t have an FTP account, we recommend FileZilla software but you can use any client you like.

After creating your child theme, go to your site files and follow this route: /wp-content/themes/your-theme. Let’s say, you have created a child theme for the Twenty Twenty theme. The folder name should be something like twentytwenty-child-theme.

Then, click it and create a folder called WooCommerce. After that, create a file called archive-product.php, which is the shop page template file.

You’ve created a WooCommerce shop page in your store but it’s blank so now you have to add some content.

Step 3: Create content for your shop page

Keep in mind that whatever you write in the text editor of the archive-product.php will appear on the shop page, and your customers will see it. Here you can use some coding to work your magic with your shop page. However, if you’re not sure how to do it, go to the next step.

Step 4: Create a shop page template

Instead of creating a WooCommerce shop page from scratch, you can use an existing template and adapt it. For this, go back to the parent theme and look for the single.php or the index.php file. If you see either of the two, copy it and paste it into the WooCommerce folder you have created in Step 2. If you see both files, copy single.php.

Then, delete the archive-product.php file and change the name of the file you have just pasted here to archive-product.php. With this, we’re going to use the post template file as your shop page but it’ll look like a product page.

However, this isn’t ideal. You want your WooCommerce shop page to look like a shop page, not a product page. To customize it, we’ll use some shortcodes.

Step 5: Customize the shop page using shortcodes

First, divide products into columns or rows. For example, if you want to display your products in 2 columns of 6 products max, you need to paste the following code into the archive-product.php file:

[products limit="6" columns="2"]

If you’re not sure how to do it, follow these steps:

  • Open the archive-product.php file
  • Delete the text between <main id=“main” class=“site-main” role=“main”> and </main><!– #main –>. Please note that you should not remove these two lines of code but only what’s between them
  • Add this line of code to the space left by what you’ve just deleted:
    <?php echo do_shortcode (‘[products limit="6" columns="2"]’) ?>
  • Save the changes
  • Congratulations! You’ve just built a new WooCommerce shop page!

We recommend you play around and customize the shop page using shortcodes or code to give it the perfect look and feel for your business.

2) Customize WooCommerce Shop Page with Page Builder

Although the previous method saves you some time, it may be difficult for people without coding skills. That’s why here we’ll show an easier way to get the trick done without having to modify your theme’s files. In this section, you’ll learn how to customize the WooCommerce shop page using your page builder.

With page builders, you can change the shop page design, layout, product types, and products to display. On top of that, you won’t need to write any code or modify the theme files. Regardless of whether you’re using Elementor, Visual Composer, Divi, or any other page builder, this method is compatible with all of them.

NOTE: You won’t need to write any line of code but it’d help if you’re familiar with WooCommerce shortcodes. Our shortcodes guide is a good starting point.

Now, let’s have a look at how to customize your shop page using a page builder. To do this, there are two main steps:

  1. Create a page to display your products with a page builder
  2. Make that page your shop page

Step 1: Create a listing page with page builder and fill it with content

I assume you’re all familiar with page builder, so here we won’t explain to you how to use it. In this guide, we’ll use Elementor as our page builder.

The first thing you need to do is create a new page:

Customize WooCommerce Shop Page with a page builder

Normally, in your WooCommerce shop, you would display featured, best-selling, and new arrival products. Here, we’ll create a shop page with featured and best-selling products.

Customize WooCommerce Shop Page featured and best-selling products

Now, let’s add some content to the page. To do this, we’ll use some WooCommerce shortcodes. There are many shortcodes that you can use depending on the categories of products you want to display. These are some of the ones that will come in handy:

  • [featured_products]
  • [best_selling_products]
  • [top_rated_products]
  • [sale_products]
  • [product_table]
  • [recent_products]
  • [products]

Following our example, we’ll add featured products to our shop page using the

shortcode. To do this:

  • Go to your WordPress admin dashboard > Products page. Select your featured products by clicking the star icon on the right.

  • From the editing page, drag the Text Editor down below the Featured Products.

  • Copy the
    [featured_products]

    shortcode and paste it there.

  • Click Update, and your products will be displayed, as shown below:

Just like that, for Best Sellers, you can use the

[best_selling_products]

shortcode, for products recently published you’ll use

[recent_products]

and so on. It’s up to you to decide what type of products you want to display on the shop page.

Please also note that there are shortcode attributes that you may need to:

  • Set the number of columns
  • Limit the number of products displayed

For example, if you want to display 2 columns of 6 products max, you’ll use something like this:

[products limit="6" columns="2"]

Shortcodes are very powerful and pretty easy to use. So we recommend you check out our guide about WooCommerce shortcodes to make the most of them.

Step 2: Make the newly created page your Shop Page

After you’ve created the new page, you need to make it your WooCommerce shop page. To do this, we recommend you install a child theme. If you haven’t created one yet, we recommend using Child Theme Configurator or any other child theme plugin that you like.

Here, we’ll continue assuming you’ve installed and created a child theme.

  • Get the URL of your newly created page
  • Go to the WordPress dashboard
  • Click Appearance > Theme Editor, and then click I understand if you see a pop-up
  • After that, you will be taken to a page where you will be able to access the Theme Function files on the right

  • Click the functions.php file, and paste this code at the end of it:
add_action('template_redirect', 'bc_010101_redirect_woo_pages'); function bc_010101_redirect_woo_pages() { if (is_shop()) { (') wp_redirect('http://localhost/wordpress/my-shop-page/'); exit; } }

Like this:

Customize WooCommerce Shop Page functions.php

IMPORTANT: Please copy and paste the code as it is without deleting anything, and remember to replace your URL within the wp_redirect(‘[yourURL]’)

Then, update the file and that’s it! You have just created a customized WooCommerce shop page.

3) Customize WooCommerce Shop Page with Plugins

In this section, you’ll learn how to customize the shop page in WooCommerce using plugins. We’ll show you how to do it using both free and premium tools.

  1. WooCustomizer
  2. WooCommerce Product Table by WC Product Table (Free and premium)
  3. WooCommerce Product Table by Barn2 (Premium)

3.1) WooCustomizer

WooCustomizer is an excellent plugin to customize the WooCommerce shop page. It allows you to edit your product, cart, user account, and checkout pages in a few clicks.

This plugin has a lot of features and lets you personalize your whole WooCommerce store. Focusing on the shop page customization options, with WooCustomizer you can:

  • Edit shop pages with more than 20 settings to choose from
  • Remove or edit elements from the WooCommerce Shop, archive, and product pages
  • Delete WooCommerce breadcrumbs from shop and product pages
  • Remove or edit shop page elements such as the coupons section on the cart page, or the text for the cart coupons drop-down
  • Add an AJAX product search bar and a product quick view pop-up on your shop pages
  • Customize the number of products per row and page on the shop pages
  • Change the number of columns displayed on the shop and archive pages
  • Add product quick view to let customers view the products from the shop page
  • Edit the shop page and archive sale banners
  • And much more!

Customize WooCommerce Shop Page - WooCustomizer

It’s worth noting that WooCustomizer doesn’t override your WooCommerce pages or templates. It simply adds extra styling options on your theme on the elements you choose to edit.

Even though WooCustomizer has lots of features to edit your WooCommerce shop page, it’s also quite easy to use. This tool is versatile and will give you more control over your store without the need to code anything.

Finally, WoooCustomizer is a freemium tool. It has a free version with basic features and 3 premium plans with more advanced functionalities that start at 29 USD per year.

3.2) WooCommerce Product Table Lite by WC Product Table

WooCommerce Product Table (WCPT) is an excellent plugin that allows you to easily create product table layouts. With a rating of 4.9 out of 5 and more than 5,000 active installations, it’s one of the top tools to edit the shop page in WooCommerce.

WC Product Table a freemium tool. It has a free version with basic functionalities and a pro plan that includes more powerful features and costs 49 USD per year. Here we’ll show you how to use the lite version and then give you some tips for the pro plan.

Step 1: Create a WCPT on any page

First, you need to download and activate the plugin. After that, you will see Product Tables on your dashboard sidebar. Click it, press Add New Table and you will be taken to a page where you can create a table.

Customize WooCommerce Shop Page with a plugin

As you can see, you will need to specify:

  • Table name: In our example, we called it Product Table 01
  • Product Category: Under the Query tab, you will see the categories you have. Select one for your table

  • Column Information: Next, go to the Columns tab. Here you’ll have to draw the table you want. You will have to decide how many columns you want and then design each one. WC Product Table gives you options not only for laptops but also for phone and tablet columns. So you can specify all the options you want for each type of device, including heading, cell template, and design (font, alignment, font color, background color, and more.)

Once you’ve created the columns you want, click Save Settings, and you’re all set.

Step 2: Paste your table on a new page

Using a shortcode, you can display the table you created on Step 1 anywhere you want. Simply copy the shortcode:

Customize WooCommerce Shop Page with plugin and shortcodes

Now, let’s display the table on a new page using the shortcode. At this point, we can assume that you are familiar with creating a new page. So using a page builder, click Pages > Add New and give it a name. For example, My Shop Page 2.

If you are using Elementor, you will see something like this:

Drag the Text Editor down and paste the shortcode you just copied there.

Now you will have a page with a product table style.

Step 3: Redirect customers to your new shop page

To redirect your customers to the new shop page, you’ll need a redirect plugin. This tool will redirect customers from the default WooCommerce shop page to the new page you have created in Step 2. Most of these plugins are single-purposed and very easy to use.

Here we’ll use Redirection, one of the most popular redirect plugins, but any similar tool will do the job.

How to customize WooCommerce Shop Page with plugin and Redirection

After activating the plugin, go to Tools > Redirection, and you will see this message:

  • In the Source URL, paste the link of the default shop page
  • In the Target URL, paste the link of your newly built shop page
  • Then click Start Setup
  • That’s it! That’s how you customize your WooCommerce shop page with a free plugin!

NOTE: Please note that using this method may affect your SEO results as search engines usually don’t favor redirect principles.

PRO TIP: If you don’t want to affect your SEO, you can use the pro version of the WooCommerce Product Table plugin. Apart from having more advanced functionalities, it also comes with the Archive Override feature. With this functionality, you can replace the default WooCommerce grids with your product tables not only on the shop page but also on any archive pages such as attribute, category, tag, and search.

To activate this feature, go to WP Dashboard > Product Tables > Settings > Archive Override.

3.3) WooCommerce Product Table by Barn2

Another excellent option to edit the shop page is the WooCommerce Product Table plugin by Barn2. It’s a premium tool that starts at 89 USD per year and it’s very easy to use. This add-on assists you in listing your products in a table layout, and then insert it on the shop page. With this method, you will be able to transform the default design of the shop page into a table.

Step 1

Install and activate the WooCommerce Product Table plugin. Then, go to the WooCommerce tab and click Settings > Products. Under the Products tab, you will see the Product tables section. Here, enter the plugin’s license key that you got upon purchasing the plugin.

Step 2
  • First, add product tables to the given shop page and category pages
  • Go back to the settings page of the plugin > Table display, and choose the location for your product table layout

  • Tick Shop page
  • Then, tick Product category archives if you want to display product tables on all the product category pages, product tax archives, and search results
  • Save the changes
Step 3

Make changes to the tables as you want. The settings page of the WooCommerce Product Table is very intuitive. Unlike WC Product Table by WC Product Table, the Barn2 tool doesn’t ask you to create and configure each column which makes it easier to use.

First Steps

Before carrying out any of the three customizing methods, we highly recommend you use a child theme. You can either use a plugin or create it programmatically. A child theme inherits all the design elements of the parent theme, so you have a copy of that theme making it safer. Why? Because if you directly edit the parent theme’s files, all your changes will be overridden when you update the theme. With a child theme, you can change its files without losing any data after an update. What is more, a wise site owner would never mess with the original theme files.

Apart from that, keep in mind that the shop page is a pre-set page of WooCommerce, so it’s compatible with all WordPress themes. However, since we recommend using child themes in two of the three methods, there could be compatibility issues. If that’s the case, you can have a look at the WooCommerce documentation for third-party issues.

Conclusion

All in all, the design of the shop page and how you show your products can have a great impact on your conversions.

In WooCommerce, the shop page is pre-built and although there are some options to edit its layout, they’re pretty limited. So, customizing it using any of the three methods described in this guide will make you stand out from the crowd. Additionally, it’ll better represent your business and will show professionalism to your customers.

We’ve shown you how to customize the shop page using three different methods:

  • Manually
  • With page builders
  • With plugins

All of them have their pros and cons but they’ll all get the job done so use the one that best suits your needs and skills. If you don’t have coding skills, you can edit the shop page with your page builders or with plugins. We recommend WooCustomizer as it’s easy to use, provides you with a lot of features to optimize your store, and has a free version.

Finally, if you have a strong presence in social media, you should consider connecting Facebook Shop to WooCommerce. This way, you will be able to upload your product catalog to Facebook so users can view products and go directly to your site’s checkout page to complete the purchase.

Now it’s your time to make the most out of it and optimize your WooCoommerce shop page. Have you tried any of these methods? Which one is your favorite? Please let us know what you think of them and let us know if you have any questions!