Author 诗语

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

How To Use WooCommerce With Avada

Avada is fully compatible with WooCommerce and includes full design integration. You can use it straight out of the box, just using the WooCommerce settings and the Avada Global options to control its appearance and functionality.
But with Avada, WooCommerce goes much further than that. With the release of Avada 7.2 we introduced the Avada WooCommerce Builder to create your own custom single product Layouts. And with Avada 7.3, we expanded the suite of WooCommerce tools to encompass building custom Shop, Cart and Checkout pages. So, Avada is now a WooCommerce powerhouse, and there is very little you can』t now do to create a fully unique and customized experience for your WooCommerce users.
Of course, to get started with creating your online shop, you first need to install the free WooCommerce Plugin. This document on using WooCommerce contains only the most basic information you need to get started with WooCommerce, like installing the plugin, assigning your shop pages and creating products. Watch the video for a detailed visual overview of the process.
And for more information on building your own custom layouts for WooCommerce products, and creating custom WooCommerce Shop, Cart and Checkout pages, please see The Avada WooCommerce Builder documentation.
Overview
How To Install WooCommerce

How To Assign Your Shop Page

How To Create Your Products

How To Adjust WooCommerce Product Image Size Settings

Special Notes on the Zoom Effect
WooCommerce Links,How To Install WooCommerceStep 1 – Go to Avada > Plugins / Add-ons and locate the WooCommerce plugin, as seen in the screenshot below.
Step 2 – Click the 『Install』 button.The plugin will install and auto activate.
Step 3 – The WooCommerce Setup Wizard should then appear. If you』re importing one of our Woo demos, such as Modern Shop or Classic Shop, you can safely skip this process. To skip, click the 『Not Right Now』 button. If you』re not importing one of our Woo demos, then click the 『Let』s Go!』 button to proceed with the setup.
Step 4 – Follow the onscreen prompts and instructions to go through the process and fill in your store』s necessary information. Once finished, you can proceed to creating your first product by clicking the 『Create Your First Product』 button, or return to the WordPress Dashboard by clicking the link below the setup window.,How To Assign Your Shop PageAs part of the normal WooCommerce installation process, the Setup Wizard should run, enabling you to set up your shop, and assign your shop pages. For more details on what pages the Setup Wizard creates, see this WooCommerce document.
If in the case the Setup Wizard does not appear, or you cancel it for any reason, to complete the process, you can always return to the Setup Wizard, by navigating to the Help menu on any WooCommerce page, and choosing Setup Wizard from the menu at the top left.
If you want to set the shop page manually, it』s as easy as going to Products tab, the WooCommerce Settings – WooCommerce > Settings > Products – and selecting the page to be the main shop page. WooCommerce will then display your products on this page.
The remaining pages can be set up under the Advanced Tab – WooCommerce > Settings > Advanced.,How To Create Your ProductsStep 1 – Go to the Products > Add Product tab on your WP Admin sidebar.
Step 2 – Enter the name of your product at the top of the page.
Step 3 – Enter the product description text into the post content field. This section will display all the product information.
Step 4 – In the 『Product Data』 box, enter all the product details. For example, Price, SKU or Shipping.
Step 5 – In the 『Product Short Description』 box, enter a short description that will display next to your main images.
Step 6 – Set your main featured image under the 『Product Image』 box on the right hand side. This has to be done for every product.
Step 7 – To use a gallery of images, insert more images in the 『Product Gallery』 box.
Step 8 – In the 『Product Categories』 box, enter your product』s categories. In the 『Product Tags』 box, enter your product』s appropriate tags.
Step 9 – Once you』ve entered all the necessary date, click 『Publish』 and the item will now appear on your main shop page.
IMPORTANT NOTE: For Avada 5.5 we have enhanced the handling of H1 & H2 automatic assignment for titles in the Page Title Bar and single posts. The post header for single posts, single FAQ, single portfolio, and WooCommerce single product pages will automatically default to H1 if for example the Page Title Bar >> Page Title Bar Text is set to Hide. If Page Title Bar >> Page Title Bar Text is set to Show then the post header will default automatically to H2.Product Creation OverviewIMPORTANT NOTE: 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 a shortcode in a one-half column, then you should have a Catalog Image size of at least half your site width as set in WP Admin > Avada > Global Options > Layout; Site Width.Additionally, since the WooCommerce 3.0 zoom effect was added, your Single Product Image size requires special consideration for the zoom effect to be noticeable. You』ll find this section below the image size instructions, or click here to skip to our special notes on Single Product Image size requirements and the zoom effect.,How To Adjust WooCommerce Product Image Size SettingsWooCommerce includes settings to change the size of product images for Catalog images and Single Product 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 option 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 – Click on the 『Appearance』 tab on your admin sidebar, and select the 『Customize』 tab.

Step 2 – Click on the 『WooCommerce』 tab of the page.

Step 3 – Under the 『Product Images』 tab, you will find the Images setting for Single Product Images.

Step 4 – Main image width option is for your images on the single product pages. Thumbnail width is for your products in catalog. Enter your desired width value. (Note: Your image height is automatically scaled with the image』s aspect ratio.) If you』re using the Single Product Gallery Image zoom effect, the Special Notes section below for details on image sizes and setup.

Step 5 – When you make changes to the images sizes and save it, 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.,Special Notes on the Zoom Effect
To setup Single Product Gallery Zoom effect, you』ll need to be sure it』s enabled in Avada > Theme Options > WooCommerce > General WooCommerce; WooCommerce Product Gallery Zoom
WooCommerce Product Gallery Size –
Your Single Product Image size will need to be larger than your setting for WooCommerce Product Gallery Size in Avada > Theme Options > WooCommerce > General WooCommerce. That setting 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 Single Product Image size.
WooCommerce Single Product Image Size – The WooCommerce Single Product Image size setting 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 Gallery Size in Avada』s theme 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 Single Product Image size 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 Links
WooCommerce Plugin Page – This is the official WooCommerce plugin page.
WooCommerce Documentation – This is the WooCommerce Online documentation created by WooThemes.
WooCommerce Community Forums – This is the community forum for WooCommerce plugin created by WooThemes.

WooCommerce Built-In Shortcodes – These are the included shortcodes for WooCommerce; our custom shortcodes are not included in this.

WooCommerce Setup Wizard – WooCommerce includes an awesome Setup Wizard that lets you set up your shop with ease.

WooCommerce Github Repository – For developers: the official WooCommerce code repository, where the latest version can be downloaded and issues can be reported.

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.