How to Create an Elementor Single Product Page

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.

ZkrZcT4h5jTbcOSM17Vwits3xzzUEfpHPElN KxuZEq9cMIXZY7Kl4fHgiEk sq6j5lwaPkrIaNRCc7oOltG4axkT2 Llepa9m7ERG3ZHGOaegqR0hlokY8q6wCmcuSFMnmuYGTM6GlRi4fLEFp P303ne2Y1jk9wYHtpGvEprz1TPRWhZFi3TFF6mvlA

wnbx lDNe59 Vbese8yQIl6 GVIqv6wumoF0Sle4qY796FYHmr4dTkeM6b cSYLLdR6fZeJC B7EENaQz Zn 41h0Z

Elementor single product page

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.

Elementor single product page

When your Theme Builder opens up, go to the Single Product option on the left menu and click Add New in the right corner.

Elementor single product page

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.

Elementor single product page

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

Elementor single product page
Elementor single product page

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. 

Elementor single product page

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. 

Elementor single product page

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.

Elementor single product page

#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.

Elementor single product page

#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.

Elementor single product page

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.

Elementor single product page

#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.

3dtssAUY GD9MApiXBHai1c0VYLRQ31zJzKV2wJJHbn14nK0VuIRokmZY3wH9YdZKvZgQjlxLbla8ZCPHMnwSp9Dv6jUj2fqYcvY8 ICEPUzihqZv5RCEiMYHvWpOBxCEHzLI8rJOFHXi8SZ7ieE5FPmc4VnYp UzuUYRe466IrOAtr4KvNDygrFAkb5iA

#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.

Elementor single product page

 #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.

Elementor single product page

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).

Omm1fhyAEV9k06z4HzSqfx imA3o8MpyPGbmr7Ju8ZDo2Qn3Q2m sucetsdYFZCONSwa41jhwYmqqGVpX6DhyfTFNKpsot3vKpUOwNRt1FfB6yMzk1V WUVAl pTDmj5fJ T2LUhZZhebK TMuvFEhK 7GQYBBkLEL9Fi2JU RV vUYmGg3TaT7jwi91pg

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.

#6. Add to cart button

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.

Elementor single product page

#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.

Elementor single product page

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.

Elementor single product page

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.

jXyoLKeu mS2Z5nP1qa pUQ5qWoplYpt5CiXFl08Ha XSFlwsBd2wrFIfWZ imKJmmskZoXe3Ivp K8Od uF0xkSBFla1 Y5GpiPiXxMW7mJLVMMvaNHnN12l2QSdWgQrUoEgCHcNGcZtiRisFeF9P 0j1dDIooYcBbBa8cRW3fW OuId0EsG4AkXnAzOQ

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.

wtEq7p9Cg7GjMKIluAvdxnQZJ JUPKC73bLPX4IIFNrgSfAhkokfpDMPee8gQV0naFFXMwztVax6hs6kN13UmrVjHBjGsLz08M6tP R8tDkd0lHY rhmQLTn2BHOUkeDKt7vdye1 3GsDfbVG52yLoEv

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.

eP rwbwOW8FkowGIDzhZhIg6Taa7i97eNpF3UayhORC660ndHdyH7wDU Eht7ziHamSXg6Zn2B6ypm0TUea44bwHjT1hSu9aRuh vUDTKew6zLd9OJyzNv26cS0H7xHBz9ORFBWHVg iEE9APTBNLly2jfLRVPqmSVCJ9qtKEtEhySoHgnCngMkNVslWXQ

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.

E 8ZCzclZD f Qqym5DS LQrihlAY w7fKT33EQB7btQWVmzYWKO9f UHLebBVIFSTmWQgidit0kEUtizdsY4vuV0qV4UAr1x1zXxXCbEKvumnD9AQLZW9u1nAorY9QcLB9xxhSYjVDcSnkm6gx2QZlmYO5Mqkn arjBq9c2jP1esEzDmQh9EG 12d0EUQ

#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.

