How To Use The New Divi WooCommerce Product Page Builder

How To Use The Divi WooCommerce Product Page Builder

Nelson Miller Pee Aye Creative
In this guide I'll walk you through how to use the NEW Divi WooCommerce Builder modules to create ecommerce layouts with the Divi Builder!

Using The Divi WooCommerce Builder On Product Pages

Enable the Divi Builder

When you have your WooCommerce product information filled in such a description, featured image, price, and so forth, you can then click on the button to use the Divi Builder.

How to use the Divi Builder on WooCommerce product pages

A new dropdown appears on the firth hand side, but make sure you leave that setting on “Build from Scratch.” If you choose “default,” it will break the page. I have reported this to Elegant Themes.

How to use the Divi Builder on WooCommerce product pages

There is also main setting in Theme Options>Builder that I discovered.

How to use the Divi Builder on WooCommerce product pages

You will be pleased to see that the “Build from Scratch” is not accurate at all. What actually happens is that the entire page that was normally built with WooCommerce now has all of its elements wrapped in the appropriate new Divi modules. For example, the title automatically becomes the Woo Title module, the gallery becomes the Woo Images module, and so forth. There are 16 new Woo modules in total.

Using the Woo Modules is just like using any other Divi Builder module. They have the same interface and very similar design options. Of course, the tabs have come custom settings depending on which module it is.

Using The Divi WooCommerce Builder On Any Page

One of the surprise features is the dynamic content that can allow elements of a product to be added to any page of the website. For example, you can add a product title or add to cart button to the home page and simply select which product to associate with that button. It’s a great feature that has lots of potential.

Example

I’ve added the Woo Title and Woo Add To Cart modules here on a blog post!

Divi LMS Child Theme for LearnDash

Conclusion

Overall, this is a phenomenal update and it is well done. There are some oversights and bugs that need to be fixed, but as this matures it will be an amazing part of the WordPress online shop experience. The Divi Theme Builder will also add more features to this such as templates, sidebar layouts, etc.

Last updated Jun 19, 2023 @ 8:38 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

î‚£

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

3 Comments

  1. Victor

    Thanks for a nice walk-through! Please let us know if you get any response on the “default” bug.

    I also wonder if you have found a way to bulk apply styles to already existing products with the new Divi Woo features. Or do we have to wait for the theme builder update?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hey Victor,
      So far they just said “Thank you for sharing this with us. I will forward this to the developers so that they can take a closer look 😄 ”

      Actually, yes. You can use Extend Styles! Just have to manually go to each product, select to use the Divi Builder, then save.

      Reply
  2. Daniel Nerkowski

    I bought divi from last year and is great

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart