Avada 文档 -

WordPress Menu Not Saving / Displaying All Items

Let’s say you have created a nice menu for your theme, saved it and then viewed it on the front end, only to see that a portion of your menu items are not showing. Or maybe even the entire menu does not show. You have assigned it to the main menu, and saved it, but then it drops out and will not show on the front end.
What happened? Did the menu items disappear? Is this a theme issue? Or a plugin issue?
The answer is no, it’s a server configuration issue. Please read this detailed article written by CHRIS MAVRICOS (better known as SevenSparks) to help understand why this can happen, and what you can do to fix it: http://sevenspark.com/wordpress/menu-item-limit

WordPress 5.3 And Avada Custom Image Size Generation

With the 5.3 WordPress update, a new way of saving additional image sizes to the database was introduced for when images are uploaded to the library. Unfortunately, this adjustment was not compatible with the internal naming convention for Avada’s custom image sizes.
The problem will only occur for images that are uploaded to WordPress 5.3 and versions of Avada prior to 6.1.2. For these images, Avada’s custom uncropped image sizes are not available as a choice in the sizes drop-down option in the media library when you insert them to a post or page. And some of the responsive image sizes won’t be available. Updating to Avada 6.1.2 resolves this issue.

The 3 Types Of Images And How They Are Affected

Images uploaded to your media library before updating to WordPress 5.3.

Images uploaded to your media library on WordPress 5.3, before the update to Avada 6.1.2.

Images uploaded to your media library on WordPress 5.3, after the update to Avada 6.1.2.
Images Uploaded Before Updating To WordPress 5.3Nothing to do here. These images work as expected, even for Avada versions older than 6.1.2. And of course, they also work fine on Avada 6.1.2 or later.
Images Uploaded To WordPress 5.3 Before The Update To Avada 6.1.2As mentioned above, the problem for images uploaded on WordPress 5.3, but prior to the update to Avada 6.1.2, is that you can’t select Avada’s custom uncropped image sizes in the sizes drop-down of the media library when you insert them into a post or page. In addition to that, some of the responsive image sizes won’t be available.
Unfortunately, this can’t be auto-fixed through a theme update, as WordPress has already stored the data incorrectly in the database. Still, there is an easy way to correct this. Install and activate the Regenerate Thumbnails plugin, then go to the Tools > Regen. Thumbnails tab in your WP Admin sidebar and choose ‘Regenerate All Thumbnails.’ Doing this regenerates all images and adjusts the Avada custom image sizes to their new naming conventions. Once the regeneration is complete, it is business as usual.
Images Uploaded To WordPress 5.3 After The Update To Avada 6.1.2Nothing to do here. All images uploaded to WordPress are generated as expected on your Avada site.

Make Menu Items Open In A New Window

You can set main menu items to open up in a new window using the default WordPress option ‘Link Target‘. See the the steps below.
1. To enable the option, please login to your WordPress Dashboard and navigate to Appearance > Menu. In that new section, click the Screen Options button in the top right corner of the screen and select ‘Link Target‘.
2. You will see a new option in each menu item called ‘Open link in new window/tab’, check that box for the menu items you want to open in a new window/tab.
3. Once done, click ‘Save Menu‘.

How to Set Up Parent and Child Pages in WordPress

The WordPress page structure does not have to be a flat structure (i.e. all pages on the same level).
WordPress allows building a page hierarchy by creating child pages under a parent page. The WordPress admin interface has the option to mark a page as an independent page, or to put it in a parent-child relationship. The page hierarchy can have an infinite level of subpages, but it’s rare to see more than 3 levels of pages, as this can complicate navigation.
Setting a Child PageYou find this option in individual pages. It is not available on posts or other custom post types. This page hierarchy is useful for Side Navigation Templates and the Vertical Menu Widget, as well as providing a clear structure to your pages in the back end.
To create a child page, simply create or edit a page in WordPress like you would normally do. Under the Page Attributes meta box, choose a parent page from the drop down menu.
Note: If you do not see the Page Attributes menu, then please click on the Screen Options button on the top right hand corner of your screen. It will display a menu where you need to make sure that Page Attributes is checked.

