Grab a mega discount 🎁 on WooLentor during the COVID-19 pandemic crisis! Get 40% OFF

Best WooCommerce Single Product Page Builder for Elementor

Have you been searching the internet for the best WooCommerce Single Product Page Builder for Elementor to use on your WooCommerce website wondering, that it will allow you to design the default WooCommerce product page layout like the way you desire?

Although the default layout for the single product page that comes with WooCommerce is pretty functional, it doesn’t offer the flexibility you need to change the appearance of that page to make it stand out from your competition.

If you are using the default layout, then the only options available to customize the layout are either by editing the theme you are using or by overriding the default WooCommerce templates programmatically which require coding knowledge. Not to mention, it is very time-consuming as well.

Some particular WooCommerce themes might bring some changes to the WooCommerce product page of your online store, but those themes will not allow you to change the overall structure of the page.

So, after scouring the internet for a long time researching all the available solutions out there, I have come up with one of the most popular WooCommerce page builder plugins called WooLentor. It is an excellent WordPress plugin that works as a WooCommerce Addons for Elementor Page Builder.

WooCommerce Single Product Template Using Elementor Page Builder

Why WooLentor is the best WooCommerce Single Product Page Builder for Elementor?

WooLentor comes with an intuitive WooCommerce page builder that lets you customize all the default WooCommerce pages of your online store. Apart from being fully compatible with the WooCommerce plugin, it has seamless integration with the Elementor page builder as well.

Hence you can customize every element, simply by using the drag and drop builder that comes with the Elementor page builder.

It is worth mentioning that the research has been done by keeping both the technical and non-technical users in mind so that anyone can use the plugin effortlessly without any prior knowledge of coding.

Even though you can design all of the default WooCommerce page templates using WooLentor, in this article we’ll only be focusing on how easily you can design or customize WooCommerce product pages of your store. As we all know that a single product page is one of the most crucial parts of an online store. This is where you display the shoppers all your product information in detail. Right?

You have to make sure that you are showing all the necessary information to the shoppers so that they can get a complete idea. Now, this is where WooLentor comes into play. With the help of its intuitive WooCommerce single product page builder, you can not only design a unique WooCommerce product template but also showcase all of the product data in a user-friendly manner that will surely increase the conversion rate.

Now, let me walk you through the step-by-step process of how you can leverage WooLentor to design an outstanding single product page.

By the end of this article, you will learn: How to create a stunning product page using the intuitive WooCommerce page builder of WooLentor.

What plugins are required to build a custom WooCommerce single product page?

Firstly, you will need to install and activate only two plugins alongside WooCommerce. The plugins are the following:

Elementor Page Builder

WooLentor WooCommerce Elementor Addons
WooLentor WooCommerce Elementor Addons

An amazing fact about WooLentor is that it comes with tons of useful features and customization options that would be more than enough to meet your needs. Thus you don’t have to rely on any extra third-party extensions unless you need them badly.

Given that the WooLentor plugin is fully compatible with the Elementor page builder, so you can use almost any sort of Elementor widgets to design WooCommerce single product page templates. Aside from the default widgets available in Elementor, you will also get numerous other widgets in the WooLentor plugin, specially designed for the single product page template.

In the later part of this article, we’ll talk about that in detail. But before getting into that, let me show you how to get started with WooLentor. Assuming you have already installed and activated the WooCommerce and Elementor page builder plugins, let me show you how to install the WooLentor plugin from the WordPress repository.

Go to your dashboard panel

Navigate to the Plugins menu and click on Add New

woolentor plugins add new
Add new new plugins
WooLentor Install
WooLentor plugins add and Install

Then click on “Install Now”.

Once you have installed the plugin, make sure to activate the plugin and you are all set.

Note that the Elementor plugin must be activated on your website before installing and activating the WooLentor plugin. Otherwise, a notice will be displayed on your dashboard prompting you to install the Elementor plugin first. You can then install the Elementor plugin from there.

WooLentor Addons for Elementor requires Elementor Plugin
WooLentor requires Elementor Plugin

Now that we have installed and activated all the essential plugins, let’s move forward and see how you can create your own personalized single product page for your WooCommerce store step by step.

