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 via coding to give it the perfect look and feel for your business. For more ideas about how to customize your store with a bit of coding, check out our guide on .

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.

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:

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.

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"]

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', 'quadlayers_redirect_woo_pages');function quadlayers_redirect_woo_pages()
{
    if (function_exists('is_shop') && is_shop()) {
        wp_redirect('https://www.quadlaers.com/shop/');
        exit;
    }
}

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!

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.

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.

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