Enabling Your Home Page

This is the first page that your website visitors will see when they arrive on your site. Setting up your home page is the same as setting up any other regular page, except that you need to specify in the WordPress settings which page will be allocated as your site’s static front page. You can change your site’s static front page at any time as often as you wish.
How To Set Your Home PageStep 1 – Login to your WordPress Dashboard and navigate to the Settings > Reading section.
Step 2 – Select A Static Page option.
Step 3 – Choose the page you want as your home page from the Front Page dropdown list.
Step 4 – Once done, click ‘Save Changes‘.

Avada and WordPress Gutenberg Compatibility

According to Automattic, the driving force behind the development of WordPress – the world’s leading CMS, Gutenberg is a new publishing experience, that was released with WordPress version 5.0, on December 6th, 2018.
In this document, we will be covering everything Gutenberg, Avada and what you need to know.
OverviewWhat Do I Need To Do In Preparation For WordPress 5.0?Already running Avada 5.7.2? Nothing to do!Running Avada below 5.7.2? Don’t panic!What If I Can’t Update Avada, Will My Site Break?If I Choose Not To Update WordPress, Will Avada Work?The WordPress 5.0 Editor Overview,What Do I Need To Do In Preparation For WordPress 5.0?This will depend on the Avada version you are currently running. If you are already running Avada 5.7.2 (latest available version is: 7.6) you are all set and good to go. Otherwise we recommend updating Avada to the latest version. Always make sure that you check and follow the detailed instructions for updating your theme. The importance of maintaining your site by making sure that your theme and plugins are regularly kept up to date, cannot be overstated. If you can’t update to the latest version of Avada just now, we have you covered too.

Already running Avada 5.7.2 or up? Nothing to do!
Running Avada below 5.7.2? Don’t panic!What If I Can’t Update Avada, Will My Site Break?Already running Avada 5.7.2 or up? Nothing to do!You can expect the same seamless working experience that you are used to with Avada and WordPress. Both, Avada and the Fusion Builder, will be unaffected and this includes the front-end of your site. Additionally, feel free to try the WordPress 5.0 Gutenberg editor. We added options to either create a post on Gutenberg or within Fusion Builder, your choice. You can’t edit a page/post created with Gutenberg in the Fusion Builder or vice versa, however, you are free to try Fusion Builder Elements in Gutenberg. More information please read our help file.
We have implemented the option to choose between the Fusion Builder and Gutenberg when creating new pages or posts as illustrated below.
IMPORTANT NOTE: If you create a page/post with Gutenberg you can’t edit/maintain the same page/post with the Fusion Builder and vice versa. They are not interchangeable.Choosing Add New > Fusion Builder gives you this.
Choosing Add New > Gutenberg gives you this – note the Edit with Fusion Builder button, top left.
Choosing Add New > Classic Editor gives you this.
Can I Also Use The New Block Editor?Yes, you certainly can. What must be noted is that if you create a page/post with Gutenberg you cannot edit/maintain the same page/post using the Fusion Builder and vice versa. They are not interchangeable. Any Gutenberg page/post created will display perfectly on the front end of the site to anyone viewing it.
Running Avada below 5.7.2? Don’t panic!Update Avada To The Latest Version – Here Is HowWhether you are running an old version of Avada or not, regular maintenance is critically important. Furthermore, making sure that your theme and plugins are kept up top date should be a part of your maintenance procedure. These are our detailed update instructions:
Important Update InfoHow To Update The ThemeUpdating From An Old Version Of Avada?Apply Any Released PatchesAvada ChangelogSomething else that is important is to also ensure any patches that our team releases between update cycles are applied as part of ongoing maintenance for your install and always clear your cache plugins post update.
Current Avada version is 7.6Current Fusion Builder version is 3.6Current Fusion Core version is 5.6What If I Can’t Update Avada, Will My Site Break?The short answer is: No. The front-end of your site will be unaffected and everything will remain perfectly functional, not affecting your website visitors. It is the WordPress back-end of your install where you will have obstacles. If you have not updated your Avada theme to the latest version, it won’t be possible to edit posts/pages with the Fusion Builder, that is why we strongly recommend updating to Avada 7.6+ before you update to WordPress 5.0. See our detailed update instructions.
If you are not able to update your theme just yet, you have two other options as listed below:
1 – Install And Activate The Classic Editor PluginThe Classic Editor plugin is developed and maintained by the core WordPress team and will be officially supported until December 31, 2021. Install and activate the Classic Editor plugin.
It does what it says on the tin and will sideline the WordPress Gutenberg editor upon activation. The plugin also makes it possible to keep both the Gutenberg and the Classic editor at the same time, configured the in the plugin’s settings. Go to WordPress Dashboard >> Settings > Writing page, you will see the option under “Classic editor settings”.
All of this means that the traditional WordPress editor is active and Fusion Builder is enabled for all pages and posts.

