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『.
Author 诗语
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.
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『.
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.
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
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' ) );
Sticky Sidebars
With Avada 5.2 and up, you have the option to enable sticky sidebars on your Avada website. When the Sticky Sidebar is enabled, the sidebar will scroll with the content as the viewer moves down the page. Once the bottom of the sidebar enters the viewport, it will become stationary and stay in place as the viewer scrolls down to the bottom. If the sidebar is already shorter than the content of the page, it will begin as a sticky sidebar and remain fixed on the screen as the viewer scrolls down the page.
For more information on Widgets Sections and Sidebars in Avada, see our post on Assigning Widget Areas to Sidebars.
Enabling Sticky Sidebars Site WideYou can enable the Sticky Sidebar feature for all sidebars on your site globally, through the Avada Global Options. You』ll find this setting in Avada > Options > Sidebars > Sidebar Styling. You can enable the Sticky Sidebar effect for 「Sidebar 1」, 「Sidebar 2」 or select 「Both」 to have the effect on both right and left sidebars when using a dual sidebar layout.
Enabling Sticky Sidebars Per Post or PageIf you want to have a variation for a post or page from how your site』s sidebar behaves globally, you can use the Avada Page options to make adjustments that will affect only that post/page. These settings will override whatever you have set in your global options.
To find these settings, open the editor of the post or page you』re working on, and then navigate to the Avada Page Options (at the bottom of the page with Avada Builder, and in the Sidebar in Avada Live). Check under the Sidebar tab to find the Sidebar』s settings.
Select Sidebar 1: This setting is where you can choose which Widget Area to assign to the page』s sidebar. Details on the differences between Widgets and Widget Areas can be found here.Select Sidebar 2: This is optional and can be used to select the Widget Area for your page』s second sidebar, if you』re doing a dual sidebar layout.Sidebar 1 Position: This is where you can select the position of the primary sidebar. Choose between Left, Right or Default which will use your Global Options setting.Sticky Sidebars: This is where you can select which Sidebars on the page will be sticky when scrolling. Choose None if you want to have your sidebar(s) behave normally. Choose Default if you want to have the global behavior as set in the Global Options. Choose between Sidebar 1 or Sidebar 2 to be sticky respectively. Choose Both for both sidebars in a dual sidebar layout to be sticky.
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
Avada Widget Options
Widgets can be styled via the 『Avada Widget Options』 button and can be applied to every widget available. Please continue reading below to know more about the widget styling options.
IMPORTANT NOTE: When using the new Widget Element, the Design tab contains the equivilant options. See more on the Widget Element doc.How To Use Avada Widgets OptionsStep 1 – Navigate to the Appearance > Widgets section.
Step 2 – Simply drag and drop the widget you』d like to add into your chosen widget area. Another way of adding widgets to widget area is by clicking the widget and choosing from the list of the widget areas that will show up. Then, just click Add Widget button.
Step 3 – Click the 『Avada Widget Options』 button. Every widget available has this 『Avada Widget Options』 button, see an example of the Recent Comments widget on the screenshot below. Please refer to the below post to know more about each of the options.
Step 4 – Make the necessary selections. Then, click 『Save』 button.
Step 5 – Don』t forget to save the widget too.
Avada Widget OptionsIMPORTANT NOTE: These options apply to the widget container, not the actual widget.Display Widget Title – Choose to enable or disable the widget title. Specifically useful for the WordPress default widget titles.
Padding – Controls the padding for the widget container.
Margin – Controls the margins for the widget container.
Background Color – Controls the background color for the widget container.
Background Radius – Controls the background radius for the widget container.
Border Size – Controls the border size for the widget container.
Border Style – Controls the border style for the widget container. Choose between None, Solid, Dotted, or Dashed.
Border Color – Controls the border color for the widget container.
Divider Color – Controls the color of dividers in this widget container. Leave empty for the Theme Options default value or no dividers when using the vertical menu widget.
Content Align – Controls the content alignment for the widget container. Choose between Inherit, Left, Right, or Center. Inherit means it will inherit alignment from its parent element.
Mobile Content Align – Controls the mobile content alignment for the widget container. Choose between Inherit, Left, Right, or Center. Inherit means it will inherit alignment from it』s parent element.
Learn More About Widgets Here
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.