WooCommerce Builder 2.0 beta 1 + Visual Builder Support & Archive Builder!

by | Jul 8, 2018 | News | 46 comments

I’m pleased to announce that WooCommerce Builder 2.0 Beta 1 is available, you can download it now by going to this page if you are already a client. The downloaded file is called Wc-Builder-2.0-beta.3.zip, unzip it, it contains a free category layout and the plugin itself under a folder named “The plugin zip”.

What’s new in 2.0?

1- Changing the plugin name from WC Product Builder to WooCommerce Builder.

For a year, I’ve been receiving emails almost every day asking to include the ability to customize product categories, tags, cart … and other WooCommerce pages. The plugin was built in the first place to customize product pages in the best and easiest way possible, I wanted to give you guys all the features you want, I thought of building a separate plugin but why use two plugins when you can use one! ?

From now on, I’m adding support to customize everything related to WooCommerce front-end pages. Starting with version 2.0, you get a great archive builder to build stunning product categories and tags using the power of Divi builder.

2- Archive Builder.

Now, you can build custom layouts for product categories and tags. You can build a default layout to be used for all categories and another layout for all tags. If you want to build a custom layout for a specific category or tag, you can do that too very easily.

3- Visual Builder Support.

Using the visual builder is the best thing about Divi builder in my opinion and today after a long waiting, all product and archive modules support the visual builder.

4- Build layouts for products based on their categories.

Let’s say you have tons of products and categories and it’s impossible to build a custom layout for every single product of them, what can you do?

Now, you can build custom layouts for products based on their categories, meaning, products under category #1 will use the layout #1 and products under category #2 will use layout #2 and so on.

5- Use the product description area to build your entire product page.

Unlike WordPress built-in pages, you can’t use the content area on product editing pages to build the product page. This is simply because WooCommerce uses this area to add the product description.

Today, you can use the description area/builder to build the entire product page just like pages and this is completely optional.

How To Use?

1- If you have the WC Product builder, deactivate it.

2- Download the plugin from here ( You must be signed in ).

3- Upload the plugin, go to admin dashboard -> Plugins -> Add New -> Upload -> Activate.

4- After activating the plugin, a new menu item “Wc Builder” will be added to your dashboard main menu with a submenu of three items, General, Archive Builder and License.

General Settings

WooCommerce Builder 2.0 beta 1 + Visual Builder Support & Archive Builder! 2

Under the “Products” tab, you can select products default layouts.

You have two main options:

– The general default layout which will be applied to all of your products.

– Products Under Specific Categories, here you will see a list of all product categories, by default each category products will use the general default layout but you can change that based on the category.

WooCommerce Builder 2.0 beta 1 + Visual Builder Support & Archive Builder! 3

Under the “Archive” tab, you can select the default layout for categories and tags.

You have two main options:

– The default layout for categories, this layout will be used for all your categories.

-The default layout for tags, this layout will be used for all your tags.

Archive Builder

WooCommerce Builder 2.0 beta 1 + Visual Builder Support & Archive Builder! 4

Under “Archive Builder” Page, you will see a list of all the archive layouts you have built, next to each layout title, the categories and the tags that will use this layout in the front-end.

Build Categories & Tags Layouts.

Click the button below to preview a live demo of a beautiful category layout built with this version. This layout is included in the beta folder you downloaded from the link above. To use it, add a new archive layout and import it in the builder.

WooCommerce Builder 2.0 beta 1 + Visual Builder Support & Archive Builder! 5

In a previous step, we have selected the default layout for categories/tags, but what if you want to build a custom layout for a specific category or a tag? Just add a new archive layout!

On the archive builder, you’ll have access to all Divi built-in modules plus 5 extra modules:

 Woo Breadcrumb, this module to display the page breadcrumb and you can also use it on product pages.

 Woo Category Cover, this module outputs the category title, description and image as a background.

You can set the category image by going to Products -> Categories -> Select the category -> Thumbnail.

Uner the module settings, you can set a default background image to be used if the category has no image.

 Woo Page Title, This module displays the page title, in this case, the category or the tag.

 Woo Archive Description, This module displays the archive ( category/tag ) description.

 Woo Archive Products, This module outputs the products of the current category or tag, it works in a similar way like Divi built-in Shop module but it is dynamic, meaning, it displays products from the current archive.

This module has a very cool feature where you can display products list in a classic blog fashion and more display types will be added in future updates like masonry, tables …

Build The Product Layout.

WooCommerce Builder 2.0 beta 1 + Visual Builder Support & Archive Builder! 6

