WPMet Site Logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
WPMet Site Logo

How to Customize WooCommerce Product Page Without Coding

Editorial StaffEditorial Staff Updated on: February 1, 2023 Elementor ShopEngine WooCommerce 11 Min Read
How to Customize WooCommerce Product Page Banner Image

Are you using WooCommerce to design your online store? Then you should know that over 3 million websites are doing it too.

So does this mean that they all look the same?

Well, if your site has the default WooCommerce templates then yes. Your online shop will look like thousands of other stores.

Your unique product deserves a unique customized WooCommerce product page. Not only the product page but also you need to customize WooCommerce shop and other pages for better UX. Luckily, this does not require any complex code or process. You can perform simple tweaks to improve your page design to complement your product by editing your WooCommerce single product page.

In this article, I’m going to explain how to customize a WooCommerce Product Page even if you have no coding knowledge.

Are you here to hear? If yes, read this post till the end. 

Contents hide
What Do You Need to Customize WooCommerce Product Page?
Customize a WooCommerce Product Pages Step-by-step
Install Elementor and ShopEngine
Create a Woocommerce Single Product Page Template
Select a Structure to change your WooCommerce single product page layout
Customize Product Price
Customize WooCommerce Product Title
Add Breadcrumbs
Customize Product Additional Information
Leverage Product Upsells
Customize Product Rating
Customize Product Meta
Update Product Description Styles
Customize Add to Cart Button
Add Product Share Options
Customize the Product Review Widget
Customize Product Stock Status
Add and Customize Product Tabs
Show Related Products
Preview Settings or Changes on Responsive Mode
Bonus: 5 Ways to Optimize the Product Page to Increase the Conversion Rate
Maintain Information Hierarchy
Use High-Quality Images
Write a Killer Product Description
Place Pricing the Right Way
Optimize the WooCommerce Product Page with On-page SEO
Final Words

What Do You Need to Customize WooCommerce Product Page?

You must be wondering about what you need to customize a WooCommerce single product page for online business. Well, the process I’m going to show for product customization WooCommerce will not need you to buy dozens of paid plugins or extensions.

Apart from having WooCommerce installed and activated, you’ll need to activate the following two plugins on your WordPress website to edit your WooCommerce product page beautifully: : 

  1. Elementor Page Builder
  2. ShopEngine

Both of the plugins work smoothly with the WooCommerce plugin and help you start designing and customizing your single product pages for all new products and old ones. Changing the WooCommerce product page or single product page layout will be easier with ShopEngine. Because you will get a WooCommerce shop page template in ShopEngine by that you can create and edit WooCommerce shop page within minutes.

Customize a WooCommerce Product Pages Step-by-step

There is no end to customization and tweaks for a default product page. Different kinds of products need different types of customizations.

However, in this step-by-step guide, I’m going to explain the key customizations you can make to your WooCommerce product page so that you get more sales from all product pages. Let’s get started.

Install Elementor and ShopEngine

Elementor and ShopEngine Installation Process to change or edit WooCommerce product page layout
Install Elementor and ShopEngine

As we’re going to customize the default WooCommerce product page with Elementor and ShopEngine, the first step is to install the plugins from WordPress. Here see how to install Elementor and ShopEngine for changing the WooCommerce product page or list layout.

Elementor Installation ProcessShopEngine Installation Process
1. Go to your WordPress Dashboard. Click on Plugins ➜ Add New
2. In the search box, enter Elementor, and choose the Elementor Website Builder plugin to install. 
3. After installation, click on Activate. 
1. Go to your WordPress Dashboard. Click on Plugins ➜ Add New
2. In the search box, enter ShopEngine, and choose the ShopEngine plugin to install. 
3. After installation, click on Activate.
Elementor and ShopEngine Installation Process

Create a Woocommerce Single Product Page Template

  1. Go to ShopEngine ➜ Templates➜ Add New
  2. Give the template a Name
  3. Choose type: Single
  4. Set the template as default (Yes)
  5. Click on Edit with Elementor
Create-a-Woocommerce-Single Product Page Template
Create a Woocommerce Single Product Page Template

