The Brizy WooCommerce Builder

on 12 November 2020, by Dimi, in Blog, WordPress, PRO, Updates

I'm very excited to tell you that In this update we are introducing the Brizy WooCommerce Builder. This will let you design your product and archive products page using the Brizy builder without touching a line of code or any options, themes, or plugins.

The Brizy WooCommerce builder is a Brizy PRO feature, only PRO customers have access to it. You can purchase a Brizy PRO license on our Pricing page.

The Brizy WooCommerce Builder

This was a huge undertaking and we are very excited to bring you our take on the WooCommerce builder. This is the first version for the Woo builder with some cool elements, features, and improvements already in the works.

This might be obvious but the Brizy WooCommerce builder doesn't work without the WooCommerce plugin installed. Can't build a WooCommerce shop without WooCommerce, I'm afraid.

If you are new to WordPress, WooCommerce is a free WordPress plugin that helps you build an e-commerce store. It's very powerful and most importantly it lets you start building your store for free.

The Elements

What we've done is separated the regular WooCommerce templates into dynamic Brizy elements that come with individual options to give you full control over the styling.

Keep in mind that we are hiding the Brizy WooCommerce builder elements when you don't have the WooCommerce plugin installed. We want to keep the Elements sidebar as clean as possible, plus there is no point to have some elements there that you can't use (if you don't have the WooCommerce plugin installed).

Once you install Brizy if you edit a regular page with Brizy you'll find some of the WooCommerce elements at the bottom of the Add Elements panel.

If you are creating a Template for your Products you'll be able to see and use all the Brizy WooCommerce builder elements.

Title – Displays the title of the product

Excerpt – Displays the excerpt of your product

Content – Displays the content of your product

Price – Displays the price of your product

Gallery – Displays the gallery of your product

Add To Cart – Displays an Add to cart button

Stock – Displays the stock number

SKU – Displays the SKU number

Meta – Displays meta information for your product

Rating – Displays the rating of your product

Attributes – Displays the attributes you add for your product in a table

Upsell – Displays a set of products you set as upsell

Breadcrumbs – Displays the breadcrumbs for your page

Review – Displays the review functionality to let users submit reviews for your product

Products – Displays products from different categories, best use for a "similar products" section

Cart – Displays a Cart button, usually used in the header, but you can put it anywhere

Categories – Displays your categories for all your products

Pages – Displays shop pages: Cart, Checkout, My Account, Order Tracking, Specific Product. These are only displaying the pages , you can't control the styling just yet, we are working on that and all the editing options for each page will come soon.

How to Create a Template for Your Products Archive

You'll create a template for your Product Archive page the same way you do for your blog posts, from your WP admin > Brizy > Templates.

We've re-structured the Templates page a bit, added a Template Type option where you will select the type of template you want to create. Easier to figure out where you want your template to be applied.

Once in the builder, you'll use the Archives element and start customising your page with the usual tools options and features you are used to in Brizy.

IMPORTANT: in the Archive element the dynamic elements (images, titles, prices, etc) are displayed as placeholders. This is temporary, we are working on a new improved element that will sort that out soon.

How to Create a Template for Your Product Page

Same way as with the Product Archive, it all starts with: WP admin > Brizy > Templates.

In the builder, you'll notice all the related product elements up top. We are dynamically moving elements around in the panel to give you fast access to the right elements, in this case, the product-related elements.

From this point on, the sky is the limit, build your product detail page exactly the way you want with the tools you already know how to use directly in the Brizy builder.

How to Edit Your Product Post With Brizy

You might not see the Edit with Brizy button on your Product WordPress pages. That is because you need to activate the Brizy builder to work with Products. You do that from Brizy > Settings

Next for Brizy WooCommerce Builder

This is just the beginning of the Brizy WooCommerce Builder. We are already hard at work on improvements and new features and functionality:

Pages Elements – the current Pages element only displays the pages but you can't edit them with brizy in terms of style. That will change soon. We'll have all the pages separated and everything inside will be editable.

Archive Element – the Archive element doesn't display the dynamic content from your Products but only placeholders. We are already working on a new post/product element that will sort this out.

New Filter Element – a new Filter element is in the works. This will work with posts, custom posts, and products and it will help you all sorts of cool filters for your content. Primarily will be used for products and you'll be able to create all sorts of filters from price ranges to categories, tags & more.

What's coming next

I hope you are as excited as we are about the new Brizy WooCommerce Builder and you'll put it to good use. This makes the Brizy WordPress plugin a complete solution for your WordPress needs.

Besides the improvements I've mentioned above, we are also preparing the Web Stories update and a huge (long-awaited) design update with 20 layout packs.

Great things ahead.

Article by Dimi

Co-founder & CEO of Brizy, Dimi has a passion for Web projects with cutting-edge tech & great usability. He's always happy to share and connect with others.