How to design a custom WooCommerce product page template?

When it comes to designing custom WooCommerce single product page templates with WooLentor, the possibilities are endless. Meaning you can totally alter the look and feel of the default product details page for both your old and new products.

There are two different ways to create a custom single product page in WooLentor. The first one is to use a predefined template and another way is to create the template from scratch.

How to create a custom single product page using a predefined layout?

If you want to get rid of the basic WooCommerce product page design by replacing it with a beautifully designed template then this option is well-suited for you. WooLentor comes along with a rich template library where you will find a variety of premade templates exclusively designed to use for the single product page of your WooCommerce store. These templates are built with modern design and trends in mind. Moreover, they will not only save you a lot of time and effort but also assist you in getting your WooCommerce product page up and running in a matter of minutes. If you want to use a built-in layout from WooLentor, here are the steps to follow:

Go to the Template Library of WooLentor

woolentor template library
Woolentor template library

Choose a template from the available templates designed for the product details page.

woolentor choose template library
Choose template library woolentor

Then click on Import.

WooLentor template library import
WooLentor Template Library Import

Now all you need to do is customize the template according to your requirements.

wooLentor addons customizations option
WooLentor Addons

After making all the necessary customizations, click on Publish button to save the template.

WooLentor customizations option
WooLentor customizations option

Navigate to the Settings page of WooLentor.

WooLentor settings page
WooLentor settings page

Here you will find an option to set a template for the product details page of your store.

woolentor single product details page template
Woolentor settings single product template

You are almost there. In the final step, simply set the newly created template and save the changes.

It will replace the basic WooCommerce product details page with the new design for all of your products globally.

How to create a custom single product page from scratch?

If you don’t want your store to look like thousands of others out there, creating a custom single product page template from scratch is a great idea, considering it’s the only way you can create a completely unique single product page for your online store. Now, let me describe how you can design unique templates for your products.

Create a new template

The first thing you need to do is navigate to the Templates menu and click on Add New.

WooLentor new template create.
New Template Create

A dialog box like the following image will appear right away asking you to select the type of template and give it a name.

woolentor choose template type
Choose template type

Once you have clicked on the “Create Template” button, it will take you to the edit screen of Elementor.

Woolentor template create instruction.
Create template
Select a structure

Before you drag and drop any widgets from the left sidebar to the Elementor canvas, make sure you have added a section and selected a structure you prefer.

Woolentor page layout setting option
Page layout option

Now you can start using any Elementor widgets to build a custom single product template in WooCommerce as per your needs. As I have mentioned earlier in this article, WooLentor offers an ample number of widgets that are specifically crafted to design the WooCommerce product page of your online store.

Now, let me explain what you can accomplish with all the specific widgets of WooLentor. Furthermore, you will learn how you can leverage the functionality of these widgets to have complete control over the single product page of your WooCommerce store.

Customize your product title

You can dynamically display your product title anywhere you want using the WL: Product Title widget. Meaning the product title will change based on the product you are viewing. From the “Style” tab of this widget, you can customize a couple of things like:

  • Set a color for the product title text.
  • Change the font family, size, weight, and all other typography-related properties.
  • Control the margin of the title.
  • Set the alignment to left, center, or right.
woocommerce product title
Product title
Manage your product description

Display your product description on your desired position and get control over the style and layout of your product description with the WL: Product Description widget. It enables you to:

  • Change the color for the description text.
  • Customize all the aspects of typography such as font family, size, weight, and so on.
  • Set an alignment for the description text.
woocommerce product description
Manage product description

A screenshot of the Style tab is required

Tailor the short description of your product

A short description of a product plays an important role when it comes to giving your store visitors a clear idea about your product briefly. Apart from displaying a short description on the single product page template, the WL: Product Short Description widget lets you manage the style and layout. To name a few:

  • Select how you want to align the short description.
  • Customize the font-related settings as per your needs.
  • Choose a custom color from the color picker section to apply on the description text.
woocomerce product short description woolentor
Product short description
Show the product Price