Download Classic Editor or install via WordPress Dashboard >> Plugins
Active installations: 600,000+WordPress Version: 4.5 or higher2 – Or, Install The Disable Gutenberg PluginThis method allows you to to disable the WordPress Gutenberg editor for certain or all user roles and post types and override any Gutenberg related nags. Install and activate the Disable Gutenberg plugin. Upon activation, go to the >> WordPress Dashboard > Settings > Disable Gutenberg page to configure the plugins settings.
Download Disable Gutenberg or install via WordPress Dashboard >> PluginsActive installations: 10,000+WordPress Version: 4.9 or higherIf I Choose Not To Update WordPress, Will Avada Work?Yes, of course, Avada will work perfectly with the 4.9.8 version of WordPress. You can delay updating to WordPress 5.0 if you have accessibility concerns or are simply not ready to do so at this time.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,The WordPress 5.0 Editor OverviewThe new WordPress 5.0 Welcome screen greets you with:

“You’ve successfully upgraded to WordPress 5.0! We’ve made some big changes to the editor. Our new block-based editor is the first step toward an exciting new future with a streamlined editing experience across your site. You’ll have more flexibility with how content is displayed, whether you are building your first site, revamping your blog, or write code for a living.”
At the very top of the page the following prompt is visible “Learn how to keep using the old editor.”, clicking that takes you to the “Keep it Classic” and plugin install option, as shown below:

“Prefer to stick with the familiar Classic Editor? No problem! Support for the Classic Editor plugin will remain in WordPress through 2021.
The Classic Editor plugin restores the previous WordPress editor and the Edit Post screen. It lets you keep using plugins that extend it, add old-style meta boxes, or otherwise depend on the previous editor. To install, visit your plugins page and click the “Install Now” button next to “Classic Editor”. After the plugin finishes installing, click “Activate”. That’s it!
Note to users of assistive technology: if you experience usability issues with the block editor, we recommend you continue to use the Classic Editor.”
There has been significant discontent with regard to overall accessibility and the new Gutenberg editor. On October 30th, WP Tavern released an article with a sobering assessment of the accessibility status of Gutenberg. You can read the full report from Joe Dolson here.
Back to installing the Classic Editor plugin from the WordPress welcome screen, your next step will be as follows:
In the subsequent WordPress Dashboard >> Plugins screen, click “Install Now” then activate the plugin. Installing the Classic Editor disabled the new Gutenberg editor as default and gives you the traditional editing experience for pages and posts.
There are two settings for the Classic Editor plugin, the default is > “Replace the Block editor with the Classic editor.” and the secondary is > “Use the Block editor by default and include optional links back to the Classic editor.”
There are two settings for the Classic Editor plugin, the default is > “Replace the Block editor with the Classic editor.” and the secondary is > “Use the Block editor by default and include optional links back to the Classic editor.”,ResourcesWordPress 5.0, Avada, And You. All That You Need To Know.WordPress 5.0 Development CycleWordPress Slack ChannelGutenberg HandbookGutenberg Reviews

WooCommerce Single Product Gallery

