up to 70% off
Days :
Hours :
Mins :
Seconds
Back To Blog

How to Customize WooCommerce Shop Page Template

WooCommerce Shop Page Template

The default design of the WooCommerce shop page is not up to the mark. It follows the default archive.php template of the current WordPress theme. So it is totally okay if you don’t like the default template. But the question is how to customize WooCommerce Shop Page Template.

There are two ways to create or customize the WooCommerce Shop Page template. The first way is to create a shop template using a plugin like ProductX WooCommerce Blocks. Or else you can create a template manually if you have some basic coding knowledge.

How to Customize WooCommerce Shop Page template Programmatically

If you have some knowledge about coding then you can create a WooCommerce Page template by following the below steps:

Step-1. Create a Child Theme

As you are going to play with the current theme of your site, it is recommended to create a child theme and customize it instead of the main theme. Because while making changes, you may break the structure of your site. Another problem is that, if you add custom codes in the theme files, the codes will be removed with a new update of the theme. So without further ado let’s get started.

First of all, you have to create a new folder in the path of your theme files (wp-content/themes/) and give a name to it. It will be your child theme. Open the folder and create a text file and paste the following code.

Theme Name:Storefront Child Theme
Theme URI:https://www.wpxpo.com/
Description:A Storefront child theme
Author:WPXPO
Author URI:https://www.wpxpo.com
Template:storefront
Version:1.0.0
Text Domain:storefrontchild

Now create another text file, name it functions.php and paste the code below.

/* enqueue scripts and style from parent theme */
    
function storefront_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
    array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'storefront_styles');

That’s all now when you go to the appearance themes section of your site and you should see the two versions of themes which are Storefront and Storefront Child.

Step-2. Create a WooCommerce Shop Page Template

Now that, you have created the child theme, it’s time to create a shop page template. For that, go to the Cpanel of your site and open the child theme file. Create a file and name it archive-product.php which will be the shop page template.

Step-3. Customize the WooCommerce shop page template

The template is empty so if you browse the shop page of your site it will also be empty. You can either create the template by writing your own codes or you can just copy the codes from the single-page template and paste it to the new template to start with.

Now you can preview the shop page and will realize that it looks a bit broken. But don’t worry will fix this with the below code.

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

To properly implement this code:

  • Start editing the template (archive-product.php).
  • Replace the code between and <!– #main → with the above code.

After replacing the codes refresh the shop page to check how it looks. You will see that the products are displayed in an organized way according to the code. You can also increase the number of products and columns by replacing the value of the product limits and columns.

How to Create and Customize WooCommerce Shop Page Template using ProductX

If you are not a developer or simply don’t like writing code then the second method is perfect for you. In this method, you need to use the ProductX Gutenberg WooCommerce Blocks plugin. Or you can also look for a WooCommerce development company.

ProductX offers a exclusive WooCommerce Builder addon to create custom Product Archives, shop, and single product pages. Follow the below steps to start creating a new WooCommerce Shop page Template.

Step-1. Install ProductX

If you want to use the WooCommerce Builder addon you need to install the ProductX plugin to your WooCommerce site. For that:

  • Go to Plugin Section and click on add new button.
  • Search for ProductX.
  • Click on the Install button.
  • After installation click on the activate button.
Install ProductX

Step-2. Turn on Builder Addon

After installing the plugin you need to turn on the WooCommerce Builder addon. For that:

  • Go to the All Addons section.
  • Turn on the Builder Addon.
Turn on WooCommerce Builder Addon

After turning it on, you will see the builder section along with all other sections of the Productx.

Step-3. Create a new WooCommerce Shop Page Template

Now it’s time to create a new template for your WooCommerce shop page. Don’t worry, no codes are required. Just follow the below steps:

  • Go to Builder Section.
  • Click on Add New button.
  • Give a name to the Builder.
  • Select Builder type as Shop.
  • Save and start editing Shop Template.
Create a new WooCommerce shop page template

Step-4. Customize WooCommerce shop page template

Now, are you probably thinking about how to customize WooCommerce shop page template? For that, you can import any of the available Product Blocks.

Feeling bored while reading? you can also check out the quick tutorial on creating a custom WooCommerce shop page.

ProductX offers multiple types of Products Blocks that include Product Grids, Product List, Product Category Grids, and Product Sliders to showcase the products of your WooCommerce store. Now let’s customize the shop page template starting with the product blocks.

Import Product Blocks

Just click on the plus icon and add your desired product blocks. For now, I am importing the product grid #1 block.

Import Blocks

After importing a block, you can also customize it using the settings section. There are multiple customization options available for each of the blocks.

Explore Query Builder

The Product Query Builder is used for choosing the number of products and product sorting defending on multiple criteria such as, most viewed, most sold, most rated, random, etc. To sort products:

  • Click on settings.
  • Navigate to Query settings.
  • Click on Quick Query.
  • Select the sorting criteria.