Before purchasing any products, a shopper must know the price. Right? Drag the WL: Product Price widget to display the price of your product. From the style options, you can even change the default appearance of your product price according to your needs. This widget allows you to:

  • Customize the text colors for both current and old prices of your product.
  • Change the typography settings as you prefer.
woolentor woocommerce product price
Product price
Display the user ratings on your product

Ratings are one of the most important aspects of an online store. They help the shoppers in comprehending the experiences of the previous customers with a particular product. According to the statistics, most online shoppers prefer to see the ratings before purchasing any products or services. You can utilize the WL: Product Ratings widget to showcase the product ratings on the details page of a product.

woolentor product ratings widgets
Product rating widget
Showcase the valuable product reviews

Aside from the star ratings of a product, the potential shoppers can easily determine which product to buy or which service to order by reading the feedback of other customers who already purchased a product or service. On top of that, it makes a product trustworthy while increasing the credibility of your brand at the same time. Display the product reviews given by your existing customers by leveraging the WL: Product Reviews widget. This widget also incorporates a form to submit a review for a product.

Woolentor product reviews widgets
Product reviews
Place the Add to Cart button

Show the Add to Cart button in a place where the users will find it convenient. To do so, all you need to do is drag the WL: Add to Cart widget to the Elementor content area. If the button style doesn’t match your brand, there are plenty of options available in the Style settings using which you can tweak the button style to fit your needs. Some of the options are listed below:

  • Set the text color, background color, and border color of the “Add to Cart” button both for normal and hover states.
  • Customize the typography, padding, margin to change the appearance of the button.
  • Choose what type of border you want and set the border radius.
Woolentor add to cart widgets
Add to cart widgets
Include Additional Information about your product

When it comes down to increasing the overall growth of your eCommerce business, displaying additional information about your products is crucial. It also provides your potential customers with the specific information regarding the product attributes they are looking for. When the customers have all the detailed information in one place, they can easily make the buying decision without feeling the need to visit other websites. Not to mention that it will result in more traffic and an increased conversion rate. Take a look at the WL: Product Additional Information widget.

woolentor product additional information widgets
Additional information product widget
Organize your product information into custom tabs

As we already know that how important it is to display full information about products on the WooCommerce product page, we must make sure that all the information is organized properly. To assist you with this, WooLentor comes with a powerful widget named WL: Product Data Tabs that not only enables you to organize all the product information into separate custom tabs but also offers the options to manage the style of these tabs in the way you want.

Woolentor product data tabs
Product data tabs
Showcase your product image

Display the main featured image and thumbnail images of your product dynamically on your custom single product page template using the WL: Product Image widget. This widget provides you with a bunch of customization options to control the styling of your product image and thumbnails.

woolentor product Image widget
Product image widget

Enhance customer experience by adding a video gallery of your product

When shoppers visit your online store, they usually look at the product images and read the description before deciding to purchase. But sometimes these things might not be enough to make the store visitors feel informed and confident. That time they start roaming around the web, looking for videos, especially on YouTube, to see how the product works in real life.

According to the research, the majority of online shoppers prefer watching videos rather than reading the product description. Now wouldn’t it be awesome if you could showcase a video gallery on your eCommerce store? Well, this is where the WL: Product Video Gallery widget comes in handy. With the help of this widget, you can add an attractive video gallery of your product that will certainly attract more customers and drive more sales.

woolentor product video gallery
Product video gallery
Display the stock status of your product

If you want to show your customers the number of your products that are available in stock, you can do so using the WL: Product Stock widget. Apart from displaying the stock status, you can also change the text style of your product’s stock status.

woolentor product stock widgets
Product stock
Show the Meta data of your product

Now you can choose where to display your product’s Meta data on the WooCommerce product details page template using the WL: Product Meta widget. You can even change the appearance of the Meta data as the widget comes with the following styling options:

  • Set the text color for the Meta data of your product.
  • Change the link color for both the normal and hover states.
  • Control the font family, size, weight, style, decoration, etc.
  • Add a margin around the Meta data.
woolentor product meta widget
Product meta
Show related products