The Single Product Gallery refers to the Featured Image area on any WooCommerce Single Product page. This can be a single image, or if multiple gallery images are added into the product, they be cycled through in a slider. There are several features and options that you should know about if you’re setting up an online shop with Avada and WooCommerce.
With the release of Avada 7.2, and the Avada WooCommerce Builder, some new options and changes were made to this area. The settings below are found at Avada > Options > WooCommerce > General WooCommerce, and apply when using the default WooCommerce templates. If, instead, you are using a Content Layout Section to design your single WooCommerce product pages layout, the Global Options apply as parent options, and you have the option to override them in the Woo Product Images Element.
OverviewWooCommerce Product Images Layout – You can set the WooCommerce Product Images Layout option to use either the Avada Layout, or the standard WooCommerce Layout.WooCommerce Product Images Zoom – The zoom effect will allow users to mouse over your product image to automatically zoom in and get a closer look. More details on this below.Special Notes On The Zoom Effect – This section covers specific points on image sizes for the Zoom effect and the Thumbnails image size.
WooCommerce Product Images Width – The WooCommerce Product Images Width (formerly WooCommerce Product Gallery Size) setting is available in Avada 7.2 or higher. This allows you to set a custom width for the product image area on your single product page.
WooCommerce Thumbnail Options – This section covers details on the WooCommerce Product Gallery Thumbnail settings in the Avada Global Options.How To Adjust WooCommerce Product Image Size Settings This covers how to adjust your various image sizes in WooCommerce.,WooCommerce Product Images LayoutThis option controls the Layout of the WooCommerce Product Images area. You’ll find this setting in Avada > Options > WooCommerce > General WooCommerce, and on the General tab of the Woo Product Images Element. There are two Product Gallery Slider styles to choose from; The default
WooCommerce style and the Avada style. See below for details on each of
these layouts.
Avada’s WooCommerce Product Images Layout – When Avada’s WooCommerce Product Images Layout is enabled, clicking anywhere on the image will open your product gallery in the Avada Lightbox gallery which looks like this. In the Lightbox, you’ll be able to scroll through each image in the gallery. The Avada Lightbox has an array of global options for changing the Lightbox style and color scheme. For more information on the Avada Lightbox, see our documentation here. Also, a thumbnail positioning option is available, when using this Layout, which is not available when using the Woo Layout.Default WooCommerce Product Images Layout – The default WooCommerce product images layout is the other option. The WooCommerce default slider will use the default WooCommerce Lightbox. To launch the image in the WooCommerce Lightbox, you’ll need to click the zoom icon in the top right corner. The WooCommerce Lightbox will look like this. If the image is larger than what is currently being viewed, you can click to zoom-in while in the WooCommerce Lightbox gallery mode. (eg. If you have a 1000px wide image and the whole image is already in view, there will be no additional zoom ability. However, if you have a 2000px wide image and only 1000px width is showing, you can click to zoom-in further.) When zoomed-in, you can click and drag your mouse cursor over the image to change the point of focus.,WooCommerce Product Images ZoomThis effect can be turned on or off, and will allow your shoppers to get a close up view of your product simply by hovering over the product image on the single product page. Please check each point below for information on settings and options which will affect the product image zoom feature on your site.
WooCommerce Product Gallery Zoom – You can enable/disable this feature in Avada > Options > WooCommerce > General WooCommerce, or in the General tab of the Woo Product Images Element when using Avada Layouts.Image Size Requirements – In order for the zoom effect to work correctly, your single product image size will need to be larger in width than the WooCommerce Product Images Width setting (see section below).Strength of Zoom – The larger your image is than the Product Images Width, the more zoom you’ll notice on hover. (eg. With the WooCommerce Product Images Width set to 500px, a 1000px image width would yield a closer more detailed zoom effect). We have a detailed guide for configuring your image sizes in WooCommerce here.Once the zoom effect is enabled and your image sizes are set correctly, you’ll be able to hover over the product image and it will zoom-in to show more detail. (compare the top example image to the bottom example image which is on hover) The point of focus will follow your mouse cursor. Just move your cursor over the area you would like to see more closely.
IMPORTANT NOTES: Your catalog image size and single product image size need to be large enough to fit the size column you want to use. For example, if you want to use the Woo Product Images Element in a one-half column, then you should have a Catalog Image size of at least half your site width as set in Avada > Options > Layout; Site Width.Special Notes on the Zoom EffectTo setup Single Product Gallery Zoom effect, you’ll need to be sure it’s enabled in Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Zoom option, or in the Woo Product Images Element General tab > Product Images Zoom, when using Avada Layouts.WooCommerce Product Images Width – Your Main Image Width (see setting below) and the actual size of the image uploaded, will both need to be larger than the Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Width or the Product Images Max Width setting in the Woo Product Images Element. Those settings will determine the width of the single product gallery’s container column. Once you’ve set that as needed, you’ll be ready to set your WooCommerce Main Image Width.
WooCommerce Main Image Width – The WooCommerce Main Image Width setting is found in the Customizer. Go to Appearance > Customize > WooCommerce > Product Images from the WordPress dashboard, and you will find the Main Image Width setting there. This will control the actual size of the image used in the gallery. The larger your image size is set to, the stronger and more detailed your zoom effect will be. Note: If your image size in WooCommerce settings are equal to your WooCommerce Product Image Width in Avada’s global options, no zoom will be noticed on hover. Additionally, the size of the actual image you upload, will need to be as large or larger than your Main Image Width setting.
Regenerate Thumbnails – After making changes to the WooCommerce Image sizes, be sure to regenerate your thumbnails. Doing so will apply your changed image sizes to images already uploaded on your site. You can use this plugin: Regenerate Thumbnails.,WooCommerce Product Images WidthThis option controls the width of the product image area, as you can see in the screenshot below. You’ll find this setting in Avada > Options > WooCommerce > General WooCommerce. It’s also found in the Woo Product Images Element, under the Design tab, as Product Images Max Width.
This option will allow you to set the width of the actual product image container on the single product page (including any thumbnails). Your setting here will determine the image width needed for your products. It’s important to set this as desired, then configure your WooCommerce product image settings accordingly. This will default to 500px.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,WooCommerce Thumbnail OptionsThere are three thumbnail settings in the Global Options that allow you to configure the thumbnails the Product Images Layout will use. You’ll find these setting in Avada > Options > WooCommerce > General WooCommerce. These are the WooCommerce Product Images Thumbnail Width, the WooCommerce Product Images Thumbnail Position and the WooCommerce Product Images Thumbnail Columns, or Columns Width options.
WooCommerce Product Images Thumbnail WidthThis setting controls the natural image width of product image thumbnails. In order to avoid blurry thumbnails, make sure the Product Thumbnails size setting in WooCommerce Settings is large enough. It should be at least the number in your WooCommerce Product Images Layout setting divided by the number of columns. These sizes are in pixels. You can find more details on setting the image sizes in WooCommerce here.,WooCommerce Product Images Thumbnail PositionThis setting allows you to choose the position your thumbnails will be shown in the Product images layout. You’ll find this setting in Avada > Options > WooCommerce > General WooCommerce, and in the Design tab of the Woo Product Images Element. You can choose from Top, Right, Bottom or Left. Depending on your choice here, the next option will be either WooCommerce Product Images Thumbnail Column Width, or WooCommerce Product Images Thumbnails Columns.
Note. the Thumbnail Position setting is only available when using the Avada Product Images Layout.,WooCommerce Product Images Thumbnail Columns / Column WidthIn the Left or Right Position, the option allows you to choose what percentage of the overall area (the WooCommerce Product Images Width) you want your thumbnails to fill.
In the Top or Bottom Position, the option allows you to choose how many columns of thumbnails to display. Your chosen layout will also affect this option. When using the Avada style layout, the Product Images Thumbnails Columns setting will control the max number of visible thumbnail images at one time in the row. Additional images will be scrollable through the thumbnail carousel.
When the default WooCommerce Layout is used, the Product Gallery Thumbnails Columns setting will control the max number of thumbnail columns as it does for the Avada Layout. The difference is any remaining images will break down to a new row since WooCommerce default doesn’t use a carousel for the thumbnails. This can be seen here.,How To Adjust WooCommerce Product Image Size SettingsWooCommerce includes settings to change the width of product images for the Main Image and for Thumbnail images. There are specific Avada settings which work in conjunction with your WooCommerce images sizes. When configuring these image size settings, it’s important to take into account the Avada Global Options settings as well. We’ll touch on each of these settings in detail below.
Note: If the images you’re uploading for your products are smaller at the source than the image sizes set in your WooCommerce settings, you may see some visual layout discrepancies on the front end of the shop pages. This is not a bug. It is simply because your images were too small for WooCommerce settings to affect them. You can think of these settings as a max width and height for your images. Anything below the limit will not be resized.
While setting up your shop, be sure the WooCommerce image size settings and the actual size of your images are considered. In summary, your images should be equal to or larger than your WooCommerce image size settings.
After any changes to your image size settings, you’ll need to regenerate your thumbnails for it to affect images already uploaded to your site. We recommend using the Regenerate Thumbnails plugin. Please see the steps below for details on changing WooCommerce image sizes.

