How to build an eCommerce with Avada WooCommerce builder

When it comes to setting up an online store, WooCommerce is the go-to plugin. It is ridiculously simple to set up an online store and begin selling your products as soon as you are finished. Avada provides comprehensive support and design integration for WooCommerce, allowing you to create the shop of your dreams while also ensuring it looks exactly the frame you have in mind. 

Avada is all about giving you the ability to customize your website’s appearance, which is no different with WooCommerce integration. Using our popular advanced options network, you can select from a wide range of customizations for a variety of design possibilities, including:

• WooCommerce has its own Avada Global Options Panel, separate from the main Avada Global Options Panel.
• Avada Page Options are available for each product.
• Avada Builder allows you to create product page designs by dragging and dropping elements.

To build your eCommerce site with Avada. 

First up, we must install wooCommerce in Avada.

• Installing WooCommerce – Step by Step Instructions
• How to Assign a Shop Page to Your Website
• Creating Your Products
• Creating product Zoom Effect
• Adjusting Product Image Size Settings in WooCommerce.

Installing WooCommerce – Step by Step Instructions

Go to Avada > Plugins / Add-ons and look for the WooCommerce plugin, as shown in the screenshot below. 

Step 1 – Install the WooCommerce plugin.

Step 2 – Select ‘Install’ from the drop-down menu.

The plugin will be installed and activated automatically.

Step 3 – After that, the WooCommerce Setup Wizard should be displayed. If you’re importing one of our Woo demos, such as Modern Shop or Classic Shop, you can skip this step without the risk of losing your data. To skip ahead, select ‘Not Right Now’ from the drop-down menu. If you are not importing one of our Woo demos, then proceed to the next step by clicking the ‘Let’s Go!’ button to begin the setup process.

Step 4 – Follow the onscreen prompts and instructions to complete the process and enter the necessary information about your store. By clicking the ‘Create Your First Product’ button when you are finished, you will be able to proceed to create your first product. Alternatively, you can return to your WordPress Dashboard by clicking the link located below the setup window.

How to Assign a Shop Page to Your Website

As part of the normal WooCommerce installation process, the Setup Wizard should be launched, allowing you to configure your shop and assign your shop pages to customers. More information on the pages that the Setup Wizard creates can be found in this WooCommerce document.

Alternatively, if the Setup Wizard does not appear, or if you cancel it for any reason, you can always return to the Setup Wizard by selecting Setup Wizard from the Help menu on any WooCommerce page, which can be found at the top left of the window.

You can manually set the shop page by going to the Products tab in the WooCommerce Settings – WooCommerce > Settings > Products – and selecting the page that will be the main shop page from the drop-down menu. WooCommerce will then display your products on this page as a result of your action.

The remaining pages can be configured in the Advanced Tab, found at WooCommerce > Settings > Advanced.

Creating Your Products

Step 1 – On your WordPress Admin sidebar, navigate to the Products > Add Product tab.

Step 2 – At the top of the page, enter the name of your product.

Step 3 – Fill out the post content field with the text from the product description. All of the product information will be displayed in this section.

Step 4 – Fill out the ‘Product Data‘ box with all of the product information. For example, price, SKU, and shipping are all possible options.

Step 5 – In the ‘Product Short Description‘ box, type a succinct description of your product that will appear alongside your main images.

Step 6 –The main featured image should be placed under the ‘Product Image‘ box on the right-hand side of the page; This must be completed for every product.

Step 7 –Add more images to the ‘Product Gallery‘ box if you want to use a gallery of images instead of a single image.

Step 8 – In the ‘Product Categories‘ box, enter the categories that apply to your products. Next, fill the blanks with the appropriate tags for your product in the ‘Product Tags‘ box.

Step 9 – Once you’ve entered all of the necessary information, click on the ‘Publish‘ button, and the item will appear on your main storefront page.

Creating product Zoom Effect

If you’re using Avada Layouts, you’ll need to make sure that the WooCommerce Product Images Zoom option is enabled in Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Zoom option, or in the Woo Product Images Element General tab > Product Images Zoom if you’re using WooCommerce 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. The width of the container column for a single product gallery will be determined by the settings you choose. Once you’ve made the necessary adjustments, you’ll be ready to set the width of your WooCommerce main image.

WordPress Main Image Width – The WooCommerce Main Image Width setting can be found in the Customizer of your WordPress website. From the WordPress dashboard, navigate to Appearance > Customize > WooCommerce > Product Images, where you will find the Main Image Width setting; This will determine the actual size of the image displayed in the gallery.

The more detailed your zoom effect will be, the larger the image size you have set for your image. To clarify, if the image size in WooCommerce settings matches the image width in Avada’s global options, no zooming will be visible when the mouse hovers over the image on the page. Additionally, the size of the actual image you upload must be the same as or larger than the Main Image Width setting on your website’s design.

Ensure that you regenerate your thumbnails after changing the WooCommerce image sizes; This will apply your new image sizes to any images that have already been uploaded to your website. You can use the Regenerate Thumbnails plugin to accomplish this.

Adjusting Product Image Size Settings in WooCommerce.

WooCommerce includes options for adjusting the size of product images in the store’s Catalog and Single Product images sections. In addition, there are specific Avada settings that work in conjunction with the image sizes used by your WooCommerce store. When configuring these image size settings, it’s important to remember that the Avada global options settings must also be considered. We’ll go over each of these options in greater detail later on.

Suppose the images you upload for your products are smaller at the source than the image sizes specified in your WooCommerce settings. In that case, you may notice some visual layout discrepancies on the front-end of your shop pages; This is not a bug in any way. It is simply because your images were too small for the WooCommerce settings to impact them. You can think of these settings as the maximum width and height for your images in terms of image dimensions. Anything that falls below the specified limit will not be resized.

When configuring your shop, make certain that both the WooCommerce image size settings and the actual size of your images are taken into consideration. In summary, your images should be the same size as or larger than the image size settings in your WooCommerce store.

Any changes to your image size settings will require you to regenerate your thumbnails for them to take effect on images that have already been uploaded to your site. Therefore, using the Regenerate Thumbnails plugin is highly recommended. In addition, image sizes can be adjusted using the steps below:

Step 1 – In your admin sidebar, navigate the ‘Appearance‘ tab and then the ‘Customize‘ tab to begin customizing your site.

Step 2 – Navigate to the ‘WooCommerce‘ tab at the top of the page.

Step 3 – The Images setting for Single Product Images can be found under the configuration window’s ‘Product Images‘ tab.

Step 4 – When you upload images to your single product pages, select the main image width option. Thumbnail width is the width of the thumbnails for your products in the catalog. Fill in the blanks with your desired width value. 

Step 5 –To regenerate thumbnails after you have changed the image sizes and saved them, you will need to use the Regenerate Thumbnails plugin, which can be found in the Plugins section. First, install the Regenerate Thumbnails plugin and then navigate to the WP Admin > Tools tab, where you can choose to regenerate your image thumbnails, creating the new image sizes.