In this product customization WooCommerce tutorial, I will show how you can build a WooCommerce product page from scratch. That is why I chose the blank template. However, ShopEngine provides 9+ professional looking prebuilt single product templates which you can import and use.

Select a Structure  to change your WooCommerce single product page layout

Choose your preferred structure from Elementor to start making a single Elementor WooCommerce product pageproduct page of your store. 

Select Elementor  Structure from for WooCommerce Product page.png

After you select a structure, you can drag and drop any widgets in any order according to your preferences.  To create a custom WooCommerce Product page ShopEngine provides 20+ widgets which include product image, product title, product price, product stock, product tabs etc.


Note: Before you start building your product page, make sure the widgets you are going to use are enabled. You can do that from ShopEngine ⇒ Widgets ⇒  Single, turn on the widgets you need and click on save changes.

ShopEngine Single product page widget lists

Here, I am going to show you how to use some of the single product widgets. You can use the same widgets or a different set of widgets following the same steps.

Customize Product Price

Search for the ‘Product Price’ widget on Elementor. Drag and drop the product price widget from the ‘ShopEngine Single Product’ block to make a WooCommerce custom product page.

Product price widget of ShopEngine Customize WooCommerce product page
Customize WooCommerce Product Price

This price block widget will help you to: 

  • Set the product price alignment to left, center, and right
  • Change the primary, secondary, text, accent color
  • Use the color picker option to design the product tag with your favorite color
  • Change the typography family, typography size and weight, decoration, line height, letter spacing, and other typography-related settings. 

Customize WooCommerce Product Title

Customize WooCommerce Product Title
Customize WooCommerce Product Title

Search for the ‘Product Title’ widget on Elementor. Drag and drop the product title widget from the ‘ShopEngine Single Product’ block to make and customize your WooCommerce product page. These simple edits of your WooCommerce single product page can make a huge conversion by providing better UX.

From the style settings of the product title block, you can make the following customizations: 

  • Set your product title HTML tag from H1 to H6.
  • Set product title alignment to right, left, or center. 
  • Change the product title color
  • Set all aspects of typography

Add Breadcrumbs

Add Breadcrumbs with ShopEngine How to customize WooCommerce product page
Add Breadcrumbs with ShopEngine

A breadcrumb will let the shoppers know where they are on your website. It is a wise decision to add a breadcrumb to your product page. Here’s how to add breadcrumbs: 

Search for the ‘Breadcrumbs’ widget on Elementor. Drag and drop the breadcrumbs widget from the ‘ShopEngine Single Product’ block to the Elementor content area. 

From the style settings tab, you can: 

  • Set text color, link color, link hover color of the breadcrumbs
  • Choose typography, alignment, icon, icon size, and space between values for the breadcrumbs that allow you to change WooCommerce product or category page layout.. 

Customize Product Additional Information

Customize Product Additional Information
Customize Product Additional Information

A short description might be inadequate for your product. And when a short description is not enough, the additional product information will increase the likelihood of more sales. 

Search for the ‘Product Additional Information’ widget on Elementor to edit WooCommerce product page. Drag and drop the widget from the ‘ShopEngine Single Product’ block to the content area for changing WooCommerce product page layout. 

Here is a list of what you can control leveraging the widget: 

  • Change the alignment, color, typography, and margin of the title
  • Change the color, typography, background, and width of the label
  • Change the color, background, and typography of the value
  • Reset the table alignment and padding
  • Set your preferred typography family 

Leverage Product Upsells

Customize Product Upsells
Customize Product Upsells

Product Upsells widget will help you to suggest more products to your buyers. Upsell products will inspire your buyers to buy more products from your shop and thus contribute to increased profit. 

Search for the ‘Product Upsells’ widget on Elementor. Drag and drop the widget from the ‘ShopEngine Single Product’ block. This edited WooCommerce product page layout will drastically boost your conversion rate.

