Avada 文档

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 – 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.

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’ ) );

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.

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.

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.