标签： woocommerce

Different WooCommerce Category Layouts

In recent WooCommerce versions, there was a Template Debug Mode option which allow logged in users to disable template overrides. This option was removed from WooCommerce > System Status > Tools tab in WooCommerce 3.0 and is now only available via the constant WC_TEMPLATE_DEBUG_MODE. If that constant is set, you may see design differences like the below one, between logged in and logged out users.
View here a sample screenshot of what logged in users see.
View here a sample screenshot of what logged out users see.
How To Disable Template Debug ModeTake a look at your wp-config.php to see if that constant is set to true. If that is the case, set it to false or remove it completely and please check again.

How To Use WooCommerce Attribute Swatches

As part of the Avada WooCommerce Builder released in Avada 7.2, we also added three Avada attribute types to WooCommerce – Avada Color, Avada Image, and Avada Button. These attribute types can be used in both standard WooCommerce Layouts, as well as Layouts created using the Avada WooCommerce Builder.
Read on on to closer look at WooCommerce Attributes, and Attribute Swatches, and how you can use them in your Avada eCommerce store, and watch the video for a detailed visual overview.,Adding Global AttributesWith Avada 7.2, you can now add specific types of global attributes to WooCommerce, and then apply them independently on the product level. To start, head to Products > Attributes from the WordPress dashboard.
Here, you can create a new global attribute. Start by giving it a name, a slug, and then choosing a type of attribute. This can be either Avada Color, Avada Image, or Avada Button. A color attribute is useful for products that have different colors, and you can select color swatches when you configure the attribute terms. Avada Image is a useful attribute type for any visual differences in attributes, and Avada Button is useful for sizes, or anything else that works as a simple label.
In the screenshot below you can see a Logo attribute about to be added, using the Avada Image attribute type. Note how the other two attributes are using the other attribute types, Avada Color, and Avada Button.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Adding Attribute TermsOnce you have created your Attributes, you can add the attribute terms. There is a 『Configuring terms』 link at the right of the attribute to do this. This edits the attribute, and here you can add the attribute terms. For an Avada Color attribute for example, you would create as many colors as you needed across your products, and using the Avada Product Attribute Options, you could select the color preview for the attribute using a color picker.
As you can see in the screenshot below, a black variation is about to be added while three others variations have already been created.,Adding Attributes To Individual ProductsOnce you have completed making your global attributes and attribute terms, you can add them to individual products and generate product variations. The first step to do this is to ensure the product to a variable product. This is done in the product, from the Product Data dropdown list.
Next, you can add any Custom Product Attributes. All global attributes created will display in the dropdown list, but you can add just the ones you want to any product. In this example, I will add all three – Color, Logo and Size.
Once you have added the product attributes, you can then choose which values to add to the attribute. In the screenshot below, I have added three colors, two logos, and four sizes. Check the 『Used for Variations』 tick box to use these values in your variations.,Creating Product VariationsOnce you have added your custom product attributes, it』s time to create the variations. WooCommerce makes this easy with an automatic option to 『Create variations from all attributes』. If you prefer, you can also add them manually.
Here is a screenshot of all the variable products once WooCommerce has created all combinations from the attributes. At this point they have no price, or other details, and these need to be set individually.
You can either click on the Expand link at the top right to expand all the variations, or you can click on the variation itself to just open or close them one at a time. Depending on your product, you would add various information in here, but the price is needed for the product to display. Here, I have also added an image to match the attributes (i.e. blue t-shirt with the particular logo). This image is then displayed on the front end when someone selects those specific attributes.,Displaying Variations In Your LayoutBy default, WooCommerce will then display your variations on the product page. You can also however build your own WooCommerce Product Layout, and use the Add To Cart Element to display and style your variations. Below is the standard WooCommerce template for a variable product.
And here is a screenshot with the same product, using a WooCommerce Single Product Layout. To learn how to create these, check the Avada WooCommerce Builder documentation.

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.

