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:storefrontchildNow 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.
👉 Get ProductX Pro to unlock all conversation-focused features and skyrocket your sales!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
👉 Get ProductX Pro to unlock all conversation-focused features and skyrocket your sales!