Persuading your customers to spend more even after they have already found what they are looking for, is not an easy task. Regardless, showing related products on the WooCommerce single product page is an effective marketing strategy to grab the attention of your potential customers.

Most of the people who prefer shopping online, love to see product recommendations. If you can showcase the related products properly in addition to the product your customers actually intend to purchase, then you are more likely to increase the order value.

Well, you can implement this tactic on your WooCommerce store using the WL: Related Product widget with the following settings:

  • Set how many products you want to display per page.
  • Insert the number of columns you need in a row.
  • Change the order of the related products based on date, title, price, popularity, rating, etc.
  • Display the products either in ascending or descending order.
  • Manage all the essential styles for the section title such as color, typography, alignment and more.
woocomerce related product widget
Related products

Increase your profit by leveraging upsell products

Upselling is an amazing way to grab the attention of your customers by suggesting a bunch of products related to the one they want to buy. The only difference here is that the suggested products are better alternatives to the main product and are more expensive.

Like I have mentioned earlier, online shoppers love getting product suggestions, especially if they are relevant. If you can effectively do upselling and offer your customers a good value that is worth their while, it will surely encourage them to spend extra.

Now if you are wondering how you can apply this strategy, the WooLentor plugin has a specific widget called WL: Product Upsell that allows displaying the upsell products on the WooCommerce product page template. From the widget settings you can do the following:

  • Set the number of columns you want to add per row to display products on each column.
  • Customize the order of the upsell products according to date, title, price, popularity, rating, etc.
  • Select whether you want to showcase the upsell products in ascending order or descending order.
  • Control all the necessary styles for the section title such as color, typography, and margin.
Woolentor Product Upsell
Product upsell

Aside from the widgets stated above, there are a few more extraordinary widgets included in WooLentor and the best part is you’ll get all these widgets for free. Let me explain what else you can add to the single product page of your store.

Provide your customers with an option to contact you

If you are running an online store, you must have researched and analyzed what your competitors are doing to build a good relationship with their potential customers. Right? Because this is the main key to increase the conversion rate while reducing the bounce rate of your store. Well, if you did, then you are more likely to come across an eCommerce store where the product price remains hidden for some of the products.

This is because the store owners want the customers to call them directly to know the price. This way, the customers usually feel more connected while interacting with the store owner. If you want to do the same for some of your products, you can simply use the WL: Call for Price widget to display a button on the product details page using which your potential customers can contact you via a phone call just by clicking on that button from a mobile device.

Woolentor Call for Price widget
Call for Price

Allow your customers to suggest a price for your product

When you are having trouble deciding what price to set for a certain product of yours and looking for some suggestions, you can use the WL: Suggest Price widget to add a button to the single product page. This button will let your store visitors suggest a price for that specific product. Furthermore, it is a fantastic approach to make your store visitors feel important.

Woolentor Suggest Price widget
Suggest Price widget

Display an automatically generated QR code

With the help of WooLentor’s WL: QR Code widget, now you can add a QR code to your product details page template, which will be generated dynamically based on the product your customers are viewing. Customers will be able to add any products to their cart simply by scanning the QR code with their mobile device.

Woolentor QR Code widget
QR Code widget

Now that I have described all the widgets available in the free version of WooLentor that you can utilize to customize the WooCommerce product page of your store, you might be wondering how in the earth a plugin offers so much for free.

Well, I am pretty sure that you would be amazed to know that the WooLentor plugin is being used by more than 60,000 users from all over the world. They are using it to enhance their WooCommerce store so that they can provide a better user experience to their customers. Not to mention, the plugin is well received in the WordPress repository as well.

If you are interested to try the free version, download it from here.

Why should you consider purchasing the pro version of WooLentor?

The free version of WooLentor offers a plethora of powerful widgets and features that should be sufficient for you to design a personalized template for the single product page of your store.

However, there is a premium version of WooLentor available as well. It introduces you to a couple more remarkable widgets and features that will give you even more power to control the WooCommerce product page layouts for all of your products.

Note: In this article, I am only focusing on how WooLentor can assist you when it comes to creating or customizing the single product page of WooCommerce.