Override Avada WooCommerce Hooks

What Are Avada WooCommerce Hooks?Avada uses different hooks (actions and filters) that WooCommerce offers to change styling and to extend the functionality of certain components. Any of Avada』s WooCommerce hooks can be replaced with your own, which allows you to override both, WooCommerce and Avada native behaviour.
For more information about the general concept of action and filters in WordPress, please see the links below:
WordPress Plugin API: Actions & FiltersWordPress Plugin Handbook: Hooks,Changing Avada WooCommerce HooksIn general, the WooCommerce hook overrides used by Avada are stored in class-avada-woocommerce.php in the Avada/includes folder. To make the class object available, we have created a global variable for it called $avada_woocommerce. This variable has to be used in order to remvoe any of the hooks that are defined in that class. It is defined in Avada』s functions.php, so will be available once the theme is fully loaded. Thus you have to make sure you use the after_setup_theme WP hook when referencing $avada_woocommerce. The next section will illustrate the correct setup.
Removing Avada WooCommerce HooksThe following example function removes the add_product_border WooCommerce action from Avada. (This would remove the border from the product summary section on a single product page.) Notice, that we create a new function, remove_woocommerce_hooks, so we are able to hook it to WP』s after_setup_theme action. This ensures that we can access the needed $avada_woocommerce variable, which we load using the PHP keyword global. Now we can use that variable in the following removal function.
If you want to remove several hooks, you can add all the removal functions inside the wrapping remove_woocommerce_hooks function.
A list of all available hooks, functions that use them and their corresponding priorities can be found in the list below.
Copy to Clipboardfunction remove_woo_commerce_hooks() {
global $avada_woocommerce;
remove_action( 'woocommerce_single_product_summary', array( $avada_woocommerce, 'add_product_border' ), 19 );
}
add_action( 'after_setup_theme', 'remove_woo_commerce_hooks' ); 1function remove_woo_commerce_hooks() {2 global $avada_woocommerce;3 remove_action( 'woocommerce_single_product_summary', array( $avada_woocommerce, 'add_product_border' ), 19 );4}5add_action( 'after_setup_theme', 'remove_woo_commerce_hooks' );Replacing Avada WooCommerce HooksThe following example function replaces the add_product_border WooCommerce action with add_my_product_border function. Since we consider the case of replacement here, we assume that you have already removed the hooks in question, in the way that was described in the last section. Now, to add your own replacements, you don』t have to use a wrapping function or the global avada_woocommerce variable. You can directly hook your own function to the desired action or filter.
Copy to Clipboardfunction add_my_product_border() {
// your code here
}
add_action( 'woocommerce_single_product_summary', 'add_my_product_border', 19 );xxxxxxxxxx4 1function add_my_product_border() {2 // your code here3}4add_action( 'woocommerce_single_product_summary', 'add_my_product_border', 19 );767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Avada WooCommerce HooksAvada WooCommerce ActionsBelow is a list of Avada WooCommerce actions that can be removed or replaced with your own action.
Summary border on a single product page.
Copy to Clipboardremove_action( 'woocommerce_single_product_summary', array( $avada_woocommerce, 'add_product_border' ), 19 );xxxxxxxxxx1 1remove_action( 'woocommerce_single_product_summary', array( $avada_woocommerce, 'add_product_border' ), 19 );Product title on a single product page.
Copy to Clipboardremove_action( 'woocommerce_single_product_summary', array( $avada_woocommerce, 'template_single_title' ), 5 );xxxxxxxxxx1 1remove_action( 'woocommerce_single_product_summary', array( $avada_woocommerce, 'template_single_title' ), 5 );Show details button on a single product page.
Copy to Clipboardremove_action( 'woocommerce_after_shop_loop_item', array( $avada_woocommerce, 'show_details_button' ), 15 );xxxxxxxxxx1 1remove_action( 'woocommerce_after_shop_loop_item', array( $avada_woocommerce, 'show_details_button' ), 15 );Product stock HTML on a single product page.
Copy to Clipboardremove_action( 'woocommerce_single_product_summary', array( $avada_woocommerce, 'stock_html' ), 10 );xxxxxxxxxx1 1remove_action( 'woocommerce_single_product_summary',  array( $avada_woocommerce, 'stock_html' ), 10 );Social icons below product description on a single product page.
Copy to Clipboardremove_action( 'woocommerce_after_single_product_summary', array( $avada_woocommerce, 'after_single_product_summary' ), 15 );xxxxxxxxxx1 1remove_action( 'woocommerce_after_single_product_summary', array( $avada_woocommerce, 'after_single_product_summary' ), 15 );Related products on a single product page.
Copy to Clipboardremove_action( 'woocommerce_after_single_product_summary', array( $avada_woocommerce, 'output_related_products' ), 15 );xxxxxxxxxx1 1remove_action( 'woocommerce_after_single_product_summary', array( $avada_woocommerce, 'output_related_products' ), 15 );Upsell products on a single product page.
Copy to Clipboardremove_action( 'woocommerce_after_single_product_summary', array( $avada_woocommerce, 'upsell_display' ), 10 );xxxxxxxxxx1 1remove_action( 'woocommerce_after_single_product_summary', array( $avada_woocommerce, 'upsell_display' ), 10 );Sidebar on WooCommerce page.
Copy to Clipboardremove_action( 'woocommerce_sidebar', array( $avada_woocommerce, 'add_sidebar' ), 10 );xxxxxxxxxx1 1remove_action( 'woocommerce_sidebar', array( $avada_woocommerce, 'add_sidebar' ), 10 );Welcome bar to checkout page.
Copy to Clipboardremove_action( 'woocommerce_before_checkout_form', array( $avada_woocommerce, 'avada_top_user_container' ), 1 );xxxxxxxxxx1 1remove_action( 'woocommerce_before_checkout_form', array( $avada_woocommerce, 'avada_top_user_container' ), 1 );Proceed to checkout button.
Copy to Clipboardremove_action( 'woocommerce_proceed_to_checkout', array( $avada_woocommerce, 'proceed_to_checkout' ), 10 );xxxxxxxxxx1 1remove_action( 'woocommerce_proceed_to_checkout', array( $avada_woocommerce, 'proceed_to_checkout' ), 10 );View order form on my account page.
Copy to Clipboardremove_action( 'woocommerce_view_order', array( $avada_woocommerce, 'view_order' ), 10 );xxxxxxxxxx1 1remove_action( 'woocommerce_view_order', array( $avada_woocommerce, 'view_order' ), 10 );Thank you message on my account page.
Copy to Clipboardremove_action( 'woocommerce_thankyou', array( $avada_woocommerce, 'view_order' ) );xxxxxxxxxx1 1remove_action( 'woocommerce_thankyou', array( $avada_woocommerce, 'view_order' ) );

The Avada WooCommerce Builder – Cart

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 Cart page. See below for links to customizing the other main areas of WooCommerce, and watch the video below for a visual overview of the Cart building process.
The Avada WooCommerce Builder – ProductsThe Avada WooCommerce Builder – ShopThe Avada WooCommerce Builder – Checkout,OverviewNo Layout NeccesaryDesigning The Cart PageExample of a Custom Cart PageUsing Conditional Element Rendering For An Empty Cart,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 Cart page. When you install WooCommerce, Cart & Checkout pages are automatically created, and populated with their respective WooCommerce Shortcodes. All you have to do to create a custom Cart page in Avada, is to directly edit the assigned Cart page, remove the Woo Cart Shortcode, and start designing and building your page using your preferred interface of the Avada Builder, and your choice of Woo Cart and other Design Elements.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Designing The Cart PageUsing Avada Builder allows you to create any design you want for your WooCommerce Cart 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 four specific Woo Cart Elements – Woo Cart Coupons, Woo Cart Shipping, Woo Cart Table, and Woo Cart Totals, which together with the Woo Notices Element, recreate the standard WooCommerce cart functionality.
But the real magic of using the Avada WooCommerce Builder to build your Cart 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. It』s completely up to you.,Example of a Custom Cart PageBelow, you can see an example of a WooCommerce Cart Page in Wireframe view. There are two Containers, which both have Conditional Element Rendering applied to them. When the Cart is empty, the first Container displays, and when there are products in the cart, this Container does not render, and the second container, with all the Woo Cart Elements renders in its place.
On the front end, the page displays like this when there are products in the Cart.
And when the Cart is empty, it displays like this. Check it out on the live Avada Retail prebuilt site.,Using Conditional Element Rendering For An Empty CartWhen there are no products in the Cart, you will likely not want all your Cart Elements still displaying. The Avada Retail site above uses a second, conditional Container for when the cart is empty, and also uses dynamic content in the Page Title Bar. A simpler approach would be just to not render all the Cart Elements and display the The 「Cart is Empty」 notice. This notice comes from the Woo Cart Table Element, and can be customized in the Element options. So you still need that Element to display. But to remove the others, we now have Conditional Element Rendering in Avada. See the linked doc for more details of this new feature, which can be used in many ways, but in short, for this situation, we would just need to set conditions on the other Columns, with the Woo Cart Elements, to not display when the cart is empty. It would then display only the Cart is Empty notice, just as the default WooCommerce cart page does.
Just because a feature is available doesn』t mean you have to use it. You don』t have to create a custom Cart. The default Woo Shortcode works fine and presents a functional Cart page for your users. But using the Avada WooCommerce Builder allows you full control over your cart page, allowing you to use the power and flexibility of the Avada Builder to have full control over both the design and content of the Cart page. It』s all about choice, and with Avada, we like to offer our users as much choice as possible.

The Avada WooCommerce Builder – Checkout

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 Checkout page. See below for links to customizing the other main areas of WooCommerce, and watch the video below that for a visual oveview of the Checkout creation process.
The Avada WooCommerce Builder – ProductsThe Avada WooCommerce Builder – ShopThe Avada WooCommerce Builder – Cart,OverviewNo Layout NeccesaryDesigning The Checkout PageExample of a Custom Checkout 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 Checkout page. When you install WooCommerce, Cart & Checkout pages are automatically created, and populated with their respective WooCommerce Shortcodes. All you have to do to create a custom Checkout page in Avada, is to directly edit the assigned Checkout page, remove the Woo Ccheckout Shortcode, and start designing and building your page using your preferred interface of the Avada Builder, and your choice of Woo Checkout and other Design Elements.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Designing The Checkout PageUsing Avada Builder allows you to create any design you want for your WooCommerce Checkout 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. There are five specific Woo Checkout Elements, as seen in the screenshot below – Woo Checkout Billing, Woo Checkout Order Review, Woo Checkout Payment, Woo Checkout Shipping, and Woo Checkout Tabs. The Woo Checkout Tabs Element contains the functionality of the other four Elements in one, and works in the same way as the default WooCommerce Checkout template. It』s also a good idea to use the Woo Notices Element at the top of your Checkout page to display any notices on the front end.
If however, you』d like to build a one page checkout, or just want a different design, using the four individual Checkout Elements will achieve the same functionality as the Woo Checkout Tabs Element. But the real magic of using the Avada WooCommerce Builder to build your Checkout page is that you can add the 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 at the top, other Elements amongst the Woo ones, like the Title, Separator, or any other Elements that fit your circumstance and design ideas. It』s completely up to you.,Example of a Custom Checkout PageBelow, you can see an example of the Avada Retail Website WooCommerce Checkout Page in Wireframe view. Note how use has also been made of other Design Elements like Title, Nested Columns and Image Elements.
On the front end, the checkout page displays like this.

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

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

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

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.