ymzRjGu 1B x9MBhC2GKVQQDwP3ktJrbaWmPyeNiqeDMd4TQNiLc 9OS6TH7TxVyeQ5VPqlViar Cc0 k9njXwN xfOM3rG2Ri1K x9871zfsHwb1XsBgeJ4Ynpt2shjt4a1zhEbp7Ot926t02Gm bn djrIKwx khsKg noigK9K TGpQB fr a3UiVQ
m7FzYqXJQuT7qPam1Kf0LI PVAfICgfXUIjUT10tWmTxTnpb3H6K9UKq7Vx y E gIOI2wzcPntAkj5XccKuLEE4Cn9yzj2Nz7lUx8AnVPFtQWWH4fLN7jhs0P5vNClITaOYP4lC

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. 

Eqf1fGMNlBPjo7sLgAcDfzvLKdziATNlU4en1hYxgPXxybAxKMcd5LIEHsL8Rx4f8lomQpAlSmzm mOZsnb1fA7DgLK1IKUWVJj8S

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.

6PNtv0AsqTMlEtb4ffIIm835oJ0lOygxImiTcXspRdpVmeFofbQeZA2HMu9Yy6qsif6Bv1bq4gK894URVy5dkaoKzB9t9dt QVTdn6rBWDTdlWYF8Rn3i7Y6eufEg yMz

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.

dRpiugBri0rWBvjqUY5ly8ygCJeZtWUuPkHaLdH3GNTqvftqzt1FFBjqvrJIQvTqnd0q5WuDtHDuIXcBfojPUw Pw1DbUGiS1xiu7PDVRjtUvzj W dxUy7gnp jKJcxTPfE weuEXu8aviF8ROZQ2K 2 gZUHAshQY8j YQ99IWU2VOyYE5BDWvmeBrFg

Go to the Preview and open up the product you’ve been working on to make sure everything is displaying as it should.

FH89B0W1x8jaDzQSMpnuK0Tm4PS5c ypXnAT8kyUQbDmgt2u5qF2XShmRFdPcQK5BSftcDFBqLrNGthzWUue2Nd2bF aEAsbrJzWkmWs4rZFK2hfYKv6sAGoRsN R8zidOd38Oj2BjyZeEmWhWu7Z2hPg4r0vPWi uk3jIVHy4VvRQzdCuwt 7ZAWtTFHQ

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.

J5w 8gFuqBdQK5z0Z lw93M7Q6bDrP F0vm5 djqJg 3guN9ZELlIYinoctUsbLltTnHviPokY6MtVcnt0 N9dIF3XtgbfgqIr0GU5Dgpqa0nlqCAy Ns0Q9VxKizY 8nxfNV7oOgZiMnWm5jzKTiAIzBnHk9tUd3iNtnw1JGsfDCon39qCXBP pczfgeg
VtFretjax2eD1iutp4X9rXOC2XlWxpEyRBM4b6lxD0Es9aQGWN1yCbMesBUJ0qrchTDAXAlar0RVJbOoz CwlAiX P4GflZOqgnEnigPy20ldfDFTC2qVVV1F7C8qvBCazRmt8BXLg9sA2xBzTFFPyOGrx 0zHnjAXocK7JIv lt4PiwM VPfdzwZUSmJA

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.

3SwccRcI HxXUKQGqmDC62 OJMLTzy3k6pnx x0qyEbFzE3cw1b9341exNuWVOrAl EZ4nlHO4Y1gmJiuM6hWgklxGZvXBOZHdy FH

Remember to save your changes when you are done.

Vo YK0S0dgaVLl RpxhaA4lX3PUsv HGCY JKnSqTmkW9DLKPA2RRYMQ0IUl8lOJc6pI0hAxikYnAHL061EQr2DGzXzh zgvHtlX5FgQRtO0rLp1qfcROa71T XDjxGyaKGY2znknjRdz25OIIX1LojTCxUMXItUonh5Jg8o4IXeWhq8jZ07HwuEW1R Lw

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

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

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users