How To Use WooCommerce With Avada

Last Update: March 7, 2023

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.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Install WooCommerce

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

Install WooCommerce Plugin

How To Assign Your Shop Page

As part of the normal WooCommerce installation process, the WooCommerce 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.

WooCommerce Setup Wizard Prompt

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.

WooCommerce - Set Main Shop Page

The remaining pages can be set up under the Advanced Tab – WooCommerce > Settings > Advanced.

WooCommerce - Set Other Pages

How To Create Your Products

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

Product Creation Overview

How To Adjust WooCommerce Product Image Size Settings

WooCommerce 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 4Main 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