From the content and style tab, you can: 

  • Set the number of the product image to show 
  • Enable/disable slider, loop, and autoplay
  • Show/hide the heading, sale flash, regular price, arrows, dots, and cart button
  • Set slider columns, speed, and  arrow size
  • Define the dots size or active dots size
  • Set order by option
  • Set column gap
  • Change background color, text alignment, etc. 

These all customizations will make your product page more appealing to your customers by changing your WooCommerce product or category page layout.

Customize Product Rating

Customize WooCommerce Product Rating
Customize Product Rating

Showing product ratings on your product pages will help your visitors find the best products based on the user ratings. 

Leverage the Show Product Rating widget from ShopEngine and make any of the following changes: 

  • Choose rating star color and empty star color
  • Set the star size and gap
  • Review the link color, link hover color, and typography
  • Define the left spacing and alignment 

Customize Product Meta

Customize WooCommerce Product Meta
Customize WooCommerce Product Meta

Just drag and drop the product meta widget to the Elementor content area to start customizing your product meta settings. 

Using the product meta widget, you can show or hide product SKU, category, and tags. On top of that, you can also change the layout, alignment, padding, typography, link hover color, and content color within minutes. 

Update Product Description Styles

WooCommerce product description
Update Product Description Styles

Drag and drop the product description widget of ShopEngine and bring any changes you like to the color, typography, and alignment of the description.  

Customize Add to Cart Button

Customize Add to Cart Button

Make sure that your product pages have an excellent add-to-cart button. This will surely increase the conversion to a great extent. 

With the add to cart widget from ShopEngine on Elementor, you can change the quantity icons, button positions, etc. 

Moreover, you can execute A/B tests with the style settings to find out what works best for your changed WooCommerce product page layout. 

Add Product Share Options

Add Product share option to WooCommerce produ
Add Product Share Options

Adding product sharing buttons on your WooCommerce product pages is a great idea you can implement right now. When the shoppers will share the product data with their near and dear ones, you’re going to have more sales from new users without any paid advertising. 

Leverage the product share widget from ShopEngine to add a customizable product share option to your WooCommerce product pages. However, you have to use a social sharing plugin like WP Social to enjoy this option. 

Customize the Product Review Widget

Customize product review using ShopEngine
Customize the Product Review Widget

Place the product review widget at the right place of your product page so that the product users can leave their ratings and reviews. It also promotes your brand perfectly.

Using the ShopEngine ‘Product Review’ widget from Elementor block, you can make the following changes to the product review section: 

  • Change the color and typography of the product review heading
  • Set the single review border type, width, color, and padding
  • Set author avatar width, author name color, and typography, review date color, and typography
  • Review content color along with the typography
  • Change the default star color and empty star color
  • Customize the comment form
  • Choose your preferred font size and font family, etc. 

Customize Product Stock Status

Customize Product Stock Status
Customize Product Stock Status

With ShopEngine’s “Product Stock” widget, you can customize the in-stock or existing product text and icon along with the color, typography, and alignment of your WooCommerce product pages. 

On top of that you are at full liberty to set the icon, alignment, color, and typography for ‘out of stock’ and ‘available on backorder status. 

Add and Customize Product Tabs

Add and Customize Product Tabs
Add and Customize Product Tabs

Adding product tabs allows you to let your customers give more information regarding the products you are selling on your WooCommerce store. With ShopEngine, you can add custom tabs and customize them to suit your needs.

Just drag and drop the ‘Product Tabs’ widget from the ShopEngine Single Product block on Elementor and your edited WooCommerce product page is ready to go.

You can control the following aspects of your product tabs with the widget: 

Navigation Style: Typography, menu color, active menu color, nav indicator color and border, menu spacing, box-shadow, border type, line width, color, and padding. 

Tab Content: Show or hide tab content title, change the tab content title color and typography, set tab content wrap padding. 

Information List: Customize the attribute color, value color, and table data typography. 

Average Rating: Experiment with the rating title, rating total, and rating count typography and color.

Review Style: Customize the rating color, empty rating color, date, authority and description color, date typography, and description typography. 

Review Form: Change the form label color, label typography, input border color, input focus border color, input typography, message color, and required color. 

