Summary

  • Overview
  • Product Image
  • Product Title
  • Product Text
  • Product Price
    • Product Old Price
  • Product Button
    • Product Button Options
  • Product Image Gallery
    • Zoom Effect for Product Image Gallery
    • Product Image Gallery Layout
    • Product Image Hover Animation
  • Product Variations
  • Product Quantity
    • Product Quantity Icons
  • Product Tabs

Product Elements Overview

Add the following Product Elements to the Product List, and Product Details Elements in the Block, and Product List and Product Details Templates in the Theme.

Product Image

Add the Product Image Element to show the primary product image. Use in the Product List and Product Details Elements.

product-image.png

Product Title

Add the Product Title Element to show the Title of your Product. Use in the Product List and Product Details Elements.

product-title.png

Product Text

Add the Product Text Element to show a short description of your product. Use in the Product List and Product Details Elements.

product-text.png

Product Price

Add the Product Price Element to show the price of your product. Use in the Product List and Product Details Elements.

product-price.png

Product Old Price

You can also enable displaying of the Old Price. The old price is shown strikethrough.

product-old-price.png

Product Button

Add the Product Price Element to show the "Add to Cart" button for your product. Use in the Product List and Product Details Elements.

product-button.png

Product Button Options

For the Product Button, there are options to open either the Product Page or add a Product to the Shopping Cart.

add-to-cart-button.png

Product Image Gallery

Add the Product Image Gallery Element to show the product images as the Image Gallery, Image Slider, or Image Gallery with Thumbnails. Use in the Product Details Element.

product-image-gallery.png

Zoom Effect for Product Image Gallery

Enable this property to enlarge the Product Image to review the details. Use on the Thumbnail and Carousel Layout of the Product Image Gallery.

release-product-image-gallery-zoom-effect.png

The example of the Zoom Effect:

release-product-image-gallery-zoom-effect.gif

Product Image Gallery Layout

Switch the Layout for the Product Image Gallery - Image Gallery, Gallery with Thumbnails, and Slider.

product-gallery-layout.gif

Product Image Hover Animation

In the Product Image Gallery Layout, apply the Hover Animation similar to any other Image Gallery.

product-gallery-hove-animation.gif

Product Variations

Add the Product Variations Element. If a Product has several variations, then you will see all of those in one Element. Use in the Product Details Element.

product-variations.png

Product Quantity

Add the Product Quantity Element to show the field used to increase and decrease the ordered quantity of Products. Use in the Product Details Element.

product-quantity.png

Product Quantity Icons

You can use the Product Quantity Element with and without buttons. You can also choose which Buttons to use with the Product Quantity Element.

product-quantity-icons.png

Product Tabs

Add the Product Tab Element to display the Product Description and Reviews as tabs on the Product Details Template for online stores built on WooCommerce and VirtueMart. Use in the Product Details Element.

release-product-tabs.png

## Summary - Overview - Product Image - Product Title - Product Text - Product Price - Product Old Price - Product Button - Product Button Options - Product Image Gallery - Zoom Effect for Product Image Gallery - Product Image Gallery Layout - Product Image Hover Animation - Product Variations - Product Quantity - Product Quantity Icons - Product Tabs ## Product Elements Overview Add the following Product Elements to the Product List, and Product Details Elements in the Block, and Product List and Product Details Templates in the Theme. ## Product Image Add the Product Image Element to show the primary product image. Use in the Product List and Product Details Elements. !product-image.png! ## Product Title Add the Product Title Element to show the Title of your Product. Use in the Product List and Product Details Elements. !product-title.png! ## Product Text Add the Product Text Element to show a short description of your product. Use in the Product List and Product Details Elements. !product-text.png! ## Product Price Add the Product Price Element to show the price of your product. Use in the Product List and Product Details Elements. !product-price.png! ### Product Old Price You can also enable displaying of the Old Price. The old price is shown strikethrough. !product-old-price.png! ## Product Button Add the Product Price Element to show the "Add to Cart" button for your product. Use in the Product List and Product Details Elements. !product-button.png! ### Product Button Options For the Product Button, there are options to open either the Product Page or add a Product to the Shopping Cart. !add-to-cart-button.png! ## Product Image Gallery Add the Product Image Gallery Element to show the product images as the Image Gallery, Image Slider, or Image Gallery with Thumbnails. Use in the Product Details Element. !product-image-gallery.png! ### Zoom Effect for Product Image Gallery Enable this property to enlarge the Product Image to review the details. Use on the Thumbnail and Carousel Layout of the Product Image Gallery. !release-product-image-gallery-zoom-effect.png! The example of the Zoom Effect: !release-product-image-gallery-zoom-effect.gif! ### Product Image Gallery Layout Switch the Layout for the Product Image Gallery - Image Gallery, Gallery with Thumbnails, and Slider. !product-gallery-layout.gif! ### Product Image Hover Animation In the Product Image Gallery Layout, apply the Hover Animation similar to any other [Image Gallery](page:98179). !product-gallery-hove-animation.gif! ## Product Variations Add the Product Variations Element. If a Product has several variations, then you will see all of those in one Element. Use in the Product Details Element. !product-variations.png! ## Product Quantity Add the Product Quantity Element to show the field used to increase and decrease the ordered quantity of Products. Use in the Product Details Element. !product-quantity.png! ### Product Quantity Icons You can use the Product Quantity Element with and without buttons. You can also choose which Buttons to use with the Product Quantity Element. !product-quantity-icons.png! ## Product Tabs Add the Product Tab Element to display the Product Description and Reviews as tabs on the Product Details Template for online stores built on WooCommerce and VirtueMart. Use in the Product Details Element. !release-product-tabs.png! ##