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-design component of your store and doesn’t have a built-in tool to change its look and feel. But that doesn’t mean that you can’t change it. In this guide, you will learn how to customize the WooCommerce shop page using three different methods.

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 customize 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. Currently, we live in an interconnected world thanks to the Internet, and, especially in the time of the global pandemic, shopping has undoubtedly been shifted from real stores 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). Therefore, 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 overall 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 hard-core 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 the changes will be lost. However, you can avoid that by customizing your theme from the child theme.

You can create a child theme using different methods. We recommend using the Child Theme Configurator plugin or Child Theme Wizard.

Step 2: Create the folder structure in your child theme

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

Once you’ve created 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, which means 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, we can use an existing template and adapt it. For this, go back to the parent theme for this step. There, look for the single.php or the index.php file. If you see either of the two, simply 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 great. 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, simply 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 newbies and 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, number of products 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, Beaver, 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 here 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 it 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:

Normally, in your WooCommerce shop, you would display featured products, best selling products, and new arrival products. Here, we’ll create a shop page with 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, and 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 shortcodes attributes that you may need, such as:

  • 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 are pretty easy to use so we highly recommend you check out our intensive 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 the Child Theme Configurator plugin or Child Theme Wizard.

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 it, and paste this code at the end of the file:
add_action('template_redirect', 'bc_010101_redirect_woo_pages'); function bc_010101_redirect_woo_pages() { if (is_shop()) { //don't remove the quotes(') wp_redirect('http://localhost/wordpress/my-shop-page/'); exit; } }

Like this:

IMPORTANT! Remember to replace your URL within the wp_redirect(‘[yourURL]’) just like I did.

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 a free and a premium tool.

  • WooCommerce Product Table by WC Product Table
  • WooCommerce Product Table by Barn2

A) WooCommerce Product Table Lite by WC Product Table

WooCommerce Product Table (WCPT) is an excellent plugin that allows you to create product table layouts easily. 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 that has a lite version that comes with basic functionalities and can be downloaded for free, 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.

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:

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 just 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.

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: However, 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 that lets you 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.

B) WooCommerce Product Table by Barn2

Another excellent option to customize the shop page is WooCommerce Product Table by Barn2. It’s a premium plugin 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, obviously
  • Tick Product category archives if you want to display product tables on all the product category pages, product tax archives, and search results
  • Save changes
Step 3:

Make changes to the tables as you want. The settings page of the WooCommerce Product Table is very intuitive. Unlike WooCommerce Product Table by WC Product Table, the tool developed by Barn2 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 described above, we highly recommend you install a child theme. A child theme inherits all the design elements of the parent theme, so basically 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. So 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 described above, 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 and sales.

In WooCommerce, the shop page is pre-built and although there are some options to customize its layout, they’re pretty limited. That’s why 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 and dedication to your customers.

Finally, 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. 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!