How to build a custom WooCommerce shop page by 3 methods?

The shop page is one of the most important pages of your online store that customers interact with. All store owners agree that designing the shop page in a customer-friendly and practical way that makes the process of choosing and buying products easier for users has a significant impact on increasing their sales. Since the default WooCommerce editor only allows you to display products as a list or grid, you need to write code or use appropriate plugins to build a custom WooCommerce shop page.

In this guide, you will learn three methods for WooCommerce shop page customization including:

• Coding
• Elementor
• WooCommerce Product Table plugin

Let’s dive into it.

What is a WooCommerce shop page?

The WooCommerce shop page is a complete archive of your products that can be customized with various settings. When customers visit an online store to choose a product and finish their purchase, the first page they interact with is the shop page.

By default, the layout and appearance of the shop page depends on your theme and is usually as follows:

Of course, you can change the settings in the WooCommerce dashboard so that the products are displayed in a list instead of a grid mode.

The grid shop page design includes a large image, product name, and price. However, customers cannot view other information such as variables, or descriptions. They have no access to select the quantity or add to the cart on this page.

Although WooCommerce allows you to add a sidebar that displays some widgets like filters to customers, they are not enough to improve the customer buying experience.

According to a survey, customers tend to see all the information about the products on the shop page to quickly compare them. They want to go through all the steps of selecting products and purchasing them on the same page without any need to visit the page of each product, individually.

Therefore, you should customize the WooCommerce shop page and allow customers to:

• Filter the products they want based on different features such as price or category
• View different product information such as description, photo, price, variables, and even custom fields on the same page.
• Add as many products as they want to the shopping cart at the same time
• Change the number of products
• See the subtotal amount of their carts
• Etc

As a result, to keep your customers satisfied, you should use the following methods to build a custom WooCommerce shop page.

Custom WooCommerce shop page programmatically

The first method you can use for WooCommerce shop page customization is to add some simple codes to the WooCommerce theme. We introduce elementary codes to you, but if you have no experience in coding, we recommend that you do not use this method and look at the second and third methods of this guide.

Even if you’re an expert in coding, it is better to consider the following two points before going further:

1. Backup your site data so that you can restore the information in case of any problems
2. Instead of manipulating the main WooCommerce theme, create a child theme and insert the codes.

Now you can use the following codes for WooCommerce shop page customization:

Divide the store page into different columns and rows

If you want to display your products in 2 columns and up to 6 products in each row, you should open the created child theme text, then find the below two lines in the text:

 <main id=“main” class=“site-main” role=“main”>
</main><!– #main –>. 

Now delete any text written between these two lines and replace it with the following code:

<?php echo do_shortcode ('[products limit="6" columns="2"]') ?>

Then, Save the changes to apply this new layout to the WooCommerce shop page.

Display the most popular products on the shop page

Another way to customize your WooCommerce store page is to showcase your most popular products. For this, we use the following shortcode:

do_action('WooCommerce _before_shop_loop');
echo '<h1>MOST POPULAR !!</h1>';
do_shortcode('[products orderby="popularity" class="m-popular" columns="2" limit="2"]'); do_action('WooCommerce _after_shop_loop');

In this code, the products are displayed in two columns and two rows (columns=”2″ limit=”2″), but you can adjust these numbers based on your needs.

With a slight change in the above code, you can display top-rated products, best-selling products, and other products on the store page.

If customizing a WooCommerce shop page programmatically takes you a lot of time or you think you don’t have enough experience to insert different codes into the WooCommerce theme, don’t worry, you can easily give your shop page a great look with the help of two other methods.

Customize the WooCommercr shop page with Elementor

To customize the WooCommercr shop page with Elementor, first, you need to install Elementor Pro 2.1 on your WordPress website and please note that you must have already installed WooCommerce 3.4 or higher.

When you successfully activate the Elementor Pro, follow the below steps:

1. Go to the below address in the Elementor Editor

 Templates > Theme Builder > Product Archive 

2. Click Add New on the top right corner of the screen.

3. Select Product Archive from the dropdown 

4. Choose one of the templates and press Insert

if no product archive templates have been created yet, you need to create one by using the two below options:

•  Products label in the sidebar: Click on this icon to show all Products on the page.
•  Edit link in the top right corner of the Template: Click on this link to open the Elementor editor 

5. When customizing the WooCommerce shop page with Elementor has been finished, press the Publish button.

This Archive Template will automatically replace the shop page of your website and it may look like this:

WooCommerce shop page customization plugin

The best and easiest method to build a custom WooCommerce shop page is the WooCommerce product table plugin. This plugin provides you with a lot of useful tools for making a customer-friendly product table with all the options you need to satisfy the buyers.

Let’s review the step-by-step guide for creating a custom WooCommerce shop page template with this plugin.

Step 1: Install WooCommerce shop page customization plugin free

