Woo Product Images Element

09/01/2023

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements.

In Avada 7.2, as part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Product Images Element.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

View The Element Demo Page!

How To Use The Woo Product Images Element

The Woo Product Images Element is used to display any images attached to your WooCommerce products. This can be a single image, or multiple. There are numerous options for thumbnails, columns, sale badges and layouts. See below for a full list of Element options.

868,152 Businesses Trust Avada

Get Avada

868,152 Businesses Trust Avada

Get Avada

868,152 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General Tab

Product Images Layout – Set the layout for your product images. Choose from Default, Avada, or WooCommerce.
Product Images Zoom – Turn on to enable the WooCommerce product images zoom feature. IMPORTANT NOTE: Every product image you use must be larger than the product images container for zoom to work correctly. See this post for more information.
Element Visibility – Allows you to control the Element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
CSS Class – Allows you to add a class for the Element.
CSS ID – Allows you to add an ID for the Element.

View The Options Screen

Design Tab

Product Images Max Width – Controls the max width of the single product page image gallery. For the image gallery zoom feature to work, the images you upload must be larger than the gallery size you select for this option. IMPORTANT NOTE: When this option is changed, you may need to adjust the Single Product Image size setting in WooCommerce Settings to make sure that one is larger and also regenerate thumbnails. See this post for more information.
Product Images Thumbnail Position – Set the position of the product images thumbnails with respect to the gallery images. Choose from Default, Top, Right, Bottom, or Left.
Product Images Thumbnails – Controls the number of columns of the product images thumbnails. In order to avoid blurry thumbnails, make sure the Product Thumbnails size setting in WooCommerce Settings is large enough. It has to be at least WooCommerce Product Gallery Size setting divided by this number of columns.
Product Images Thumbnail Column Width – Controls the width of the left/right column of product images thumbnails as a percentage of the full gallery width.
Display Sale Badge – Turn on to enable the WooCommerce sake badge.
Margin – In pixels or percentage, ex: 10px or 10%.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the Element. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the Element. Choose between 0.1 to 1.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.