How to Create a WooCommerce Single Product Page via Elementor 2023

From Easy Digital Downloads to Cart66 Cloud and WP eCommerce, the list of e-commerce plugins is long, but none is as powerful as WooCommerce.

Combine WooCommerce with the functionality of Elementor, and you will have a high-performing online store.

You don’t have to worry about not being tech-savvy. Elementor is one of the easiest page builders in the market. It has a drag-and-drop capability that makes it beginner-friendly.

Adding products to your store using WooCommerce is an absolute breeze as well. But we will not dwell on that.

We have numerous WooCommerce tutorials that can guide you through all you need to know about WooCommerce, including how to create coupons and manage your orders.

Elementor also comes with lots of beautiful pre-made templates that will make your work easier and quicker. All you have to do is choose one that meets your needs and matches your website, as we will show you in this tutorial.

Here’s a quick index to help you navigate this article:

Create a WooCommerce Single Product Page via Elementor
Upload Some Products on WooCommerce
Insert an Elementor Template
Publish the Elementor Template
Conclusion

Let’s dive in

Create a WooCommerce Single Product Page via Elementor

We will create a stunning WooCommerce single product page via Elementor with a few simple steps. To get started with us, you will need a WooCommerce theme. You can use a free or premium theme, whatever you like.

If you need a guide to choosing the best WooCommerce theme, you can read an article on our website to help you select a multipurpose WooCommerce theme. We have curated some excellent WooCommerce themes here.

We will use Elementor to create a single product page. For that reason, you have to install the Elmentor free and Elementor Pro page builder as well.

To get a step by step guide to installing a WordPress plugin, read this article. If you are new to Elementor, don’t forget to check these two articles also:

We will complete the full process following three easy steps to creating a single product page with Elementor. These steps are:

Upload some products in WooCommerce.
Insert an Elementor single product page template.
Publish the Elementor template

1. Upload Some Products on WooCommerce

First, you need to upload some products manually. To upload products to your WooCommerce store, first, log in to your WordPress dashboard.

After that, go to products > Add New. In this location, upload some products. Next, configure the product’s data, such as product images, product categories, product tags, and more.

If you are not sure how to do that, just check out our step by step guide on how to upload products in WooCommerce.

2. Insert an Elementor Template

In this section, we will insert an Elementor single product page template. After uploading a single product page template, you can also redesign the template.

To insert an Elementor template, go to Templates > Saved Templates > Add New. After clicking the ‘Add New’ button, a new popup will appear in front of you.

From the first box, select ‘Single Product.’ You’ll select this one because we will be creating a single product page template.

Now give your template a name. You can also skip this box if you want because it is optional.

Finally, click on the ‘Create Template’ button.

This will present the Elementor template library on the screen. Now it’s time to choose a stunning template for the single product page of your WooCommerce store.

choose a single product block from elementor

To choose a single product page template, you have to select ‘Single Product’ from the search box. After selecting this, you can see a few single product page templates. Now insert a template that meets your requirements.

Here is our template that we have chosen for our store. Let’s become familiar with all of the elements, one by one, of the single product page template.

Let’s take a closer look at each widget type:

Menu Cart		It is a particular widget of Elementor. You can view your ‘Cart’ page via this icon from any page without leaving the current page. Elementor opens the cart page in a new tab of your browser
Breadcrumbs		The Breadcrumbs widget helps you to navigate to your current location.
Product Title		Product title is your product’s name.
Meta Data		Metadata shows the product category and product tag.
Product Rating		When customers give star ratings for products, the scores will be shown here. It increases customers’ credibility.
Product Short Description		It shows a summary of a product’s detailed description.
Product Image		Product image displays the image or gallery of a product.
Product Price		This widget sets your product price.
Product Stock		You can see from here how much of a product is available in your store.
Add To Cart Button		Using this widget icon, you can add a product to your cart.
Product Tab		This widget displays a total of three types of information. (Full Product description, additional info, and customers’ reviews)
Related Product		This Elementor widget displays the related products from your store.
Upsells		Using this widget, you can show some specific products that are very close to a single product.
Additional Information		Additional information refers to a product’s dimensions, weight, colour, and more.

3. Publish the Elementor Template

Lastly, we are going to publish our Elementor template. Head over to the bottom-left corner and click on the ‘Publish’ button.

It will create a popup to add some conditions for the template.

First, click on the ‘Add Condition’ button.
Choose ‘Product’ from the middle bar to display this template to all products.
Last, click on the ‘Save & Close’ button.

Congratulations! You have successfully created a single product page template with Elementor for your WooCommerce store.

Conclusion: How to Create a WooCommerce Single Product Page via Elementor?

If you were considering hiring a tech expert to help you create a WooCommerce single product page through Elementor, we just saved you some bucks.

Follow this step by step tutorial, and you will create a beautiful and professional single product page in no time.

You can choose one of the ready-made templates from Elementor’s template library.

With the understanding of what each widget part means, you can redesign and edit the template to meet your store’s needs and make your product page more understandable to your customers.

A well-designed product page will attract customers and make your website user-friendly.
If you have any questions, we are always ready to help. Reach out to us.

Read More Elementor Tutorials:

How to Create a WooCommerce Single Product Page via Elementor 2023 (Step by Step)