How to Customize Your WooCommerce Product Page Template Visually

Learn how to visually customize your WooCommerce product page templates using Elementor.

Do you want to customize your WooCommerce product pages?

You’re in luck!

Elementor makes it that much easier to visually drag & drop different elements of your product pages, customizing the design however way you like.

In the past, these sort of WooCommerce design tutorials involved dozens of lines of code. 

Luckily, those days are over – thanks to Elementor WooCommerce Builder.

Now, you get full control over your product page design and layout with the power of Elementor Pro. No need to incorporate actions or hooks, or delve into the various PHP files. Every design customization is done right from the Elementor editor.

WooCommerce Product Template

The basic WooCommerce product page looks like this:

Default WC Product Page

With Elementor, you can play around with the layout of the product page template however you like. In this guide, you will learn to create this product page design:

WooCommerce Products as Custom Post Types

Because you’ll be using Elementor’s single product template, once you finish creating the template you’ll be able to apply it across your products, as well as for specific categories or other conditions.

Initial Setup

In this tutorial, the focus is on customizing the product page, so we’ll skip the basic WooCommerce setup and adding of product. Kinsta has a great tutorial on the matter, if you need help with that.

After the setup, you should have WooCommerce installed, and a few products added to your site.

You should also have Elementor & Elementor Pro installed, in order to get the visual design capabilities.

Note! If you don’t have WooCommerce activated, you will not be able to access Elementor’s product templates.

Step 1: Create the Single Product Template

Create Product Page Template

To start designing the single product template in Elementor, we will follow a similar procedure as creating the regular single template.

Step 2: Choose a Pre-Designed Product Page Template, or build one from scratch

Product Page Examples

The easiest way to get started is to use one of the pre-designed product page templates, and customize it to fit your site. There are several different styles of product pages to choose from.

Before you start adding widgets, you can make sure you are working on a full width product page, by switching to a full-width template (learn how to do that here).

Using Elementor, you have total customization control over the layout and style of the product page.

The other option is to build it from scratch. In the editing panel, you can see the special widgets for the product.

Step 3: Add the Product Widgets that will make up your page

WooCommerce Product Page Diagram

Now, it’s time to build the elements that will make up your product page. For the full list of product widgets, head over to our documentation on the subject. For this tutorial, you will use the following widgets:

  • Product Title widget
  • Woo Breadcrumbs widget
  • Product image widget
  • Product rating widget
  • Short description widget
  • Product price widget
  • Add to cart widget
  • Product meta widget
  • Product data tabs
  • Product related 
  • Upsells widget
As you can see in the video, you have complete freedom to play around with the layout and move elements around.
You can use any other widget to make your product page more effective and engaging. Share buttons, call to action widgets, featured image… Even custom fields can be added to the template using the dynamic content feature.

Step 4: Preview the Product Page With Another Product

WooCommerce Products as Custom Post Types

To make sure your product template has the right design, it is advised that you preview it with several different products.

Click on the eye icon on the bottom left panel, then settings. Under Preview Settings, choose the product you want to display. Now, apply and review to see how it looks like.

Step 5: Set the Conditions

Display Conditions

This is the stage in which you set the conditions that determine where your product template will appear.  By default, the template will affect all the product pages on your site. You can also select a specific category of products.

Click on Publish – and your single product is live!

Bonus: Customize Your Product Archive Page

WooCommerce Product Page Template

To complete the task, design a catalog page of products that will affect all the products on the site or by a category. So first, go back to Elementor > My Templates, and create a product archive templates.

Then, select and existing template, or create one.

Add the Archive Products widget and the Archive Title, and customize their design.

In order to adapt it to the design you already did on your single product template, use the copy style functionality that works between pages. Go back to the product page, and right-click Copy. Back in the archive product, right-click Paste Style.

In the Archive Products settings, Under Query > Sources, choose Latest Products. Then under Product Category, choose rings. This way, only the ring category will appear.

Slide on Pagination if you have a long list of products for the category.

In the style tab, you can design the distance between the columns and the rows. Adjust the colors, fonts and more.

Before publishing, choose the conditions to determine where the archive will appear, same as you did for the single product template.

Hit publish, and your archive page is live.

Create Imaginative WordPress Product Pages Using the Power of #Elementor


Elementor’s WooCommerce Builder gives you the design flexibility to create and fine-tune your product pages visually. This saves you time, and considerably reduces the time it takes to go from an idea you have, to a live and fully-functional online store. 

You will discover many other free WooCommerce product page templates in Envato Elements, offering over 2,000 different templates, many of which are related to Ecommerce sites.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 1,365,209 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


70 Responses

  1. Any chance you’ll add more flexible variation selectors? Botton, swatches, etc… That drop down menu is a little clunky. Love your work!

      1. +1 +1+1 , There is a big problem with this. It is very frustrating that you cannot touch the design of the variations and have to use third-party plugins. There is still a way, to be able to make a custom Woocommerce design. I understand that it can be a hard task, but if you say you can redesign Woocommerce, then do it 100%. Checkout, etc … I encourage Elementor team !!

    1. Another +1 on this from me.

      Customising variations and buttons is a common request from clients. Hate having to do custom templates and adding extra plugins.

      Would love it all to be within Elementor Pro… Is there anything on GitHub about this issue/enhancement?

  2. I would love to see more flexibility in the archive listings. If you want to move archive elements around, add custom fields to each product displayed, display products as a list, or really anything else you have to use a 3rd party add-on.

    Right now I have to use JetWooBuilder for Elementor to customize the archive display. It works really well but something like that built-in to Elementor pro would be great.

  3. So strange to me that there is no main description widget – it has to be clunked in with the tab thing! Would be great to have the option to use each section by itself; that would be fully customisable then!

  4. Hello, it would be really helpful to be able to project multiple product images for a single product vertically on the left next to the main image, instead of horizontally under the main image only. Any feedback if this is planned any time soon?


    1. You can achieve this with some custom css for the time being:

      selector img {
      width: 100%;
      .woocommerce-product-gallery__trigger {
      display: none;

      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      list-style: none;
      .flex-control-thumbs li>img {
      width: 500px !important;
      border-style: solid;
      border-width: 1px;
      border-color: #f3f3f3;

      .flex-control-thumbs li:nth-child(1) {
      margin-right: 18px;

      img.flex-active {
      border-style: solid;
      border-width: 1px;
      border-color: #7a7a7a !important;

      Obviously remove the borders and colors to match that of your liking. But this should align it better 🙂

  5. Hi,

    Is it possible to have two Archive products templates applied to different pages? I´ve tried each and every combination of conditions, but it only works well on the shop page. If I try to display any archive product i.e at the Home page it shows only the “Nothing found message” and no item.
    And the widget Archive product description shows no content.

    Any idea? I´m using Elementor pro + Woocommerce + Generate Press Premium

  6. Is it possible to duplicate a single page template? I was only able to duplicate the template as a page template not as a single page template.

  7. This is awesome! However, I really need the ability to choose size and/or color attributes when I order. Is this possible? Please help.

  8. Hi, when I try to add new template, it only shows 2 options: Page or Section. How do I get the option for ‘Single Product’ like your video shows?

  9. Have same issue with Rock Man, Elementor Pro 4.2.5. Adding Product Archive, there is no Query under Content tab, only can see Advanced.

    How to fix this?

  10. Hello,

    Product description comes up when adding product tabs but additional info doesn’t.

    We’d like to add a ‘contents’ section, explaining what they recieve with a purchase.

    How would we add an additonal info section?


  11. Hi,

    the display conditions in only certain categories are not working for a single product template. How can I make different single product templates for different product categories?

  12. Any options to allow a hero section of the top of the page set to full width without the need to use the stretch feature? I have the section set to full width and this works on the back-end builder, but when you view it on the front end it still appears boxed above the woo product archives.

  13. great but the issue is that the template is for all the products or categories BUT if i want to keep the template for a product and add a video or a other widget only for one product I CAN’T cause the only option i got is to save all the template who will apply to all template condition. Ther’es no way to add a specific area for a specific product and it’s a huge mess
    If you got a way to solve thet

    1. If I get you right, you are trying to set a video for a specific product. This is not a problem. Simply set the condition to exclude that product and designate a different template for it.

  14. how can i insert the variation selector for a product? i’m not using the “insert to cart” option,

  15. In this article, you say “In the Archive Products settings, Under Query > Sources, choose Latest Products. Then under Product Category, choose rings. This way, only the ring category will appear.” I’m trying to do this to my Archive Products so that I can build multiple pages in my store, but I do not have the Query > Sources or Product Category options in my settings. Note, I am using Elementor Pro and it is up to date. What am I missing here?

  16. hey! thanks for the tutorial,

    however i am unable to find the “my templates ” tab within the elementor tab of the dashboard.

    i am running the latest version of elementor pro (updated today 05-14-19)

    thanks for you help!

  17. Hi, I’m using Pro and when following this tutorial, how come there aren’t any options for thumbnails at the bottom of the main product image (so when the customers click on the thumbnail, the main product image switches – including the ability to still zoom in?). Thanks!!!

  18. I use the astra theme and elementor pro and woocommerce. Everything works fine.
    The only thing that dont work is the pruduct rating widget. it is not displayed on the published site.

    is there a workaround?


  19. Hello, the functionalities shown in the tutorial are really awesome, I just want to know that is this pro version properties or can we do all these things in free version also? and also can you please tell me from where I can see free version attributes? thanks

  20. Hello,
    Is it possible to custom product page only for specific product category.
    e.g I have three product category cat-1 cat-2 ,cat-3.
    But I only want to custom page design for cat-3. How it possible? I did few conditional but could not achieve..

  21. I don’t have the my templates button. Forst I thought because I don’t have the premium. I paid and reinstall and still Idon’t have it. So how can I follow up with this tutorial ?

  22. Can you do a single product page with variations yet? (i.e. light, medium, dark).

    It looks like people have been asking for it since 2018? I really want to switch to Pro for the single product page builder but I have no use for it if it’s a single variation of a product.


Leave a Reply

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

Want to learn how to build better websites?

Join 1,365,209 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.