Just like other WordPress plugins, first you need to download the plugin here, and then install it on your website.

As soon as you activate the plugin, you can see the iT Product Table tab in the WordPress dashboard. 

To create a new table, click on the Add New Table option then scroll down the page and press the Get Start button.

By doing this, all products of your WooCommerce store will be Imported to the new table automatically. However, you can specify to display some products or categories by making a query in the Query tab as illustrated below:

In this guide, we have completely described the options available in the Query tab of the WooCommerce product table plugin.

After adding the desired products to the table, you are now ready to customize the WooCommerce shop page by displaying product features in separate columns.

Let’s see how.

Step 2: Add Columns to customize the WooCommerce shop page

Adding columns to the product table is the easiest task you have. To fulfill this task, you just need to follow the below steps:

1. Press Column tab and choose one of the devices from the list: Laptop, Table, Mobile
2. Click on Add a Column button to see a new box on the page with two sections: Heading and Cell Content
3. Click Add Element in either box to see the list of elements you can use in the left panel, then choose one of the elements to see in the Heading or Cell Content of the columns

4. Change the items in the General and Style tabs of the selected Element to customize it on the WooCommerce shop page 

By repeating the above-mentioned steps, you can add as many columns as you need to build a custom WooCommerce shop page.

There are more options available for WooCommerce shop page customization in the Columns tab. Click here, to learn about them.

For example, we tried to build a custom WooCommerce shop page for a restaurant menu by adding the below columns to the table:

• Check box: This element is useful when customers need to select dome products and add them to their carts directly on the shop page
• Name: We chose Title from the list of elements to display the product title in this column
• Summary: We added Content from the list of elements for this column and customized it to display a brief description of the product on the shop page
• Category: By adding Category from the left panel, we tried to show product category in the table to the customers 
• Price: We chose the Price element for this column to let customers see the product’s regular prices in the table
• Quantity: We added this element to allow customers to change the product quantity directly on the shop page
• Add to Cart and Buy Here buttons: By adding a button from the list of elements two times and customizing them individually, we tried to let customers Add products to the cart or see the product page if they want by pressing Add to Cart or Buy Here button, respectively.

To see how the shop page of our restaurant menu looks, we pressed the Preview icon on the top of the table and the result was exactly as we expected:

Step 3: Add Extra Features to the Navigation bars of the WooCommerce shop page

The next step to building a custom WooCommerce shop page is to add extra options like filtering, sorting, or search boxes to the navigation bars.

All elements you need to customize the navigation bars of your shop page are available in the Navigation tab of the WooCommerce product table plugin.

So, you can add any feature to your product table by following the below instructions:

1. Open the Navigation tab to see the navigation bars’ editable boxes including Header, Footer, Sidebar
2.  Click on the Add Element option in one of the Navigation bars to see a list of elements in the left panel. Then choose one of the Elements

3. Edit the items in the General and Style tabs of the selected element to customize it on the WooCommerce shop page

In this example, we tried to add the below features to our table:

• Price Filter to the sidebar
• Add Selected to Cart to the footer
• Category Filter to the Header

If you are curious to see what these features look like in the product table, don’t worry we will show you in the last step. 

Now, let’s try to customize the style of the WooCommerce shop page.

Step 4: Choose a Template or customize the WooCommerce shop page style

The final step to creating a customer-friendly product table is to set up a custom WooCommerce shop page template. To do this, go to the Style tab of the WooCommerce Product Table plugin, then choose one of the preset templates or try to customize the table by editing the items available in different parts like Container, Headings, Cells, etc.

Now let’s see how you can display the customized shop page to your customers.

Step 5: Use Shortcode to display the product table to the customers 

To display the customized shop page you have created with the WooCommerce product table plugin, you can simply copy the shortcode by clicking on the icon designed in the top right corner of the page:

Then paste this shortcode to the WordPress page by using either the default editor or Elementor.

Let’s review both methods together:

Use WordPress page editor

This is the simplest way you can display the custom WooCommece shop page to the customers:

1. Create a new page in WordPress
2. Paste the copied shortcode to the page
3. Save and publish the page

4. Go to the WooComemrce Settings page and open the Product tab
5. Locate the Shop page field and choose the page you have created from the dropdown list

• Click on the Save Settings button

Now if you open the shop page of your website you can see the product table with all the features that you have added:

Use Elementor

Create a new page or post in WordPress and click the Edit with Elementor button.

Add the Shortcode widget to the page from the left panel:

Paste the copied shorts into the widget’s text box:

Click the Apply button then publish the page.

Conclusion

If you want to increase your sales, you should start attracting more customers by building a custom WooCommerce shop page. In this post, we show you three practical methods for WooCommerce shop page customization. But if you want to display a customer-friendly product table on your website in a short time with the help of a WooCommerce shop page customization plugin, your best choice is the WooCommerce product table plugin.

Click to learn about the unique features of this plugin.