Explore Query Builder

Add Product Filter

ProductX offers two types of filtering features, the first one is the WooCommerce filter by category and the second one is the action filter that includes, popular, on sale, most rated, top-rated, featured, and new arrival.

To add the product filter:

  • Go to general settings.
  • Turn on the Filter option.
  • Navigate to the filter option.
  • Choose filter type category.
  • Select specific or multiple categories.
  • Choose specific or multiple action filtering criteria.
Add Product Filter

Customization options:

  • Alignment selection.
  • Desired colors for filterable text.
  • Border radius, margin, and padding.
  • Dropdown text color.
  • Dropdown hover color.

Add Pagination

ProductX also offers ajax-powered WooCommerce pagination to increase the number of products without reloading the whole page. To add pagination:

  • Go to general settings.
  • Turn on the Pagination option.
  • Choose Pagination Type.
Add Pagination

Customization options:

  • Pagination text color.
  • Background color.
  • Adjusting border-radius, margin, and padding.

Add Image Flip Feature

The Product Image Flipper Addon helps you include image flip features in WooCommerce stores. So that, when the visitors hover over an image the product image will be flipped to another image. By default, the product image will be flipped to the first image of the product gallery images. However, you can also select your desired image.

flip image

To add this feature:

  • Go to the all Addons section of ProductX.
  • Turn on Flip Image Addon.
  • Turn on Image flip for the desired product blocks.
  • Add the desired image while editing a single product.

Add Wishlist Feature

ProductX also offers a wishlist addon to add two types of wishlist features to the WooCommerce store. So that the visitors can add their desired products to a list and purchase them later.

Wishlist

To add this feature:

  • Go to the all Add-ons section of ProductX.
  • Turn on the Wishlist Addon.
  • Create and Configure the Wishlist page.
  • Turn on Wishlist from the general setting.
  • Choose Wishlist type Pop up/Redirect to Wishlist Page.

Customization options:

  • Choose Wishlist button color.
  • Choose Button background color.

Add Quick View Feature

The Quick View Addon of ProductX helps you to include product quick view features in your WooCommerce store. So that, the visitors can see basic details of the products on mouse hover without leaving the Shop/Archive pages.

How to Customize WooCommerce Shop Page Template 1

To add this feature:

  • Go to the All Addons section of ProductX.
  • Turn on the Quick View Addon.
  • Enable the Quick View feature from the general setting.

Customization options:

  • Text Color.
  • Hover Color.
  • Background Color.
  • Adjust Padding.

Add Variation Swatches

The Variation Swatches Addon helps you to convert dropdown selection options of variable products to beautiful swatches. However, you can also create images, colors, and label swatches from scratch.

display swatches on shop page

To add this feature:

  • Go to the all Addons section of Products.
  • Turn on the Variation Swatches Addon.
  • Enable it for the grid.

Benefits of ProductX to create WooCommerce Shop Page Template

All in one Solution: The ProductX Gutenberg WooCommerce Blocks is an all-in-one solution to create a customized WooCommerce shop. So, if you use it to create a Shop page template; you can also be benefited in many other ways.

It offers all the required features required for an online store. So you can eliminate 5-7 essential plugins resulting in saving hosting resources.

No Coding Knowledge: As I have mentioned earlier, You don’t need to write codes while using the ProductX plugin. No matter, whether you want to create templates for a Shop page, or Single Product pages everything is easy to do and customizable.

Conversation Rate: All the features and Pro Addons of the ProductX plugin are finely crafted for increasing the conversion rate. However, you need to use them effectively to ensure a better customer experience.

Gutenberg Ready: The use of the Gutenberg editor is increasing fast. This default WordPress editor is already competing with popular page builders like Elementor, Divi, Oxygen, etc. Recently, they have introduced the full site editing capabilities of the Twenty Twenty-Two theme.

So, being Gutenberg-ready is a big advantage for ProductX users. Because many big players of WordPress are already saying, Gutenberg is the future of WordPress.

Average Order Value: Average order value refers to the average spending amount of every purchase. It directly impacts the total revenue of eCommerce sites. That’s, why all online store owners always try to increase it.

ProductX can help to optimize your WooCommerce store to increase the average order value.

Regular Updates: Like all other idle plugins ProductX also provides regular updates to be up to date with WordPress updates. The ProductX team also provides updates with bug and error fixes.

Conclusion

That’s all about creating and customizing WooCommerce Shop Page Template. Now, start creating your template with or without writing codes. If you still face any difficulties feel free to comment below.

Like this article? Spread the word

Written byOmith Hasan

I am a professional blogger since 2016. I love to explore and write about different types of WordPress themes and plugins. When not writing, I try to learn and implement new SEO strategies.

Leave a Reply

Get Discount