In this tutorial, I’m going to show you how to create an Elementor single product page template using Elementor. This article is part of my Elementor + WooCommerce series where I show you how to create an eCommerce shop using Elementor and WooCommerce.
In brief, I’ll show you how you can customize your single product page using the Elementor WooCommerce widgets listed below:
- A breadcrumb
- Product image
- Product Title
- Product meta
- Product price
- Stock Quantity
- Add to cart button
- Product Summary
- An image slider for the product
- A product description and related products section
What you’ll need
For this tutorial, you need to have the free version of Elementor installed alongside Elementor Pro.
Ps: Please note that we’ll be using Elementor Flexbox Container instead of the Elementor sections and columns.
Pss: Below is a step-by-step video you can follow along with.
Video: Create an Elementor Single Product Page
Activate Flexbox Container
To activate the Flexbox container go to your dashboard go to Elementor > Settings, then go to Experiments and look for Flexbox Container, activate it then save your changes.
Creating a Single Product Page with Flexbox Container
To create a single product template, you need to create a skin so that every product you add to your WooCommerce website adopts that skin, instead of creating a product page for every single product added to the website, especially if you have a large volume of products on your website.
To do this:
Go to Elementor > Templates and click on Theme Builder.
Remember, to access the Elementor Theme Builder you should have Elementor Pro or Elementor Cloud.
Theme builder enables you to create headers, footers, single product templates, etc.
When your Theme Builder opens up, go to the Single Product option on the left menu and click Add New in the right corner.
If any popup shows up, close it then click (+) to create a new container.
Then in the Edit Container section on the left side, under Layout, go to Items > Direction and select horizontal.
Select the container and in the Edit Container section on the left, go to Style > Background Overlay, under Background Type click to select an image then choose an image from your Library
Under Position select Custom and add 87vw on X Position, select No repeat under Repeat, under Size add 200px on Width, and on Opacity add 0.1.
Selecting the container again, go to the Widgets area on the left and search for Container to add a new container inside the first one.
Drag the container widget to the first container.
Click the icon in the left upper corner of the new container to duplicate it so that you have two containers inside the first one.
#1. Breadcrumb
Back in the Widgets area on the left side, drag the WooCommerce Breadcrumbs widget to the first inner container, and right below it, you’re going to add the Product Image widget.
#2. Product image
For the Product Image, we want it to only show the featured image of the product instead of all images in the gallery, then below it will be a slider showing all the other images.
So in your Widgets area search, search for the Image Widget and drag it below the breadcrumb.
With the widget selected, go to the Edit Image section on the left, under Choose Image, go to the Dynamic Tags option at the corner then select the WooCommerce Product Image.
#3. Product title
Back in the Widgets area, search for the Heading widget and drag it to the second inner container.
In the Edit Heading area on the left, go to Content > Title click the Dynamic Tags icon the select Product Title. Under HTML Tag, select H2.
#4. Product meta
Next, search for the Product Meta widget and place it below the product title. In the Edit Product Meta area on the right, go to Style > View and select Inline, turn the Divider option on and set the Colour to Main.
#5. Product price and product stock
When you’re done with that, go ahead and search for the Product Price widget then place it below the product meta.
Place the Product Stock widget right below that.
Note that we want the product stock and product price widgets to be in the horizontal direction or be on the same line.
However, using the inline auto position under Layout would not give us that result.
So here’s how we solve that:
Go to the widgets area and add a Container, under Direction set it to horizontal then drag the product stock and product price widgets to the container.
This will place the horizontally (on the same line).
Select the Product price widget and under Edit Product Price > Style, give it the Main colour and Typography Title/Head.
Select the Product Stock widget and under Edit Product Stock > Advanced > Margins, unlink the margins then add -20px under Bottom. This will align the two widgets on the same axis.
With that done, go back to the Widgets area and search for the Custom Add to Cart widget, place it below the Product stock and Product price widgets.
In the Edit Custom Add to Cart section on the left, go to Content > Product and set Quantity to 1.
Under the Button option, set the Type to Default, leave the Text as Add to cart, and set Icon Position to Before
On the Icon option, go to the Icon Library and search for the Plus (➕) icon and insert it.
Under the Layout option, set it to Inline.
Still under Edit Custom Add to cart, go to Style > Border Radius > Normal and set all sides or values to 0 (zero).
On Hover, go to the border colour and make it transparent.
Another important bit we need to do is stretch the Add to cart button. However, you’ll notice that if we try to do it under Advanced > Align self, it simply doesn’t work.
So to fix this, select the Add to cart widget and go to Style > Padding, unlink the values then add 150px on the Right and Left, and 15px on the Top and Bottom.
#7. Product summary/short description
Add the Short Description widget below the Add to cart, which should automatically display the description of the added product.
Select the second inner container and go to the Edit Container section, under Advanced > Layout, under Padding; 80 px on Top and 20px on the Bottom option.
By default, Elementor adds 20px between elements, in this case, the containers.
But in this case, we don’t want any gap between our containers, so under Layout > Items > Gap between elements, set it to 0px.
With that done, go back to your Widgets area and add a new container below the one above.
In the Edit Container section, under Layout > Items, set the Direction to Vertical, then under Advanced, make sure you remove all the Paddings.
#8. Image carousel/slider
Inside this container, add the Image Carousel widget.
In the Edit Carousel section on the left, under Content select Full for the Image Size, under Slides to show add 2, leave Slides to scroll on Default and under Navigation select Arrows.
On the Link option select Media File, then on Lightbox select Default. Under Additional Options, everything should remain on default.
Under Style and Advanced, leave everything on default as well.
#9. Product description
Our next step is adding a product description to our page.
To do this we need another container, go back to your Widgets area, and add a new container below the carousel.
In the Edit Container section, under Layout > Items, set the Direction to Vertical.
Inside the new container, add a Divider widget, then in the Edit Divider section on the left, set the Style to Solid, and under Add Element select Text. under Text add “Product Description” and make it HTML Tag H2.
Under Style > Divider, make sure the Color is black, the Weight is 1 px, and Gap 15px.
Under Text, make it Color black with Typography of Title/Head, and then Position it to the left.
Back in the widgets area, drag the Product Data Tabs widget to just below the product description.
Go to the Edit Product Data Tabs section and under Style > Normal, add Background colour Secondary and Typography Body text.
On the Active tab, the Text colour should be Secondary, the Background colour white, and the Typography Body text.
Go to the Panel option, add Text colour black, Typography Body text.
Then on the Heading option select Title/Head for Typography.
#10. Related products
After adding the product description, we now need a new container that is going to display the related products.
To do this, duplicate the product description container by clicking on the six dots and selecting Duplicate.
Select the Divider widget and under Content change the Text to “Related Products”.
Delete the Product Data Tabs widget; select it then click the pencil (✎) icon in the upper right corner and select the Delete option.
Back in your widgets area, search for the Related Products widget and add it to the container.
In the Edit Related Products on the left, under Content add 3 products per page and 3 columns.
Under Style, scroll down to the Heading option and select Hide the Heading.
When you’re done, click the Publish button at the bottom. In the Publish settings click Add Condition, select Include all Products then click Save & Close.
Go to the Preview and open up the product you’ve been working on to make sure everything is displaying as it should.
Note that related products will only show if that particular product you’re previewing actually has other related products.
Back in your Elementor editor, select the Header, and in the Edit Header section on the left, go to Style and set the Background colour to white, and when you’re done click the Update button at the bottom.
Elementor single product page responsive settings
To make sure your single product page template is responsive on all devices, click on the Edit Single Product option, then check how everything looks on the tablet and mobile devices, and add additional breakpoints where necessary.
To add breakpoints, go to the Settings (⚙) icon in the upper right corner then on the Active Breakpoints option you can add additional breakpoints for example under Extra mobile, Extra tablet, etc.
Remember to save your changes when you are done.
When you’re done with everything, update, and preview.
In closing
That’s how you can use Elementor a create a single product page template for your website. You may as well be interested In the next article where I show you how to create a products archive template using Elementor.
For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.