You know from previous versions of the plugin how to build a product layout, now when you add/edit a product, you’ll have two options.

 Use the Description Builder: selecting this option will make the description builder/editor acts as the product builder just like normal pages.

With this option, you will be able to use the visual builder to build stunning product layouts.

 Select a Layout: this is the default option, you can select a saved layout from Divi Library to be used for this product.

Using this option will keep the description builder/editor as it is.

Send Me Your Feedbacks

If you found any bugs, please contact me now, try to explain the issue as best as you can, give steps to reproduce.

By Abdou

My name is Abdelfatah Aboelghit, a PHP developer from Egypt and my friends call me Abdou!
Here I write and develop products about Divi Theme.

More Article

46 Comments

  1. lmlynnell

    Hi! I just installed the Beta3 and I’m trying to tweak some of the core woocommerce css. (like change the margin/padding on the p.woocommerce-result-count for instance. Is there a separate css file in the Builder that I’m missing? I’ve tried adding the css to my child css, I’ve even gone into divi and tried changing the original css with no results. ?? There are many tweaks I’d like to make, but I need to find the correct css file to pull from. LOVE the new builder btw!

    Reply
    • Abdou

      You can target that element using this selector body.woocommerce .woocommerce-result-count and it should work and override the default WooCommerce styling.

      Reply
  2. TO2M

    Hello Abdou,

    Thank you for creating this product! I’m wondering when the final version will be released?

    Also, I’m trying set variations on my product page using Woocommerce Builder 2.0 beta 3 as images/thumbnails rather than just the standard text drop-down menu. Is this possible? If not, is it perhaps possible to make it work in conjunction with another plugin, like Woocommerce Variation Swatches Pro or Woocommerce Additional Variation Images?

    Thank you!

    Reply
    • Abdou

      Thank you! This version should have been released already! But I’m late, anyway, I still do not have an estimated release day but to keep all of you updated, the final version is ready and I’m designing some free layouts to be included with the plugin, after that I’ll move my website from WC to EDD and I’ll release the plugin immediately.

      As for the variations images, you can’t do that with my plugin alone, you’ll have to use another 3rd party plugin that is dedicated for that purpose and the both mentioned plugins work fine with mine.

      Reply
  3. digishock

    I really love what you are doing for 2.0. I have an art gallery that I purchased your plugin for and that website is getting a huge design boost thanks to what you are doing with your plugin. There’s only one thing missing though. How to design the shop store page (frontpage of Woocommerce)? That’s still an ugly monster.

    Feature requests
    It would be great if you would add a horizontal slider module for the archive layouts zo items can be presented on a larger scale 🙂

    Reply
    • Abdou

      Thank you!
      The shop page is scheduled for 2.1 version.
      The slider is also scheduled for 2.6 version.
      These versions may change depending on the situation but this is what I’m planning to do for now.

      Reply
  4. Simon

    If I will buy now, will it upgrade to version 2 or not?

    Reply
    • Abdou

      Yes, you will get 2.0 free of charge.

      Reply
  5. nikopol

    Hi Abdou, looks great already.
    One thing is not really working as it should:
    I miss the alert, when i add a product to the chopping cart.
    It´s not showing up, so a customer will not know if he actally bought the pproduct or not.

    Best regards
    Robert

    Reply
  6. nikopol

    Sorry Abdou,
    found it.
    It´s Woo Notices of course.
    Great job!
    Wish it would leave the beat soon, so we could go live wth it.
    Keep up the good work an d thank you very much.

    Reply
  7. kennycar

    Hi Abdou…..Loving this plugin and looking forward to the release of the version with the categories customizer. Please let me know when it is available. You ROCK!!

    Reply
  8. ribah

    hello, i just bought woocommerce builder but when i try to download the layout at this link “https://www.divikingdom.com/my-account/extra-downloads/” i arrive on the login page but when I put my username and password it does not pass on this page yet when I log in from the menu “account” I can perfectly access my space

    Reply
    • Abdou

      Download the layouts from here
      https://docs.divikingdom.com/download-plugin-free-layouts/

      Reply
      • ribah

        thank you very much

        Reply
  9. Tommy Redmond

    Hi Abdou,
    I’m quite new to web designing. When you say that “this is a beta version, don’t use it on a live website”, do you mean that the plugin should be only be used in the development site and then when everything is working it can be pushed to Go-Live?
    Thanks in advance
    Tommy

    Reply
    • Abdou

      The final version has been released 3 months ago ?

      Reply

Submit a Comment

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

All Access Bundle

Get ALL current & future products for $69/year instead of $327/year

Save Now →

Download The Most Powerful WordPress Theme

Pin It on Pinterest

Share This