How To Customize WooCommerce Shop Page

With WooCommerce, you can customize how your store looks to online visitors through the use of plugins, page builders, or even manually if you have the know-how.

Your shop page is where products are displayed and purchases are made, so they’re the most important pages on your site. Every shop page should have a user-friendly design that isn’t hard to navigate.

When you have a WooCommerce store, the shop page can’t be changed using any built-in tools. That doesn’t mean changing it is impossible, however, as we’ve covered in this short guide. 

Here we’ve gone through the prevalent ways you can change your WooCommerce shop page. Each one has been detailed in steps that are easy to follow.

how to customize woocommerce shop page

Manually Customizing a WooCommerce Shop Page

Without using any external programs, you can manually change the layout of a WooCommerce shop page. This means you don’t have to rely on any page builders or plugins, or any third-party apps.

The downside is that, even though it requires very basic coding, it’s much easier to do if you have a small amount of coding knowledge beforehand.

Step 1: Make a Child Theme

Your WooCommerce store should have a child theme. This is useful because any changes made to your store’s theme won’t be overwritten and lost if you use a child theme.

If you’ve followed tutorials when initially creating your WooCommerce page, you might already have a child theme set up, in which case you should skip this step.

If not, there are tutorials online that show you how to make one. Much like customizing the shop page, you can do it manually or you can use a third-party plugin to help.

Step 2: Make the Folder Structure in your Child Theme

Like with most site changes, you now need to use an FTP client to alter the website files. For this, you’ll need an FTP account, of course, so get one if you’re not signed up. Once you’ve done that and your child theme has been created, go to ‘/wp-content/themes/your-theme’.

The default theme for WordPress in 2020 was called the Twenty Twenty theme, naturally. If you were to still be running that, the folder name should be called ‘twentytwenty-child-theme’ or something similar to that. 

Click it and make a WooCommerce folder and I file inside that called ‘archive-product.php’ – the shop page template file. So now you have a shop page but you need to add content to it, which brings us to the next step.

Step 3: Create Shop Page Content

Whatever you write in that ‘archive-product.php’ file will appear on the shop page and be seen by your customers, so keep it professional. Those who are code-savvy can even use this interface to add code but if you don’t have those skills, go to the next step.

Step 4: Create a Shop Page Template

Most WooCommerce shop page owners don’t make them from scratch. Fortunately, there are many templates that everybody can benefit from. In your parent theme, find ‘single.php’ or the ‘index.php’ file. 

Copy and paste it into the WooCommerce folder, the one that was created in Step 2. If both are present for whatever reason, copy ‘single’ and delete ‘archive’ and then change the pasted file’s name to ‘archive-product.php’.

Step 5: Customize the Shop Page with Shortcodes

Many templates look like product pages, which isn’t ideal for what you may want for your shop page. You’re here to make a shop page, not a product page, after all. You can customize the template using shortcodes without needing much coding knowledge.

Open your ‘archive-product.php’ file and find the following code:

<main id=”main” class=”site-main” role=”main”>

There should be code here that you’ll need to delete. Delete the text between the above code and the below code:

</main><!–#main –>

Delete only what is between them. Once that’s done, add this code to the space between them:

<?php echo do shortcode (‘[products limit=”6” columns=”2”]’) ?>

Once that’s done, save the changes. The code you’ve just entered means that there’ll be six products on-screen displayed in two columns. You can change the 6 and 2 figures in that code if you want different numbers of products shown.

Customizing a WooCommerce Shop Page with Page Builder

If you have little to no coding skills, using a page builder can help. Let’s take a look at what customizing a shop page looks like when you use a page builder instead.

Step 1: Make a Listing Page with Page Builder

For this, we’re assuming that you’re familiar with page builders. If not, there are some easy guides out there that let you familiarize yourself with the program quickly. We’re also using Elementor as an example of a page builder.

Create a new page and add some content to it. This is easily done by using shortcodes. These are much simpler than what you’d use to manually make a shop page, for example:

  • [featured products]
  • [top rated products]
  • [best selling products]
  • [sale products]
  • [product table]
  • [recent products]
  • [products]

Let’s walk through how to add one of these. This is the same process you can use to add them all. Let’s go with bestselling products.

From the WordPress admin dashboard, go to the products page and select whichever category of products you’re choosing after clicking the star icon. On the editing page, drag Text Editor until it’s below the product category heading.

Copy the shortcode there, [best selling products] in this case. Remember to click update to apply any changes you make. Repeat as needed for each product category. You can also introduce the above shortcode from our manual guide to dictate columns and product limits.

Step 2: Make the Listing Page your Shop Page

Now we need to turn it into a WooCommerce shop page. Install a child theme, which we’ll assume you’ve already done. Follow these steps:

  • Grab the URL of the page you’ve created and go to the WordPress dashboard.
  • There, click Appearance and Theme Editor. Banish any pop-ups.
  • At the right of the next page, you should find Theme Function files.
  • Find ‘functions.php’ and paste the following 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.yourURL.com/shop/’);

                exit;

       }

}

Where ‘yourURL’ is, you’ll want to add your domain. Click update to finalize the customization.