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.
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.
170 Responses
Cool, Thank you very much. I gonna try now.
Excellent job gentlemen!
Impressive & promising! Keep up the good work in unparalleled speed!
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!
Hi Martin, Hello Theme is a canvas theme for developers who are familiar with CSS. I would advise going for another theme.
Which is your theme recommendation?
How’s this coming along?
What is your theme recommendation in the meantime?
Excellent!
Maybe we no need install addons for Woo Page Builder anymore!
And, my suggest, please add Table of Content feature to next version!
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
I tried to build out a layout today for the YITH gift product and it didn’t show the gift card options. So far it hasn’t worked but will keep trying.
Hi Daniel, we haven’t tested it yet with any 3rd party plugins
Awesome, so excited about this!! x
Welcome beautiful stores.
LMNTOR 4ever
Great news, I can’t wait to try it on my next project 🙂
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?
Yes, please contact our support team.
Excellent!
Thank you so much for the wonderful job you have done which enables us to easily design the Ecommerce Site!
Great! I’m tired of WooCommerce standard layout, now I can design single product layout!
tutorial?
Very soon.
I came to ask the same thing 🙂
Doesn’t show up on any of my sites
I love you guys!!
Excellent! Ben !!!
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.
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..
yes this is necessary
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?
Is View cart page and billing page included?
Not yet, but it’s in our roadmap.
great job.
but – I have a question: we will be able to add videos?
Thanks,
Absolutely, using the video widget with a dynamic source.
Very cool, I gonna make i website very soon with it, is there a group developers that already buitl with Elementor and Woocommerce at customers level?
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.
How does this work with Divi or Thrive?
Elementor works with all themes.
this is great feature that I am waiting for long time, thank you for creating this.
Great..!
Do I need to use Elementor Pro for WooCommerce Builder ?
Yes, you need Elementor pro 2.1 + WooCommerce 3.4 or higher.
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?
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 🙂
finnnnnnaaallllyyy!
amazing!
thanks ELEMENTOR 🙂
I totally agree
This is a “Giant step for mankind.”
How do i use the builder? I can’t find it within elementor pro.
For the Woocommerce Builder to work, you need Elementor pro 2.1 + WooCommerce 3.4 or higher.
I did all these things and it doesn’t work
Please contact our support.
Do I need to download it or it comes with upgrade of elementor? I’ll
You need to update to Elementor Pro 2.1, as well as have the WooCommerce 3.4 or higher.
Finally! Now I can make my site the way that I want it to be. Thanks guys.
Is there a plugin/widget for WooCommerce that produces a “Price Range/Product Filter” a customer can use for stores with large product catalogs? For Example – see the left column (Under Heading “Brands”) here —> https://www.guitarcenter.com/Drums-Percussion.gc … or the left column here —> https://www.target.com/c/cubbies-storage-cubes-organization-home/-/N-558lg?lnk=Storagefrom4
Yes, see http://www.ceescoenen.nl but it is a mix of Elementor and Anywhere Elementor Pro. I’m using ACF fields also.
Hello guys! I’m soooo excited reading this good news 🙂 Just pls let me know if this WC builder works fine with Astra theme? ;>
Cheers!
Of course it does 🙂
could someone describe if WooCommerce Builder is under Elementor , do I need to use elemntor pro for this builder ?
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
Not sure what you mean clearly, but you need WooCommerce plugin to use this new feature with Elementor Pro.
Great
Hello…I’m using the Avada theme w woocommerce…will this plugin work??? Thx
Another profitable tool in the elemental :), I will soon share my 1st ecomerce made with elemental from beginning to end.
WP Astra theme is highly recommended.
This is truly a game changer and beats every other WP theme and plugin out there. Well done Elementor team and I’m looking forward to working with you guys.
when does the tutorial comes out
I like this new builder. Will you be adding a Wishlist widget also? Thanks
It’s very really great information for becoming a better Blog.You become a idol for me.You always change my the Way of thinking.Your way thinking is Really amazing.Thanks
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?
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.
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.
I just upgraded for the last version and everything is working fine right now 😀 HAPPY!
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 ?
Not at the moment, but you can try AffiliateWP.
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.
?
Hi Kobi, did you try using the new Menu Cart widget?
WOW! Finally! 😀
Good news: Menu Cart Widget! Woohoo!
Bad news: No easy way to customize buttons and content in cart popup to another language. 🙁
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 😉
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.
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.
Regards,
Vishal
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?
Thanks
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?
This feature is long awaited by elementor’s fans! finally, an easy way to design a woo site! woohoo!
Is all of this compatible with Woocommerce Frontend Manager plugin. there seems to be a conflict since the last updates.
Hi John, we haven’t tested this plugin.
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
Hi Richard, I’m afraid that Elementor doesn’t have this feature at the moment. You could also contact our developers on our Github account.
This is where feature requests are handled, and suggestions are taken into consideration: https://github.com/pojome/elementor/issues?q=is%3Aopen+is%3Aissue+label%3Arequest%2Ffeature
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…
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?
Nice! Does it have a way to filter categories in the shop page like a portfolio filter tabs?
Not at the moment.
I have used other page builders in the past but nothing compares to Elementor! I’ve been using it for at least 2 years now. Haven’t turned back since. You guys are simply the best!
Hi, nothing compares Elementor. The best page builder i have used so far.
Thanks for the information.
I wonder what would WordPress be without Elementor! Thank you for all your great plugins and adds.
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!
The Product widget requires Woocommerce. Therefore you will have to use another widget like the Call-to-action Widget.
When will there be a video on how to use this?
When will there be a video on how to use WooCommerce Builder?
Very soon, stay tuned 🙂
Still no cart page layout options?
I tried it, I loved it. Thanks
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 🙂
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).”
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!
Please expand these new Areas fast! im loving Elementor! And User AREAS and WOOCOMMERCE AREAS ARE ESSENCIALS!
Thanks we will!
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?
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
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.
Please contact our support and we will look into this
how to woocommerce single product vertical thumbnails slider
Hi Marita – Any luck on solving this? Having the same issues.
hi!
if possible … in the next update you have to insert the possibility to add the quantity box in the customizable woocommerce archive page
Hi how about products category page customization like filter products by brand price ratings etc ..
This might come later on
is this available on the free version of Elementor?
No, part of the Pro
Alot of the custom product template widgets do not work , Tired all the simple themes i could find
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
How have you solved it? I have the same problem and nothing, I do not even get it to be seen as a drop-down, can you comment on your solution at [email protected] please?
Please I need a solution to variation products in template single product, not works ni button for selects ni Add to cart button
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).”
I am really happy with your blog because your article is very unique and powerful for new reader.
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
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.
Hi, how about cart, checkout, and my account pages… can I use Elementor for these, too?
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.
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.
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.
Is this still an issue or is it fixed?
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?
Please send this question to our support, with a more detailed explanation about your issue.
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?!?!
+1
Your article Awesome Thanks for this information, very informative as well as Modern.
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?
Elementor is responsible for the visual side of the store and products, not its functionality. Having said that, WooCoomerce does allow digital downloads.
Hi Is tha new way full compatible with OceanWP ?
I can’t find anything that tells me how to do a filtered product search for woocommerce with elementor. Can you point me in the right direction?
You will have to use a 3rd party plugin to create a filtered product search.
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.
Can I make a shop using my theme and not require to buy a woocomerce theme? Is there any video where I can see woocomerce with elementor in action?
You don’t need a WooCommerce theme. Here’s one of the tutorials we created for Elementor and WooCommerce integration.
You don’t need a WooCommerce theme. Here’s one of the video tutorials we created. Join our Youtube channel and enjoy many more tutorials.
Excellent! very informative.
please add a arrow in the variation selection field for the product template. It looks bad without it.
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?
Thanks!
Did you found someone already for the solution? I see no one responded so just asking.
Nice
Hi,
Great blog, You have summed up all the points very efficiently. Thank you for sharing.
Thanks
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.
Astra or OceanWP
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
Awesome thank you
Hi I would love to customize a separate category page. is there a way to do so?
Sure, please check out this article: https://docs.elementor.com/article/540-woocommerce-archive-products
its great, but when are u going to add cart and cheakout ?
they really need to be editable, like choosing which fields ect, and adding up-sales ect
Great article! thanks for this helpful and informative share. I really enjoy your write-up.
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!
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.
Wow, Elementor just keeps getting better. Thanks for this improvement.
Hi, is there now a way to edit the woocommerce my account page using elementor?
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
Take a look at Booster Pro plugin. Lots of modules, functions and control.
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.
Thanks, Ben! Great to be able to customize product pages and archives.
How about the WP cart, checkout and TY pages?
It is excellent solution!
Thanks for sharing this information.
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