Step 1 – Go To Appearance > Customize from the WordPress dashboard. (This has been moved from the WooCommerce Settings area)

Step 2 – Go to WooCommerce > Product Images, as seen in the screenshot above.

Step 3 – Under the ‘Product Images’ section, you will find the Main Image width and Thumbnail width options (width is the only option, as the main image remains uncropped. There are options at the bottom for cropping the thumbnails if you wish).

Step 4 – Main Image is used for the main image on single product pages, for your images on the shop page, and for shortcodes. Product Thumbnail is for your smaller product images used in widgets and the thumbnail gallery below the Single Product Gallery Slider. Enter your desired width and height value. (Note: The height value can be left blank if you want your image height to be automatically scaled with the image’s aspect ratio.) If you’re using the Single Product Gallery Image zoom effect, the Special Notes section above for details on image sizes and setup.

Step 5 – When you make changes to the images sizes and save, you will need to regenerate thumbnails using the Regenerate Thumbnails plugin. Install the Regenerate Thumbnails plugin and go to the WP Admin > Tools tab, and choose to regenerate your image thumbnails so the new image sizes will be created.

The Avada WooCommerce Builder

The Avada WooCommerce Builder was initially released with Avada 7.2, and further updated with Avada 7.3, and is an umbrella term for a wide-ranging suite of WooCommerce related features in Avada.
What this means in practice, is that you can now create a completely customized experience for your WooCommerce users, from start to finish. You can design and build your own conditional layouts for individual WooCommerce Products, as well as being able to create custom Shop, Cart, Checkout and Archive pages, all using the design flexibility and power of Avada Builder, and the extended range of our Woo Design, and other Avada Builder Elements.
See the links below for documentation and videos on how to use this suite of WooCommerce tools for the various sections of WooCommerce.,BUILDING PRODUCT LAYOUTSBUILDING A Shop PAGEBUILDING A CART PAGEBUILDING A CHECKOUT PAGE,OverviewAvada Layouts vs Editing A Page DirectlyWoo Layout ElementsWoo Design Elements
Useful Links,Avada Layouts vs Editing A Page DirectlyIn WooCommerce, it’s likely your shop will have many products. So, it makes sense to use a template when designing a layout for your single products. WooCommerce uses a default template for your products, but with Avada Layouts you can build a template, or several, for your WooCommerce single products. For example, like in the Avada Winery prebuilt site, you might have a product layout for simple single products and another for variable products.
But when creating a Shop, Cart or Checkout page in WooCommerce, it’s a bit different. There is only one of each of these, and so it makes more sense in that situation to directly edit the page. This approach, coupled with the collection of expanded Woo Layout and Woo Design Elements, and the power and flexibility of Avada Builder, gives you the tools to create a fully custom WooCommerce experience for your users.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Woo Layout ElementsWoo Layout Elements are designed to be used when creating a Layout (template) for your WooCommerce Products. This is done using Avada Layouts. Woo Layout Elements are dynamic Elements used to populate the Layout, which then pull the relevant product content into the page. Most of these Layout Elements are only available when editing Content Layout Sections, but some are also available in Page Title Bar layout Sections. You can of course, use many of the Design Elements as well in your layout, as many of these have Dynamic Content options.
Read More About How To Use Avada Layout Elements!767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Woo Design ElementsWoo Design Elements on the other hand, are normal Design Elements. With Avada 7.3, a whole range of new Woo Design Elements were added specifically to help build custom Shop, Cart and Checkout pages, while others can be used in a variety of settings, like the Woo Notices, Woo Shortcodes and Woo Product Carousel Elements. As of Avada 7.3, there are now sixteen (16) specific Woo Design Elements.
Read More About The Difference Between Layout And Design Elements!,Useful LinksHow To Use WooCommerce With AvadaAvada WooCommerce OptionsHow To Use WooCommerce Attribute Swatches
Introducing Avada Layouts
How To Use Layout Section Elements

