Elementor WooCommerce Builder: the Best Way to Build eCommerce Websites

Elementor introduces WooCommerce Builder - a new streamlined way to build online stores visually and more efficiently.

If you’ve ever tried to build WooCommerce stores, you know just how complicated it is to customize the layout of these types of websites. 

Now, for the first time, we are proud to introduce our own solution for building online shops in WordPress using Elementor. 

Important Update: If you want a quick guide to get you started with Elementor & WooCommerce, check out this detailed video tutorial.

Old Way VS Elementor Way

In the past, web designers had two ways of creating a custom-designed WooCommerce store:

Coding Theme PHP files. Doing this for WC is way more complicated than WordPress theme customization, given the much more complex structure of WC templates.

Coding WooCommerce’s hooks. This was done through adding elements before or after the relevant hooks, an extremely limited process, also prone to bugs and conflicts.

Both ways were costly, time consuming, and involved coordinating between complex developer and designer tasks.

Introducing WooCommerce Builder.

With Elementor WooCommerce Builder, you reach a pixel perfect custom-designed store, but skip over the hand-coding parts. This new streamlined and visual process will take out most of the hassle that professionals face when building store on WordPress. Designers will complete eCommerce projects faster and deliver a much more stable and flexible store.

Introducing WooCommerce Builder. Reach the same custom-designed store, but skip over the hand-coding parts.

The first version of WC builder deals with the most fundamental areas of WC:

  • Single Product Template – For creating the perfect product pages that get more sales.
  • Product Archive Template – For optimizing the look and feel of pages that showcase your products.

In the future, we will expand the WC builder to cover every area of the online shop.

Single Product TEMPLATE

Beautify Your Product Pages

You can finally control the look and feel of all the elements that make up your product page.

Play around with their layout and get them to look just right. The right product page design can make a huge difference in terms of convincing your visitors to follow through with their purchase.


PRODUCT Archive Template

Create a Stunning Product Showcase

Using the Product Archive widget, you can choose which products are displayed in the list, and customize their appearance.

From the number of columns to color and typography settings, these settings allow you to reach a wide range of product storefronts.

Besides product archives, you will also be able to customize your product search result pages, so your clients visitors can find the exact product they are looking for.

Meet Your shop helpers

New WooCommerce Widgets

You’ll have many new widgets at your disposal, including Product Title, Gallery, Images, Price, Rating, Short Description, Breadcrumbs, Data Tabs, Stock, Related, Upsell, Add to Cart, Meta, Content, and Additional Information.

Another widget we added is the menu cart, which lets you easily add the cart button to your header and customize it however you like. When your visitors click on this button, their menu will pop onto view, revealing the list of items they plan to purchase.

shiny New Templates

7 Product and Product Archive Blocks

We prepared several product and product archive blocks, to help you get started. Inserting these blocks and examining their settings and style is also one of the best ways to learn how to properly design dynamic WooCommerce templates on your own.

This is just the first step...

WooCommerce Design Made Easy

Now’s the time to go over your current product pages and product archive pages, and customize it however you like using Elementor’s WooCommerce Builder. 

Style your store to better fit your brand, add social share buttons or call to action boxes, rearrange the current layout, make your store more mobile responsive. The list of possibilities goes on and on, you just have to try it.

Ready to tap into the new world of WordPress eCommerce store design? Get Elementor Pro, and enjoy the ultimate store building experience.

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

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.


