Introducing WooCommerce Builder: the New 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. 

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.

Liked This Article?

We have a lot more where that came from! Join 430,504 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

comments - 112 Responses

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

  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.

    Regards,
    Vishal

  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 🙂

  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

Leave a Reply