Product Pages are the most important pages of any online store whether it is a WooCommerce store or a custom eCommerce site. WooCommerce has its own premade designs for all sorts of pages. These designs slightly change if you change your current theme with a few customization options.
Most of the WooCommerce users are small online store owners and don’t bother much about customizations. However, some of them are exceptional and make their online store well-optimized and unique compared to an average site. And, guess what! They are still using WooCommerce and making professional-looking eCommerce sites. So, how they are doing that? How to Customize WooCommerce Product Pages?
If you also have the same question in your mind, you are at the right place. Because this blog post doesn’t only covers customizing product pages but also creating a custom WooCommerce product page template from scratch.
So, without further ado let’s get started.
3 Ways to Customize WooCommerce Single Product Pages
There are three ways to customize WooCommerce Product pages. First of all, you can customize with the limited options available. The second is using additional CSS to make basic changes. The third and most complete solution is to use a pro plugin that lets you create and customize product pages from scratch.
To make things easier for you, I am going to talk about all these mentioned ways and let you decide which method suits you the best.
Check out what else you can do with the Exclusive WooCommerce Builder Addon of ProductX.
1. How to Customize WooCommerce Single Product Page using Default Settings
As I have said earlier, WooCommerce does not provide many customizations. However, you may want to know about the limited available options. There are two customization options available for single product pages. What are they?
Sticky Add to Cart: If you turn it on, there will be a sticky add-to-cart button at the top, when the shoppers scroll down at the end of a product page.
If you want to enable it, go to the WordPress customization option. Then, go to WooCommerce → Product Page. At last click on the Sticky Add to Cart option.
Product Pagination: The product pagination features help you to display the next and previous products while the shoppers are exploring a product.
To enable these features to go to the WordPress customization option and click on WooCommerce. Then, go to the Product Page and click on the check box Product Pagination.
Here is a guide to WooCommerce Pagination in case you want to add pagination to WooCommerce Shop Page.
2. How to Customize WooCommerce Single Product Page using Additional CSS
Now that, you may want more customization. For that, you can use additional CSS to make desired changes. If you visit the WooCommerce customization blog post, you will get some CSS to make basic changes. I have personally used all the CSS and made example changes which you can check below.
Change Product Titles Size
.woocommerce div.product .product_title {
font-size: 48px;
}Change Product Title Colors
.woocommerce div.product .product_title {
color: #FFCE00;
}Bold the Variation Labels
.woocommerce div.product form.cart .variations label {
font-weight: bold;
}Italicize the Variations Labels
.woocommerce div.product form.cart .variations label {
font-style: italic;
}Change the “Add to Cart” button Colors
.woocommerce div.product .button {
background: #0000FF;
}That’s all of the additional CSS provided by WooCommere. But What if you want to make more changes? What if you want to make custom product pages design/templates from scratch?
Don’t worry I have a perfect solution for you. ProductX is the name of the solution. It is a Gutenberg based all in one solution for creating a complete and conversion-focused WooCommerce store with all essential features.
ProductX also offers multiple addons to expand its functionality. And, WooCommerce builder addon is one of the best of them. It helps to create custom templates for Shop, Archive, and Single Product Pages.
This addon is only available for the Pro user. However, you can create one template using the free version to give it a try. And, the pro version later if you like it.
3. How to Create & Customize WooCommerce Single Product Page Template using ProductX
As you know, in order to start using a plugin you have to install it first. If you want to start with the free version, you can get it in the WordPress directory. After installing and activating the plugin. You can start creating custom templates for single product pages. To make things simple, you can follow the below steps:
👉 Get ProductX Pro to unlock all conversation-focused features and skyrocket your sales!
Step -1. Turn on the WooCommerce Builder Addon
To start using the Builder addon, we have to turn it on. For that,
- Go to the All add-ons section of ProductX.
- Turn on the WooCommerce Builder Addon.
Step -2. Start Creating a WooCommerce Product Page Template
Once you turn the addon, you will see a new Builder section added along with all other sections of ProductX. And, now you can start creating a template. For that:
- Go to the ProductX Builder Section.
- Click on the “Add New” Button.
- Write a name for the template such as Single Product Page.
- Select Single Product as the type of template.
In the same way, you can also create and customize WooCommerce Shop Page Template.
Step -3. Set Conditions for WooCommerce Single Product Page Template
After selecting the template type, you also need to select the desired condition. In simple words, condition selection refers, to which products you want to use this template that you are going to create. Let me explain all of the available options so that you don’t get confused.
All Single Products: You need to mark this option if you want to make a single template for all the products of your WooCommerce store.
Specific Products: If you want to make the template for a specific product then mark this option and select your desired product from the drop-down.
Specific Product Category: This option lets you create a template for all products under a specific category. For example, if you select the Clothing category then all the products under this category will follow the designs you are going to create for this category.
Specific Product Tag: Like product categories, you can also create a template for a specific product tag to assign the same design to all products under that category.
After selecting the desired condition, click on the create template button and then click on the save and edit template button.
The newly created template is ready and replaced with the default designs. However, if you visit the product page it will be empty. So we have to fill it up with the required fields.
Step-4. Customize WooCommerce Single Product Page Template
For the customization part, ProductX offers 13 Gutenberg WooComerce blocks finely crafted for single product pages.
You just need to drag and drop the blocks according to your desired layout and the custom product page will be ready in no time. And, guess what! You can also any Gutenberg blocks to create and customize the layout.
At first, the template will be empty. So that, you can customize it from scratch. For that, ProductX offers 13 new blocks for the Single Product page. You can use them by combining them with other Gutenberg Blocks. Let me show you how you can do that.
Add and Customize Product Breadcrumb
Add indication to the current product page location with navigational options. It allows users to understand the current location and navigate through different pages of your site. To add this block you need to click on the plus icon and select the desired block.
After adding the block you will get the following customization options:
- Change the colors of Text, Link, and Link Hover
- Typography control of Breadcrumb
- Adjust the Spacing
- Adjust the size of the Separator
- Change the color of the Separator
Add Gutenberg Custom Column block to structure the single product page layout
Click on the plus icon and add a column block with a 50-50 ratio. So that, you can add a product image on the left and other essential blocks to the right side.
Add and Customized Product Image Block
Now that, you have added the column, click on the plus icon on the left side and add the product image block. Then you can play with the setting options to customize the block.
The Product Image block offers the following customization options:
- Hide or undie Image Gallary
- Hide or undie Image Gallary arrow
- Gallery Icon Customization
- Gallery Position Customization
Add and Customize Product Rating
The product rating blocks let the visitors rate and see the rating of the products of your online store. You can add this by deciding the position and clicking the plus icon of the specific position.
After adding the block you can customize it with the following options:
- Size Selection
- Alignment selection
- Rating star color
- Star background-color
Add and Customize Product Title
Now add the Title Block to the right side by clicking on the plus Icon. So that, the Title of the products will be automatically added to all the product pages.
The Product Title Block of ProductX offers the below customization options:
- Size selection
- Alignment Selection
- Color Selection
- Typography control
Add Product Short Description
Add short Product descriptions to let users know about the products at a glance. For that, click on the plus icon. Then search and select the Product Short Description Block.
Customize the Block by using the below options:
- Choose alignment
- Change color
- Change typography
Add Customized Product Additional Info
Product Additional Info shows the Available colors, Weights, Sizes, etc. So the buyers to choose the desired products to purchase. Adding this block have a major impact on the conversion rate.
This block also allows customizing by using the following options:
- Hide or unhide heading
- Change heading text
- Adjusting heading position
- Choosing colors
Add Customized Product Price
To add go to the desired position and click on the plus icon. At last, select the Product price block. The product prices will be visible to the selected place dynamically.
After adding the Block you can play with the following customization options:
- Product Price alignment selection
- Hide or Unhide Discount Badge
- Sale Price Typography control
- Changing Product Price Size
- Choosing Product Price Color
Add Customized Product Stock
Product Stock Block represents the number of specific products available to purchase. You can add the block anywhere but it is recommended to add this before the Add to Cart block.
Product Stock Block comes with the following customization options:
- Product Stock alignment
- Product Stock Color
- Product Stock Typography control
Add Customized Product Add to Cart
Product Add to Cart blocks helps the users to add their chosen products to the cart later they can browse and select more products and purchase all of them at once.
It offers the following options to customize:
- Hide or Unhide Product Quantity selection
- Enable or Disable Product Compare and Wishlist
- Change Add to Cart Color
- Change Quantity Color
- Change Quantity Background Color
- Change Hover color of add to cart
Add Customized Product Meta
Product meta includes product SKU, category, and tags. This information will automatically be added and you just need to add the Product Meta block.
To customize this block you can use the below options:
- Hide or unhide Category, Tag, and SKU
- Choose the color of Meta headings
- Choose Color of Meta values
- Full typography control
Add Customized Product Tab
Add a Product Tab to give the users more information about the products. The Product Tab block of ProductX is the combination of three blocks that includes Product Description, Additional Info, and Reviews. However, You can also add these blocks separately.
You can also explore the following customization options:
- Hide or unhide any of the tabs
- Change Typography
- Change Colors of Text, Background, and Hover Background
Include Related and Upsell Product
After customizing the single product page with the new product blocks you also should add related and upsell products. It will let them explore more products they may want to buy. For adding Related and Upsell products you can add Post Grid Block and sort the products according to the categories using the Advance query Builder.
After finishing all required customization you can publish the template and check how it looks on the product pages. Because we were customizing the product template dynamically with dummy content and now we will see how it looks with the static contents.
On-Page Optimization Tips for Product Pages
Having well-designed product pages cant increase the success rate in this competitive market. To gain potential buyers from search engines, you should ensure proper on-page optimizations. For that, you can use the following recommendations.
Choose the Right Keywords: Keywords are the main criteria for On-Page optimization. If you can use the right keyword 50% of your work is done. But If you are focusing on wrong or over-competitive keywords then other optimizations can not make sure a better ranking on SERP. Choosing a keyword is not too hard for Product Pages. You can just find low competitive keywords from your competitor’s sites by using Keyword analysis tools like Semrush and Ahref. If you can’t afford an SEO toll don’t worry there’s another way to find keywords. Go to Google search for the Product name and look at the suggestions. Google always shows the phrases/keywords that are mostly searched by the users. Choose the best options and use them on your single product page.
Optimize Title and Meta Description: After choosing the keyword use it to write a killer Title to increase the click rate from the Search Engine Result Page. Don’t forget about the meta description. To optimize it write a short description of the product and include the targeted keywords in the description.
Use structured data: Using product structured data can help search engines to separate product pages from blog posts. Not only that it also opens the possibility to win featured snippets. So always use the Product and review Schema for all the single product pages of your online store. You don’t need to be an expert developer to add schemas. If you are using WordPress use the Rank Math plugin. It will help to add custom schemas for the product pages. You can also copy and use any schemas from your competitors also.
Focus on Bounce Rate and Dwell time: To understand whether the on-page optimizations are working or not you can look at the data of the Bounce rate and Dwell time. If the bounce rate is higher then try to decrease it by adding Related and Upsell products. If these are already present then you may need to change the position or design to attract visitors. Another important indication of understanding SEO efforts is the Dwell time. It is the average time the visitors are spending on your site. You have increased it to increase the SEO visibility and conversation rate.
Avoid Duplicate Content: Content Duplications are the most hated thing by Google. But still, many online stores use product descriptions from manufacturer sites. It hurts the SEO efforts. You should avoid the practice of content duplication in order to gain organic traffic from Google. Write your own thoughts and findings on the products to avoid duplications.
Conclusion
That’s all about how to create and customize WooCommerce single product page template. Hope you can customize your Single Product pages using the ProductX Gutenberg WooCommerce Blocks plugin. If you have any other queries feel free to leave a comment below.
You can check out more WordPress video tutorials on our YouTube Channel. Also, find us on Facebook and Twitter for regular updates!
👉 Get ProductX Pro to unlock all conversation-focused features and skyrocket your sales!