187 Responses

  1. I am using your Hello Theme from Github. Do you provide any CSS to display the WOO-Checkout and Legal Pages in any designed way? They look terrible and I cannot “edit with elementor”. So I would have to install a foreign theme just to have this little gap covered. Wanna stick to Hello – its soo slick. Thanks for any help!

    1. Hi Martin, Hello Theme is a canvas theme for developers who are familiar with CSS. I would advise going for another theme.

      1. There’s another article that recommends storefront but still leaves some design elements to be desired.

  2. Excellent!
    Maybe we no need install addons for Woo Page Builder anymore!
    And, my suggest, please add Table of Content feature to next version!

  3. Hello, I would like to know if this new enhancement is compatible with the yith plugins dedicated to visually improving the product page, such as: YITH WOOCOMMERCE COLOR AND LABEL VARIATIONS, which is used to add colors, images, sizes, etc. in a way more visual to product variations. Thanks

  4. Hi Ben,

    Excited by this release, but….

    We are using the basic Woo Storefront template and having several problems, including deprecated widgets not displaying properly (elementor pro v2.1.2).

    Not sure we really want to try “the best way to solve it is to switch to a simple theme like TwentySixteen” as we’re worried our current Woocommerce store will stop working if we do this?

    Would you prefer that I raise a support ticket?

  5. You continue to show us that switching to Elementor Pro was the right decision for our agency. Very cool guys, excited to try this tomorrow.

  6. Very cool!

    Just some small suggestions:
    – Let us style both regular and sales price more, i.e remove the strikethrough
    – Let us use prefix/sufflix on both prices (i.e MSRP, Cost Price etc. for wholesale etc)
    – Let us hide certain elements for guest users
    – Let us choose what meta to show, just categories, just sku etc

    Otherwise, amazing! This is excellent! Just the striketrhough though… let us get rid of it..

  7. Yet another awesome “Elementor” Milestone reached from the fastest and best wordpress page builder plugin available!

    With the vesitility of Elementor and Elementor Pro, building a website with this plugin is now childs play.

    Congratulations Team Elementor!

    A big fat THANK YOU for all your effort so far.

    What next from the illustrious Elementor?

  8. Excellent, I see with great enthusiasm that Elementor continues to grow and improve more, every day I get to know more about all the tools it has and how I can improve the web that I do in WordPress. It’s a pity that there is no more information in Spanish and if there is, where I could find it. Thank you.

      1. Hi… newbie here… I just bought “Pro” on Aug 12th – ver. 2.12…. and I have WC ver. 3.4.1… but can’t find this new WC builder. Where am I looking?

        1. In the bottom left menu in the dashboard, go to > Elementor > My Templates > Add new. You should see ‘Single Product’ and ‘Product Archive’. Also, to see the WoocCommerce widgets, you need to be editing a page with Elementor builder. Enjoy 🙂

    1. Well, as far as I know – yes. Those widgets are available in PRO version of Elementor 🙂 But that was the best dollars spent on any kind of stuff for wordpress for a long time 😛 go for it

  9. Hi, I’m redesigning my web already based on a personalized white theme but when it comes to building the single product it does not recognize the title of the product, what can that be?

  10. There was a 3rd way before this: Toolset WooCommerce Views which is still more powerful but isn’t always needed. For many customers, this Elementor solution is enough and is much easier. For the others, Elementor and Toolset together are a great combination.

    Getting control over product archives, product category archives, custom product taxonomy archives and handling sub-categories differently and being able to restrict the depth, combine some top level categories’ sub-categories into one archive page would all be very welcome enhancements if you can find a way to integrate and enhance the dynamic content query from the posts widget into the product archive widget. Even just being able to select one or more product categories for a given template would be a good start although I guess you can do that in the display conditions settings.

    Similarly it’d be nice to get some control over the query used for related products rather than just rely on the way WooCommerce selects them.

    Lots of potential for enhancements in the future. Good start and something I can use with several clients.

  11. Can’t customize the font style, colors for the product prices and descriptions etc.. I tried many different themes (even the sixteen), I am not using any plugin just woo and elementor.
    Big problem if we can’t customize the style for the products. Going to email the support.

  12. Congrats and thanks!
    Do you plan to offer, in some near future, a solution for managing affiliates, that will work with the woo package (ie crediting affiliates, payments etc) ?
    If not, can you recommend a good plugin for that ?

  13. Hi ?
    Great update.
    Question: when can we expect contorl over the checkout page – in specific the to make a page where the checkout pop up once the product was selected.

  14. WOW! Finally! 😀
    Good news: Menu Cart Widget! Woohoo!
    Bad news: No easy way to customize buttons and content in cart popup to another language. 🙁

  15. I saw this and since I LOVE elementor I tried it – but astra wouldnt recognize it, so changed theme ( twenty sixteen) and ended up in a totally mess ! So just to have things running – back to astra and still not able to use the new woocommers – any others experiencing this ? I would greatly appreciate help 😉

  16. Interesting!. c

    I’d like to give it a try

    I wonder (it’s my biggest problem now) if I could customize internal woocommerce pages, specially the CART.

  17. Hi,

    My question is will it work with custom fields created for product with help of WC Fields Factory or created from scratch. Its is possible to design custom fields for product with elementor.


    1. Hey, same question for me! I tried different plugins, but didn’t find a good solution yet. Do you have any new information? Maybe a plugin working well?


  18. Hello! I really like and enjoy the new WooCommerce update and I couldn’t wait to try it, but I miss a little “elementorish” thing. I really like to try and make new thing and elementor is a great company in it. What I really miss in this Woo update is the separated data tab. For example I’d like to put the short description in the top of the page (which is possible now) but I’d like to show the attributes separetally from the long description (not in tab solution). Is it possible to show only the attributes next to the product image and the long description under it? Or will you guys make a widget for long description and attributes too, like the short description has now?

  19. Hi, I’m using Astra theme and I cannot customise the Elementor Products or Products Archive widgets. I’m used to Elementor giving me full control over the content of its elements, but I don’t think it does (yet) with the Woo-Commerce ones.

    For example, I’d like to create a list view instead of grid, by having control over where I put the title, description, price and add to car button for the product listings.

    I know there are formatting options for text and buttons etc. for Woo-Products in Elementor but it’s the placement of each part of a product archive component that’s missing. Elementor gives us the option to re-arrange components in the Single Product widget so it should be possible to do the same for a product in a list?

    I’m hoping you’ll produce a video soon in case I’m doing something wrong! :-0

  20. I have also been extremly excited over this as a great lover of Elementor and I have tried and tried but no succes in creating even one single product- it dosnt “go through” the changes and show th e product.!! I
    have tried a lot of options- switching theme as suggested absoloutlty with no luck.- I have gone throught a list of “errorfindings” and deactived plugins I dont know how many times Unfortunately I have given up on this as it has only waisted my time ;-(
    I have seen and followed videos step by step and read how to do it over and over.. im using the old ways now again and hoping there might be a solution showing through some day…

  21. Can I edit the “default” product template with elementor pro? We need to keep other woocommerce plugin functions being available ex. yith product compare button
    If we create a new product template, the plugin function will be gone. Is that right?

  22. When using “product widget”, how can I replace “Add to cart” button with “learn more” and insert the Amazon store link?

    Understood that it can be achieved by adding individual product/image and button, but I’d be good if I can just change the add to cart button. thanks!

  23. Hello, I get an error message when I try to use woocommerce + elementor pro.. it tells me “the content area was not found on your page”.. any suggestions ? thanks 🙂

    1. Make sure you:

      1) Go to elementor; settings; advanced; enable the “Switch Editor Loader Method”

      2) Go to woocommerce; settings; advanced; UNCHECK “Force secure checkoutForce SSL (HTTPS) on the checkout pages (an SSL Certificate is required).”

  24. Well its all good but you cant make the checkout or cart page! not so COOL =/
    Bought it to make 25 sites ive just sold and i cant make the checkout pages with agility… thats very sad!

  25. What is the best theme for ecommerce or market place? I am planning shopkeeper theme. I am not sure if it is compatible with woocommerce and or elementor. which way is better to edit gutenberg? or stay with elementor or what is the real relationship?

    1. The best themes for Elementor and WooCommerce are the simpler themes like GeneratePress, since they don’t add custom styling to the products & products archive templates

  26. I’m having major problems – I have a site with some products which have many variations. I’ve finally worked out how to get the variations to show on the product page template as a dropdown- but the prices of each variation do NOT show – at all. In my view this should be a standard setting. Who’s going to add a product to the cart if they don’t know how much that variation is? Nobody! Also, once the variation is selected, the image should change to what is set up in the Woocommerce product. I spent a LOT of time adding individual images to every variation/attribute. And now I find out I need another plugin to make it work? I’m using Astra Pro & Elementor Pro. I’m also afraid to turn off settings – what if I lose it all? Yes, I know I can backup, but I’ve had things vanish in the past. Any suggestions very gratefully received – I’m pretty desperate right now, and yes I have raised a support ticket. Hopefully somebody will be able to help me out soon.

  27. hi!
    if possible … in the next update you have to insert the possibility to add the quantity box in the customizable woocommerce archive page

  28. Digital marketing is the best technique to improve your business. it creates the online presence to your business and generates more leads to your business it is the smart way of improving your business

  29. Please I need a solution to variation products in template single product, not works ni button for selects ni Add to cart button

    1. Try these two steps:

      Make sure you:

      1) Go to elementor; settings; advanced; enable the “Switch Editor Loader Method”

      2) Go to woocommerce; settings; advanced; UNCHECK “Force secure checkoutForce SSL (HTTPS) on the checkout pages (an SSL Certificate is required).”

  30. excellent.. can anyone help me how to show logout if a user login? i made a custom menu for my store? wont able to do it..thanks

  31. You can do this now with the element called “Product Content”. I have no idea when it was added, but I tested it myself today.

  32. Hi,
    Great information. Summing up all the points in few lines. Great job.
    I would like to recommend a some plugins for gift card that I found at MakeWebBetter that I use to run my clothing store in Portland.
    Thanks for the information you have shared.

  33. Here’s a discussion I found when searching Compatibility problem with Elementor & Woocommerce Composite Products: https://github.com/pojome/elementor/issues/5864

    Looks like this is a pretty common problem. Many sites are built using WooCommerce Composite Products -AND- everyone loves Elementor… Is this something Elementor will be able to get working soon?

    Woocommerce Composite Products is absolutely required to make our site work properly. It might be good to know WooCommerce Composite Products works with VisualComposer, or Woocommerce Visual Products Configurator, and it worked great with Visual Bakery in the past, but not Elementor.

    I hope we can switch from Visual Composer to Elementor but Woocommerce Composite Products is required for our website to function as required. Do you have any solution coming?

    Thanks so much Elementor team!!! Waiting to hear if there are any solutions for the conflict between Elementor & Woocommerce Composite Products.

    1. I test drove this pro feature today and its a lot better than woocommerce out of the box but it still misses a few essential features to be truly customizeable like: 1) the image gallery is ok if you only have 4 images but if you have 20, it will stack down to the bottom and clutter the page as the gallery has no image carousel, and so far i havent found a way to replace it with another gallery like wooswipe, 2) there should be an option to remove reviews in the products element, 3) option to replace the word “product” throughout the woocommerce widgets and pages as not everyone sells products thru woocommerce, 4) option to show or remove add to cart button in products element… Or replace with an inquire button, 5) option to configure search bar with a search icon instead of “search”, option to have a translucent search field with an overlay option, also the ability to change the placeholder text, and change button color (am not sure why its not working on mine), 6) option to display short description in products element, 7) option to limit short product description to number of characters in the backend.

      The new woocommerce capability has really taken wc customization to the next level. As this is a new feature, i hope it can still be improved upon in the near future.

      1. Still waiting for an answer on this? There is a layout conflict with “Add to Cart” on Elementor, when using Woocommerce Composite Products or Bundled Products.

        Is there a solution for this conflict?

  34. Can’t wait for Elementor Cart page, Checkout page and Account page customization to be released eventually. Any timeframe as to when this might be?!?!

  35. I have used Elementor pro in the past, but got rid of my website. I am about to start a new one, and need the woocommerce feature, and imagine with elementor pro it will look great. My question is, am I able to sell digital downloads with it?

    1. Elementor is responsible for the visual side of the store and products, not its functionality. Having said that, WooCoomerce does allow digital downloads.

  36. Hello, I have a small gallery with an woocommerce division to sell prints of our works. There are variations of each offering for different sizes of prints. Each size variation has the same price across all the images. As print costs change, I need a way to bulk each variation without going into each product page and change the price manually. Can Elementor handle this? Thank you.

  37. Awesome plugin.

    1. Any news regarding the timeframe for the cart, account and checkout pages?
    2. How can I make the cart menu button go directly to the cart page and not open the panel?


  38. Thanks Ben. It is important for your WooCommerce product pages to look attractive. Only then, your readers will consider purchasing it. Else, they will just abandon the cart. This is a useful update.

  39. I tried to find this plugin, but instead i got some plugin from Vietnam. When i instaled it , it crashed my site.

    Does anyone know where I can find this plugin for woocommerce.

    I am using a generate press theme, and have the latest elementor update as of April 11 2019

  40. Hello,

    In this video you describe that Woocommerce can be configured in many ways to achieve an efficient and complete Shop. I have some doubts about it:

    How can I configure woocommerce pages? (checkout, main account, etc). There is no way to give them a better style. I’m using Hello Elementor Theme.

    How can I configure the Shop Page and create a better Layout with customized buttons like “Read more” or “Add to Cart”, etc.?

    How can I make the Menu Cart Widget show the contents of the Cart in a different way?

    I look forward to hearing from you soon.

    Thank you!

    1. WooCommerce is a highly complex plugin and any pages that rely on its basic elements (e.g. Cart, Checkout, etc.) are even more so. The level of complexity is such that changes in something as routine as a WooCommerce update could cause havoc on a layout, resulting in a devastating effect on the webpage’s functionality.

      Currently, Elementor enables to customize the areas surrounding the WooCommerce elements. Take the cart page, for example – You may not be able to customize the table itself, but you can customize the title or the area where the table is located. You can also insert your own images, backgrounds, and content according to your needs (e.g. adding an FAQ).

      We are considering several options for achieving full compatibility with WooCommerce. But this is still in its development stages.

  41. Does anybody know if there is somewhere separate widget for composite products?
    Right now when using composite products then components get hooked directly to the add to cart widget, what i do not want. I want to use add to cart and components separately

  42. Hi,
    This new ser of tools are pretty good, really fast and easy to work with.
    One suggestion would be to add widgets and templates to create/edit some fundamentals parts of woocommerce. Those are the Cart Page, the Checkout Page and the User page. The tools that are available right now are not so good. Thanks.

  43. Thanks, Ben! Great to be able to customize product pages and archives.

    How about the WP cart, checkout and TY pages?

  44. hello i have issue ..i fallow the tutorial but always showing me the msg about the theme or plugins and some buttons not working on my pages >>>any help on this issue

  45. Hi, how to display “stock quantity” in Product Grid and/or Product Showcase.
    This can only be currently found on the product page, but a good option if available shop wide: Product Grid (Jet plugins), Product Showcase and Product Archive (Elementor)

  46. product look good with elementor but woocommerce schema is gone.

    do we have any way to add woocommerce to elementor created product page?

  47. Is there a way to get woocommerce variations tables to work with the single product page templates? They work throughout my non template products but i cant seem to make them work when using the theme/template builder. ????

  48. How about Cart and Checkout page builders and templates, when those are coming? It’s been on your roadmap for almost 2 years already?

    I would love to achieve the whole front-end completely with only Elementor Pro, WooCommerce, WPML for languages and Hello-theme. I’m though not sure whether this works out because the default WooCommerce cart page isn’t very user friendly.

    1. Tumbleweed….
      We totally agree. We absolutely LOVE Elementor for non-eCommerce websites but it seems there’s not much on the market for building custom checkout pages.

    2. Using the shortcodes, you can technically already do this feature. Make a page, use the shortcodes for Cart and Checkout and then assign the pages in your options.

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.