Submit Button: Set the padding, border radius, button typography, box-shadow, color, and background. 

Show Related Products

Add and customize WooCommerce related products
Show Related Products

Showing Related Products for your customers to buy is an amazing idea you can implement on your eCommerce website. ShopEngine ‘Related Product’ widget for WooCommerce product page will help you show related products with the following settings: 

  • Set the number of products to show
  • Enable/disable slider
  • Show/hide heading, sale flash, regular price, and cart button.
  • Set number of slider columns
  • Change background-color
  • Set slider speed, etc. 

Preview Settings or Changes on Responsive Mode

Preview Settings on Responsive Mode Elementor
Preview Settings on Responsive Mode

As most of the customers nowadays use mobile devices to buy from online stores, make sure the product pages of your shop work seamlessly for mobile and tablet viewers.

Leverage the button labeled responsive mode of the Elementor to see how the changes of your full-width product page look on mobile and desktop devices. 

If you find that there are some inconsistencies or issues for mobile and tablet views, fix those up for mobile viewing. 

When you are done adding and customizing the required widgets for your WooCommerce product pages and previewing the product page layout for devices, click on the ‘update’ button of Elementor.

That’s it! Follow the steps I have shared in this product customization WooCommerce tutorial.

Bingo! Your edited WooCommerce product pages are now mobile optimized and ready to go live. 

Bonus: 5 Ways to Optimize the Product Page to Increase the Conversion Rate

Once you customize WooCommerce product page, it is time to optimize the page. A well optimized product page can boost sales instantly.

To get a good conversion rate, it is important to optimize your product page by changing your WooCommerce product page layout. Below are 5 ways you can follow to maximize the conversion rate and revenue out of your online store.

Maintain Information Hierarchy 

Information Hierarchy in WooCommerce Product Page
Information Hierarchy in WooCommerce Product Page

Make sure that you design the WooCommerce single product page maintaining the information hierarchy. 

For example, it is a common practice to keep the breadcrumbs atop all the information. The breadcrumbs are usually followed by the product title and other product-related information like a review or description. In most of the online stores, you’ll see the images on the left of the page with an icon to see the enlarged view.  

Also, make sure that the information you are providing on the new edited WooCommerce product page is giving the shoppers a complete idea about the product you are offering to sell. 

Use High-Quality Images

Use High-Quality Product Images
Use High-Quality Product Images

Only having a good product can’t bring more money to your pocket unless you present them smartly to your customers. A product image is an excellent way to showcase your products to the target audience both inside the product page and shop page.

However, If your pictures are mediocre, obscure, or with a wrong angle, you can’t expect much out of them.

When you post the product images, make sure that they are clear, product-focused, and captured from the right angle. 

Adding contextual product images can show your products in the appropriate environments. For example, capture the picture of kitchen appliances in the kitchen to show your customers how perfectly the appliances will suit their kitchen. 

Hire a professional photographer to capture the detailed product image for the product gallery. In the case of a physical product, it is best to capture the same product from all angles. It will help the customers see the product parts more clearly. On top of that, it makes the customers feel confident about making the purchase. 

Last but not least, I recommend using high-resolution product gallery images. Though images can slow down your WooCommerce product page a little bit, you can minimize the effect with any free plugin for image optimization like Smush. 

Image Optimization Plugins for WordPress
Image Optimization Plugins for WordPress

Write a Killer Product Description

A convincing and appropriate product details or description plays an important role in online sales. Make sure that the product description mentions the key product information. By the way, that’s not enough. The information should also be easy to read and to the point. You can use bullet-point format to display the information one by one. 

Remember, you don’t need to be formal all the way. If it suits the product category, you can use a funny, approachable, and delightfully off-beat voice to edit product page WooCommerce. 

Here’s an appealing description of Breakfast Hot Dog Bundle from Picky Bars:

Example of a Killer Product Description for your changed WooCommerce product page layout
Example of a Killer Product Description

The final suggestion, while you write a product description, note various usage options of the products. It will help the potential customers know whether the product will fulfill their needs or they need something else. 

Place Pricing the Right Way                               

