Summary

  • Overview
  • Current Product Element
  • Add Product Sub-Elements
  • Product Image
  • Product Title
  • Product Text
  • Product Description
  • Product Price
  • Product Old Price
  • Product Button
  • Product Image Gallery
  • Product Variations
  • Product Quantity
  • Product Tabs
  • Product SKU

Overview

You can add the Product Sub-Elements to the Product List, Product Details Elements in the Block, and Product List and Product Details Templates in the Theme.

Current Product Element

Like many other complex elements, for example, the Contact Form, we highlight the current Product Element on top of the Add Panel. It makes the adding of the Product Sub-Elements fast and easy.

product-list-reworked.png

Add Product Sub-Elements

Add the Product Sub-Elements by clicking the Add option to the Side Panel of the Product List and Product Details Elements. You can also use the Add Icons on the Context Toolbar.

context-add-icons.png

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 Description

Use the Product Description Sub-Element to describe a product prioritized by multiple user votes. You can add the Product Description to the Product Details Template and Element. You can export the new Product Description to HTML, WordPress, Joomla, and Online Builder.

product-description.png

You can edit the value of the Product Description in the Product dialog.

product-description-edit.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

Show Product Price With Cents

If there are 0 cents for the Product Price, like $17, you can show zeros, like $17.00, by enabling the Show Zeros In Cents option in the Property Panel for design consistency.

If you have prices with cents, like $16.95, they will always be shown regardless of the property.

price-cents.png

Product Old Price

You can show the Old Price in the Property Panel.

product-old-price.png

There is also an option as a separate Sub-Element.

old-price-property.png

Old Price Position

You can change the position of the Old Price in the Price Sub-Element, showing it left or right of the Price.

old-price-position.png

Old Price Styles

You can edit the Font Styles and specify the distance between the prices in the product details.

old-price-strikethrough.png

Product Button

Add the Product Price Element to show your product's "Add to Cart" button. 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, you will see all 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 the Buttons for 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

Product SKU Element

You can show the Product SKU Sub-Element on Product Elements and Pages.

sku-sub-element.png

We support the Product SKU Sub-Element value output from WooCommerce in WordPress and VirtueMart in Joomla.

sku-wp-joomla.png

## Summary - Overview - Current Product Element - Add Product Sub-Elements - Product Image - Product Title - Product Text - Product Description - Product Price - Product Old Price - Product Button - Product Image Gallery - Product Variations - Product Quantity - Product Tabs - Product SKU ## Overview You can add the Product Sub-Elements to the Product List, Product Details Elements in the Block, and Product List and Product Details Templates in the Theme. ## Current Product Element Like many other complex elements, for example, the Contact Form, we highlight the current Product Element on top of the Add Panel. It makes the adding of the Product Sub-Elements fast and easy. !product-list-reworked.png! ## Add Product Sub-Elements Add the Product Sub-Elements by clicking the Add option to the Side Panel of the Product List and Product Details Elements. You can also use the Add Icons on the Context Toolbar. !context-add-icons.png! ## 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 Description Use the **Product Description** Sub-Element to describe a product prioritized by multiple user votes. You can add the Product Description to the Product Details Template and Element. You can export the new Product Description to HTML, WordPress, Joomla, and Online Builder. !product-description.png! You can edit the value of the Product Description in the Product dialog. !product-description-edit.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! ### Show Product Price With Cents If there are 0 cents for the Product Price, like $17, you can show zeros, like $17.00, by enabling the Show Zeros In Cents option in the Property Panel for design consistency. If you have prices with cents, like $16.95, they will always be shown regardless of the property. !price-cents.png! ## Product Old Price You can show the **Old Price** in the Property Panel. !product-old-price.png! There is also an option as a separate Sub-Element. !old-price-property.png! ### Old Price Position You can change the position of the Old Price in the Price Sub-Element, showing it left or right of the Price. !old-price-position.png! ### Old Price Styles You can edit the Font Styles and specify the distance between the prices in the product details. !old-price-strikethrough.png! ## Product Button Add the Product Price Element to show your product's "Add to Cart" button. 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, you will see all 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 the Buttons for 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! ## Product SKU Element You can show the Product SKU Sub-Element on Product Elements and Pages. !sku-sub-element.png! We support the Product SKU Sub-Element value output from WooCommerce in WordPress and VirtueMart in Joomla. !sku-wp-joomla.png! ##