So, if you want to take your online store to a whole new level then you should definitely consider the premium version of WooLentor. Unlocking the full potential of the WooLentor plugin will give you access to more customization options along with a handful of fantastic features using which you can design an exquisite online store while offering your customers the best user experience they could possibly imagine.

Now, let me introduce you to all the amazing features offered in WooLentor PRO and describe how you can benefit from those.

Options to design custom product templates both for the entire website and for a specific product

While the free version only allows you to assign a single template to all of your products throughout your store, the premium version enables you to create individual templates for each of your products separately. It is one of the most important features that a store owner will ever need. You are probably wondering why. Well, this way you’ll have the options to design different layouts for your products to see which works best for you. If you can execute this efficiently, you will have a greater chance of surpassing your competitors.

Woolentor specific product edit
Specific product edit
Specific product edit options
Specific product edit options

Integrate social share buttons into your product details page

Adding social sharing options to the single product page of your store is a great way to market your products online that doesn’t require a lot of effort. When your products are shared online, you are more likely to generate more traffic on your store that might lead to more sales.

Well, you can easily add social share buttons with the help of the WL: Social Share widget that lets your customers share your products across different social media platforms.

Woolentor Social Share Widget
Social Share Widget

Customize the style and layout of your related products

Unlike the widget available in the free version, WooLentor PRO offers you a more compelling widget named WL: Related Product layout (Custom) that comprises a lot of options to showcase related products in a more personalized manner. Moreover, all of the options of this widget are organized into various panels. This way you can easily customize the widget elements in the way you like. Let me walk you through all of the advanced settings of this widget, available for each panel.

Layout Settings
  • Set a section title for the related products section.
  • Choose whether you want to display the related products within a grid layout or a slider.
  • Set how many columns you want to add in a row to display products on each column for a desktop device.
  • Control the number of columns for tablet, and mobile devices.
Related Product layout Custom
Related Product layout Custom
Query Settings
  • Limit the number of products to display.Choose whether you want to display the related products within a grid layout or a slider.
  • Order the related products by different parameters such as product ID, date, name, title, and so on.
Woolentor related product query settings
Related product query settings
Content Settings
  • Select a style to showcase the related products on the single product page.Order the related products by different parameters such as product ID, date, name, title, and so on.
  • Options to show/hide several elements from your related products. For example, title, price, category, rating, short description, sale badge, etc.
  • Choose a type for the sale badge.
  • Set a length for the product title.
  • Display a stock progress bar.
  • Show the brand of a product.
Woolentor related product content settings
Related product content settings
Action Button Settings
  • Show/hide all the action buttons within a single option.
  • Options to show/hide a specific action button such as add to cart, quick view, wishlist, and compare buttons.
  • Choose a style for the action buttons from three different styles available.
  • Select in which state (Normal/On Hover) you want to display the action buttons.
  • Control the position of the action buttons.
  • Show a quick add to cart option for a product that has different variations.
Woolentor related product layout action button settings
Related product layout action button settings
Image Settings
  • Select an image size for the product image.
  • Choose a style to showcase the thumbnails.
Woolentor related product image settings
Related product image settings
Offer Price Counter Settings
  • If any of the related products are on sale, you can even display a countdown timer to inform your shoppers when the sale or discount offer will end.
Woolentor offer price counter settings
Offer price counter settings

Aside from all these advanced settings mentioned above, this widget also offers you a bunch of styling options using which you can:

  • Customize the font family, size, weight, and the other aspects of typography for the section heading.
  • Set a color for the heading text.
  • Insert a margin around the section heading as per your needs.
  • Get access to a plethora of customization options that enable you to manage all the necessary styles for the content area, product badge, category, title, price, and even ratings.
  • Control the styling of the action buttons and tooltip.
Woolentor related product section heading
Related product section heading

Get control over the appearance of your upsell products and customize them accordingly

We already know how vital it is to upsell your products in order to boost your average sales. Since you are persuading your customers in purchasing a better alternative by spending extra, you must make sure that upsell products are displayed in a user-friendly manner that looks visually appealing. Using the WL: Upsell Product layout (Custom) widget of WooLentor PRO, you can easily create an attractive layout for showing your upsell products on the product details page of your WooCommerce store. The amazing fact that makes this widget so handy is that it also comes with the same advanced settings as the WL: Related Product layout (Custom) widget.