No matter what types of products you are selling, price is always a big factor for your customers. The pricing and how you place it on your custom WooCommerce product page affect their buying decision. 

To make your pricing easily visible, you can use a large font. Making the pricing text bold or using a contrasting color might also work well for you. 

Highlight discounts along with showing the regular price followed by the new one. This customized and changed WooCommerce product page layout will offer an easy-to-view user experience.

Here’s an example on how Picky Bars have done it:

How to Place Price on Your WooCommerce Product Page
How to Place Price on Your WooCommerce Product Page

If your customers can’t see the price clearly, you should rethink the design customization that you have done to edit your WooCommerce product page. 

Optimize the WooCommerce Product Page with On-page SEO

To gain more organic traffic to your WooCommerce product pages, it is important to use on-page SEO techniques. Use the right title tags, meta description, alt tag for product image, keywords, description, and other on-page SEO factors to gain more customers and thus more conversion rate. 

Key On-page SEO Factors
Key On-page SEO Factors

More guides:

Need more WooCommerce page customization guides? Read the following blogs to customize and change your WooCommerce shop and other pages:
How to Customize WooCommerce Category Page Without Coding
How to customize WooCommerce Cart Page For Free
How to edit and customize WooCommerce shop page
How to customize WooCommerce my account page
How to customize WooCommerce checkout page
How to Solve WooCommerce Empty Cart Error

Through these blogs, you will know how to set up and change WooCommerce custom shop, cart, my account, checkout pages.

Final Words

No matter how you customize WooCommerce product page of your online store. Whether it is and Elementor WooCommerce product page or the default one, make sure that the changes you make are user-friendly and intuitive. While you customize and edit product page WooCommerce, make sure that you follow consistency, relevance, and context. However, your edited and changed WooCommerce product page layout needs to be highly optimized for devices.

Customizing your WooCommerce single product page might seem to be a daunting task at the beginning. However, if you have Elementor page builder and ShopEngine, you should stay free of stress. 

Get Elementor
Get ShopEngine

That’s all for now. If you have any questions or confusion, feel free to let us know via the comment box.

  • Share :

ElementsKit’s Latest Update is All You Need in Elementor

Previous post

How to Create Tables in WordPress with TablePress

Next post

8 Comments

  • Reply
    Boris says:
    October 31, 2021 at 6:25 pm

    Very helpful, thank you

    • Reply
      Dipa Shaha says:
      November 1, 2021 at 5:08 am

      Boris, good to hear we could help you. You are welcome.

  • Reply
    Alisa Renna says:
    December 31, 2021 at 7:52 am

    Great article. It’s so detailed and helpful

    • Reply
      Dipa Shaha says:
      January 2, 2022 at 6:08 am

      Thank you for your feedback Alisa.

  • Reply
    Morgan says:
    September 14, 2022 at 11:19 am

    Wow great…. just found out this articles, can we just using shop engine without elementor ? I really dont want to use elementor

    • Reply
      Dipa Shaha says:
      September 21, 2022 at 7:28 am

      Morgan, ShopEngine has a Gutenberg Addon too. If you don’t want to use the Elementor addon, you can check out the Guternberg version.
      Check this link to find more details
      https://wordpress.org/plugins/blocks-for-shopengine/

  • Reply
    Odunayo says:
    October 19, 2022 at 11:23 am

    Are my going to customize my single products page one by one… Now I have more than 15 products are my going to add a single shop engine page for each of the products?

    • Reply
      Dipa Shaha says:
      October 21, 2022 at 7:20 am

      Odunayo,
      All you have to do is create one single product template. This template design will be applied to all your existing products.
      Note: You don’t have to create seperately for each of the product.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Subscribed Today!

WPMet Site Logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.

Company

About us
Contact us
Support
Blog
Collaborate
Documentation

Resources

Affiliates
Affiliate Area
Privacy Policy
Terms & Conditions
Refund Policy
Login/Register

Our Products

Elements Kit
ShopEngine
GetGenie Ai
Metform
WP Social
Wp Ultimate Review
Wp Fundraising

Follow Us

Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT