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

Conclusion

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.

Liked This Article?

We have a lot more where that came from! Join 760,658 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

52 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!

  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?

    Reply

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

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

      .flex-control-thumbs{
      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?

    Thanks

  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?

    Thanks
    Luis

Leave a Reply

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

Want to learn how to build better websites?

Join 760,658 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.