Install & Setup WooCommerce

04/05/2017

Avada is compatible with WooCommerce and includes full design integration as well as custom shortcodes. To get started with creating your online shop, you need to install the free WooCommerce Plugin. This documentation on using WooCommerce is the very basic information you need to get started. Please take a look at the important links below that have additional information about using WooCommerce.

IMPORTANT NOTE
If you’ve imported one of our WooCommerce demos, such as the Modern Shop or Classic Shop, then you can safely skip the Woo Onboarding Wizard process because our demo importer will handle that setup for you. To skip the Woo Onboarding Wizard process, simply click the ‘Not Right Now’ button.

How To Install WooCommerce

Step 1 – Go to Avada > Plugins and locate the WooCommerce plugin.

Step 2 – Click the ‘Install’ button.

Step 3 – Once it’s finished installing, click the ‘Return to Required Plugins Installer’ link. Find the WooCommerce plugin again then click the ‘Activate’ button.

Step 4 – After activating the plugin, the WooCommerce Onboarding Wizard setup will 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 5 – 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 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

IMPORTANT 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 > Theme 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 Settings

WooCommerce includes settings to change the size of product images for Catalog images, Single Product images and 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 theme 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 frontend 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 ‘WooCommerce’ tab on your admin sidebar, and select the ‘Settings’ tab.
  • Step 2 – Click on the ‘Products’ tab at the top of the page. Directly below those menu tabs, switch to the ‘Display’ tab.
  • Step 3 – Under the ‘Product Images’ section, you will find the Catalog Images, Single Product Images, and Product Thumbnails options.
  • Step 4 – Catalog Image is for your images on the shop page and for shortcodes. Single Product Image is for your images on the single product pages. 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 below for details on image sizes and setup.
  • Step 5 – When you make changes to the 3 various 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 WP Admin > 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 WP Admin > 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.
44 Likes
Proudly Serving Over 390000 Satisfied Users!