The Avada WooCommerce Builder – Products

The Avada WooCommerce Builder was initially released with Avada 7.2, and further updated with Avada 7.3. This wide-ranging suite of WooCommerce related features means that you can now design and build your own custom layouts for individual WooCommerce Products, as well as custom Shop, Cart and Checkout Pages, all using the design flexibility and power of Avada Builder, and the extended range of Woo Design and other Avada Builder Elements.
In this document, we look at how to create a custom layout for your individual WooCommerce Products. See below for links to customizing the other main areas of WooCommerce. And remember to watch the videos on each page for a visual overview of the process.
The Avada WooCommerce Builder – ShopThe Avada WooCommerce Builder – CartThe Avada WooCommerce Builder – Checkout,OverviewCreating the Content Layout SectionUsing The Optional Prebuilt Pages
Designing The LayoutExample of a WooCommerce Product LayoutCreating the Conditional LayoutSpecial FeaturesUseful Links,Creating The Content Layout SectionBecause products are dynamically displayed using a template, we first need to create the template that will be used to display the products. For this, we use Avada Layouts. To create a Layout for WooCommerce Products, the first thing to do is to create a new Layout Section. For WooCommerce products, this is, of course, a Content Layout Section, as it is in the content area of the page the products are displayed. The Woo Layout Elements are only available when creating this type of Layout Section. Once the Layout Section has been designed and completed, we then add the Layout Section to a Conditional Layout that will only be used on WooCommerce Products.
So, to make a Content Layout Section, as you can see in the screenshot below, simply head to Layouts > Layout Section Builder, from the Avada Dashboard, select Content as the type of Layout Section, enter a name, and then click on Create New Layout Section (or just hit Enter). Then, simply head to your Avada Builder interface of choice and begin building your Layout Section.
IMPORTANT NOTE: On a new site you could make the Layout first and assign the Layout Section as you create it, but just remember, that if you’re doing this on a live site, it makes sense to create and design the Layout Section first, before assigning it to a conditional layout, as it’s live as soon as you assign it, and it’s initially empty.767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Using The Optional Prebuilt PagesWhen you first create the Content Layout Section, you will see two buttons on the Starter page. One is ‘Add Container’, and the other is ‘Prebuilt Page’. You can build your Content Layout Section from scratch, or you can use a prebuilt template as a head start.
Clicking on the Prebuilt Page button opens the Library to a new tab, with nine new Content Layout Section templates. As it’s a Content Layout Section, there are three for blog layouts, a couple for portfolio layouts, and there are four templates for WooCommerce products.
To use any of these, simply click on your preferred layout, and it will load into the builder. From here you can save the layout, or customize it as you wish.,Designing The LayoutIf you want to build a Layout Section from scratch, it’s just like building any page or layout. In this case, however, it’s important that you already have at least some WooCommerce products created before you build a Layout, as the Builder uses data from the products to display the layout, as noted directly below.
IMPORTANT NOTE: When building a WooCommerce product Layout with Avada Live, be sure to first head to the Layout Section Options tab > Layout Section, and set ‘View Dynamic Content’ as Product, and then select an appropriate product to be used as a visual preview for your design.Using Avada Builder allows you to create any layout you want for your WooCommerce products. Start with a Container / Column arrangement, and when you add your first Element, you will see the Woo Layout Elements.
There are 12 Woo Elements with which to design your new layout, and some changes also made to a couple of relevant existing Elements. See the Special Features section below for more info on those. Each Element has its own range of options, and they can be added to the Layout wherever you want. Some of the Elements however can only be used once in a Layout Section. These will appear greyed out once you have used them.
You can, of course, also use any of the 70+ Design Elements in your Layout Section. This breaks your WooCommerce product templates completely out of the box and allows you to display them virtually any way you can imagine!,Example of a WooCommerce Product LayoutBelow, you can see an example of a WooCommerce Product Layout in Wireframe view. This is from the Avada Winery prebuilt website, and is used on all products except the Mixed Case. Note how use has also been made of Avada Design Elements like the Title Element, and the Nested Columns Element etc.
On the front end, the above Content Layout Section for a product displays like this.,Creating The Conditional LayoutOnce you’ve designed and built your Content Layout Section, it’s time to create a Conditional Layout that determines when the Layout is used. In most cases, the condition set would be to use the Layout for All Products. This is so that the Layout is used only on WooCommerce product pages, and not ordinary pages and posts etc. Alternatively, you might want to create multiple product layouts and exclude certain products, or categories etc. Follow the link for more information on Conditional Layouts.
To create a Layout, head to Layouts from the Avada Dashboard, and in the Layout Builder section, give your new Layout a name (WooProducts for example) and click on Create New Layout (or just hit Enter).
From there, as you can follow below in the screenshots, it’s simply a matter of assigning the WooProducts Layout Section you have created to the Content Layout Section, and then adding the conditions to the Layout.
To do this click on Select Content on the Layout, head to Existing Section, and select the Layout Section you previously created. They, click on Manage Conditions at the bottom of the Layout, head to the Products tab on the left hand side, and then select All Products.
That’s it. Now all single product pages will use your new Layout. If you now head to a product page on the front end of your site, the product will now be using the new Layout you have created. Keep in mind, you could also create and assign custom Layout Sections for the Header, Page Title Bar or Footer to this Layout as well, for completely unique product pages.,Special FeaturesProduct PaginationThe Pagination Element has been updated with Avada 7.2 to provide three pagination styles to use with your products. There is the traditional Text Style, as used in blog posts, but now there is also a Text With Preview style, which shows a thumbnail of the product under the Previous / Next link on hover, and a Sticky Preview style, which shows a sticky thumbnail in the middle of the viewport, which expands on hover. You can even limit the pagination to the same product taxonomy. For more details on the Element, including the various Layout Styles, see the Pagination Element doc.
Social Sharing ElementThe Social Sharing Element (formerly the Sharing Box Element) also had an overhaul for the 7.2 release. See the Element doc for full details of all the new options, but this Element is now supercharged with configuration and design options to enable your users to share your products in exactly the way you prefer.
Attributes, Variations and Swatch StylesAs part of the Avada WooCommerce Builder, we have added three new attribute display types – Avada Color, Avada Image and Avada Button. These are added as Product attributes, and then variations can be added as well.
Another useful part of the Add To Cart Element are the Swatch Style options. Here, you can choose from Default, or Custom, and if you select Custom, a range of styling options appear for the Avada Color, Avada Image and Avada Button Swatches. For full details on how to use these new Product Attributes and Swatch styles, please see the How To Use WooCommerce Attribute Swatches document.,Useful LinksHow To Use WooCommerce With Avada
Introducing Avada Layouts
How To Use Layout Section ElementsAvada WooCommerce OptionsHow To Use WooCommerce Attribute SwatchesThe Pagination Element
The Social Sharing Element