The Avada WooCommerce Builder – Shop

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 customer flow throughout your entire WooCommerce shop – from using Avada layouts for individual WooCommerce Products, to creating custom Shop, Cart, Checkout, and Archive 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 WooCommerce Shop page. See below for links to customizing the other main areas of WooCommerce, and watch the video below for a visual overview of the Shop creation process.
The Avada WooCommerce Builder – ProductsThe Avada WooCommerce Builder – CartThe Avada WooCommerce Builder – Checkout,OverviewNo Layout NeccesaryDesigning The Shop PageExample of a Custom Shop Page,No Layout NeccesaryUnlike the process of creating a template for individual WooCommerce products, there is no need to create an Avada Layout when building a custom WooCommerce Shop page. With WooCommerce, the Shop page is a little bit different to the Cart and Checkout Pages, which by default, just have a simple shortode.
With the Shop page, the shop contents comes from a loop inserted into the assigned page. So, to create a custom shop page, you edit the assigned Shop page and design and build it as you would with the Cart and Checkout pages. There is just one additional step to stop the default loop showing up, and that is to go to the Page Options of the Shop page, head to the Content tab, and select No for the Show WooCommerce Shop Loop in the second option, as you can see in the screenshot below. That will remove the default shop layout, and now you can start designing and building your own Shop page using your preferred interface of the Avada Builder, and your choice of Woo and other Design Elements.
For the Shop page, the most obvious Elements to use are the Woo Sorting and Woo Product Grid Elements, as well as any other Design Elements you’d like to use. You can also create and design a Post Card for products, and then use the Post Cards Element to display the products.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Designing The Shop PageUsing Avada Builder allows you to create any design you want for your WooCommerce Shop page. Start with a Container / Column arrangement, and when you add your first Element, you will see the available Woo Design Elements at the bottom of the Elements dialog, as seen in the screenshot below. There are not really any specific Woo Shop Elements as such, but rather a number of Elements you are likely to use, like the Woo Sorting, and the Woo Product Grid Elements. These two Elements would recreate the standard WooCommerce shop functionality. For further control over the layout, you could also use the Post Cards Element, utilising a WooCommerce designed Post Card.
The real magic of using the Avada WooCommerce Builder to build your Shop page is that you can add these Elements in whatever structure and order you wish, and have complete control over the design and content of the page. You might want a Slider, or a Page Title Bar at the top, other Elements amongst the Woo ones, like the Title, Separator, or any other Elements that fit your circumstance and design ideas. Complete freedom.,Example of a Custom Shop PageBelow, you can see an example of a WooCommerce Shop Page in Wireframe view (so you can easily see the structure and Elements used) as seen on the Avada Retail Prebuilt Website. Note how use has also been made of other Design Elements like Images and Separators.
On the front end, the Shop displays like this. The page also has a Custom Page Title Bar, and a Custom Footer.

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