Woolentor Upsell Product layout Custom
Upsell Product layout
Woolentor upsell product content section heading
Upsell product content section heading

Display your product images in an attractive way

The majority of online shoppers prefer to look at different images of the product they are planning to purchase. That’s why it is crucial that your product images look eye-catching to your potential customers. Leveraging the WL: Advanced Product Image widget, you can literally control how the images of your products will be displayed on the single product page. If the customers find it convenient enough, it will result in more sales. The following options are available to showcase your product images:

  • Select a layout to display the images of your product.
  • Choose a position, where you want to have the thumbnails.
  • Show/hide the sale badge.
  • Show/hide the custom badge.

From the “Style” tab, you’ll get a variety of options to alter the appearance for each element of this widget, such as the product image, badge, and thumbnail images.

Woolentor advanced Product Image widget
Advanced Product Image widget

Add a zooming effect to your product image

Buyers may wish to zoom in on the product photos in order to have a better look at every detail of a product before purchasing it. In these situations, the WL: Advanced Product Thumbnails with Zoom widget comes in handy. It gives you the ability to add a zooming effect to your product images.

Advanced Product Thumbnails with Zoom widget
Product image with zoom

Give your customers a clear idea about the stock condition

The pro version of WooLentor features an excellent widget named WL: Stock Progress Bar, which can be utilized to integrate an engaging stock progress bar into the single product page of your online store. It allows you to display the number of products that have already been ordered and the remaining amount of products in stock in a horizontal progress bar.

To take the advantage of this widget, first of all, search for it in the Elementor widget panel. Once you’ve found the widget, simply drag the widget and drop it wherever you want on your WooCommerce product page template.

In the “Style” tab of this widget, you can even control the style of the progress bar including the label texts. To name a few, you can:

  • Set a height and a background color for the progress bar.
  • Pick a background color to show the progress of the ordered products.
  • Control all the font-related settings and colors for both the label and counter texts.
Woolentor Stock Progress Bar
Stock Progress Bar

Boost your online sales by incorporating a scheduled sales countdown timer

In this modern era of technology, almost everyone seems to be in a rush. Don’t you think? Even the website visitors skim across a webpage rather than read the actual content. Thus, it makes the eCommerce business more competitive. So, if you want your online store to stand out, you must need a potential feature on your store.

Well, to keep you ahead of your competition, the premium version of WooLentor comes with another advanced widget called WL: Product Sale Schedule. This widget enables you to add a countdown timer to the single product page using which you can create a sense of urgency that encourages shoppers to make buying decisions quickly.

Woolentor Product Sale Schedule
Product Sale Schedule

If you can set a countdown timer effectively for each of your products that are on sale, it will surely convert a large number of your store visitors into potential buyers.

Conclusion

So, that was the in-depth review about the single product page builder of WooLentor plugin and how you can utilize most of this plugin to customize the WooCommerce single product page.

From now on, you don’t have to rely on the basic WooCommerce single product page design anymore. With the help of WooLentor, you will be able to create stunning layouts for the WooCommerce product page without having to write a single line of code. The only thing you should consider while designing a custom template is if it is user-friendly and intuitive enough for your store visitors.

All the impeccable features and widgets available for WooCommerce product page customization, take the WooLentor plugin to a whole new level. If you want to design a top-notch WooCommerce store that looks completely unique, WooLentor is highly recommended. When online shoppers visit your store, they are more likely to be drawn in as they will instantly notice that your store is quite unique when compared to thousands of other stores out there. As a result, you will have a greater chance of making sales than ever before.

Hope you understand how WooLentor works as a WooCommerce single product page customizer. If you have any questions or suggestions, feel free to let us know in the comments below.

THERE’S MORE TO READ.

WooLentor Turns 4! Let’s celebrate with these Fantastic Deals!

Have you been searching the internet for the best WooCommerce Single Product Page Builder for...

Arrow Images Arrow Images