Summary

Product Details template is used on the product pages for displaying information about a single product. The main control used on this template is Product Details control.

Usage

When a new product is added to a Products section (or Catalog) of the e-commerce website, a product page is created for it and the corresponding product page URL is generated. Usually site visitors can access these product pages by navigating the product links from the opened category on the Products template, in product sliders, by using a search etc. Product Details template is applied to each newly created product page automatically.

WordPress

Product Details template is enabled in a Wordpress theme if at least one product is added in Wordpress Dashboard >> Products >> Add Product.

To be reflected on the Product Details template, the main information about the product should be added in the corresponding fields such as its name, tags, categories the product should belong to, etc. Also important for presenting the product on the product page is illustrating it with an image (set Featured Image which will be output by the ) and optionally giving it a set of the gallery images (Product Gallery output by the Product Thumbnails control).

Other important product related data such as price, SKU, stock status etc. can be managed in the Product Data tab set (under the large product description field) and represented in the theme by the corresponding controls such as Product Price, Product Buy and others which make up the Product Details control.

Ability to add some specific product data (and to output it with the corresponding control) depends on the Product Type selected (Simple, Group, External/Affiliate or Variable). For example, for the Variable products, different Product Variations can be specified:

woocommerce-product-data.png

To learn more about each Product Type and different Product Data, please refer to the WooCommerce Documentation.

Note: To make the Product Details template available, WooCommerce plugin should be enabled in Wordpress back-end under Plugins >> Installed Plugins. If you are working in Themler Cloud, please make sure to have chosen a theme with WooCommerce support. If you start a new theme, "WooCommerce for Wordpress" option should be selected in Start for Free >> Select CMS.

Joomla

In Joomla the Product Details template is used for VirtueMart Product Details Layout. In order to enable this template, a product should be created in a category and linked to the corresponding menu item:

  1. Create a Product Category in Joomla administration >> VirtueMart (Components >> VirtueMart) >> Product Categories >> New and save it.

  2. Create a Product in Joomla administration >> VirtueMart (Components >> VirtueMart) >> Products and publish it.

  3. Add a new Menu Item and set the Menu Item Type as "VirtueMart >> Product Details Layout". Select the newly created Product in Required Settings >> Select a Product, to publish the item. Now the product is linked to the VirtueMart Product Details Layout menu item and the Product Details template is applied to this product page.

virtuemart-product-details-layout-item.png

Each VirtueMart product can contain various information to be displayed by the Product Details control. This information can be specified while creating or after the product is published, for this please navigate Joomla administration >> VirtueMart (Components >> VirtueMart) >> Products, select the product and open it for editing. All the information that needs to be displayed on the Product Details template can be specified here such as Product Name and SKU, Price, Description, its quantity in stock, image and gallery images, specifications, meta information for the corresponding product page, etc.

The predefined product details may depend on the way a product was added - as a regular, Child (which is derived from the Parent product) or Cloned product (a product duplication, without further dependencies):

virtuemart-new-product.png

Alternatively, a new child product can be added at a product level:

virtuemart-child-product.png

More details about ways to add products and specify product details can be found in the VirtueMart Documentation.

Note: Product Details template is available only if VirtueMart extension is installed in Joomla back-end and enabled in Extensions tab >> Extension Manager >> Manage. In case you are working in Themler Cloud, please make sure to have chosen a theme with VirtueMart support. By starting a new theme, in Start for Free >> Select CMS the "VirtueMart for Joomla!" option should be selected.

Magento

Magento product pages are generated once a new product is added to the Products section of the Catalog, and the Product Details template is applied to each of these pages (but for Complex (grouped) products, for which a single product page is created and a single template is applied). A new product can be added in Magento Admin Panel >> Catalog >> Manage Products by clicking the "Add Product" button in the top right corner, filling in the necessary fields and saving the product. Make sure to set the "Enabled" option for the product status so that it is present in your actual website.

Please note that unlike some other CMSs, for a new Magento Product such fields as Weight, Tax Class, both Description and Short Description are mandatory. So even if you do not want the weight to be displayed for a specific product, the field should be completed with "1" value.

Magento Documentation gives a quick reference on each of the options to be configured for individual products.

When creating a new product, you are supposed to specify the product type:

magento-product-type.png

The presence of some elements on the Product Details template depends on the product type used - for example, for the Configurable product, different variations are available, depending on the attributes added. So, the drop-down for the variations will be output in the Product Variations control:

magento-configurable-product.png

Learn more about Magento Product Types, and particularly about the Configurable and the Grouped product types in Magento knowledge base.

PrestaShop

In PrestaShop the Product Details template is applied to all pages of the Catalog Products. A new product page is generated after adding a new product via PrestaShop back-office >> Catalog tab >> Products >> Add New.

As mentioned, each product has its own product page with the Products Details template whether it is a default individual Product, Virtual Product or Product Pack (containing several existing products). The product type can be selected after clicking "Add new" from the Information tab on the left.

prestashop-product-types.png

Each product can have various information which can be specified while adding or editing the product, in the corresponding tabs like Information, Images, Associations, Quantities, etc. The only required information is the Product Name which should be defined in the Name field in the Information tab.

After the product is saved, several Product Combinations can be added. These are different versions of the same product based on the variety of colors, size, etc. Such property combinations are displayed by the Product Variations control on the same Product Details template.

prestashop-product-combinations.png

More information about configuring various product information, similar to using different product types, can be found in PrestaShop Documentation.

Sample

product-details-template-sample.png

See Also

Product Details control (eCommerce)
Products Template
Adding Products to wooCommerce Themes (video)

###Summary### **Product Details** template is used on the product pages for displaying information about a single product. The main control used on this template is [Product Details control](page:4776). ###Usage### When a new product is added to a Products section (or Catalog) of the e-commerce website, a **product page** is created for it and the corresponding product page URL is generated. Usually site visitors can access these product pages by navigating the product links from the opened category on the Products template, in product sliders, by using a search etc. **Product Details template** is applied to each newly created **product page** automatically. ####WordPress#### **Product Details template** is enabled in a Wordpress theme if at least one product is added in **Wordpress Dashboard** >> **Products** >> **Add Product**. To be reflected on the **Product Details template**, the main information about the product should be added in the corresponding fields such as its name, tags, categories the product should belong to, etc. Also important for presenting the product on the product page is illustrating it with an image (set **Featured Image** which will be output by the ) and optionally giving it a set of the gallery images (**Product Gallery** output by the Product Thumbnails control). Other important product related data such as price, SKU, stock status etc. can be managed in the **Product Data** tab set (under the large product description field) and represented in the theme by the corresponding controls such as Product Price, Product Buy and others which make up the [Product Details control](page:4776). Ability to add some specific product data (and to output it with the corresponding control) depends on the **Product Type** selected (Simple, Group, External/Affiliate or Variable). For example, for the Variable products, different **Product Variations** can be specified: !woocommerce-product-data.png! To learn more about each Product Type and different Product Data, please refer to the [WooCommerce Documentation][1]. **Note:** To make the **Product Details template** available, **WooCommerce plugin** should be enabled in Wordpress back-end under **Plugins** >> **Installed Plugins**. If you are working in **Themler Cloud**, please make sure to have chosen a theme with WooCommerce support. If you start a new theme, **"WooCommerce for Wordpress"** option should be selected in **Start for Free** >> **Select CMS**. ####Joomla#### In Joomla the **Product Details template** is used for **VirtueMart Product Details Layout**. In order to enable this template, a product should be created in a category and linked to the corresponding menu item: 1. Create a **Product Category** in **Joomla administration** >> **VirtueMart** **(Components** >> **VirtueMart)** >> **Product Categories** >> **New** and save it. 2. Create a **Product** in **Joomla administration** >> **VirtueMart (Components** >> **VirtueMart)** >> **Products** and publish it. 3. Add a new **Menu Item** and set the **Menu Item Type** as **"VirtueMart >> Product Details Layout"**. Select the newly created **Product** in **Required Settings** >> **Select a Product**, to publish the item. Now the product is linked to the **VirtueMart Product Details Layout** menu item and the **Product Details template** is applied to this product page. !virtuemart-product-details-layout-item.png! Each VirtueMart product can contain various information to be displayed by the [Product Details control](page:4776). This information can be specified while creating or after the product is published, for this please navigate **Joomla administration** >> **VirtueMart (Components** >> **VirtueMart)** >> **Products**, select the product and open it for editing. All the information that needs to be displayed on the **Product Details template** can be specified here such as Product Name and SKU, Price, Description, its quantity in stock, image and gallery images, specifications, meta information for the corresponding product page, etc. The predefined product details may depend on the way a product was added - as a regular, Child (which is derived from the Parent product) or Cloned product (a product duplication, without further dependencies): !virtuemart-new-product.png! Alternatively, a new child product can be added at a product level: !virtuemart-child-product.png! More details about ways to add products and specify product details can be found in the [VirtueMart Documentation][2]. **Note:** **Product Details template** is available only if **VirtueMart extension** is installed in Joomla back-end and enabled in **Extensions tab** >> **Extension Manager** >> **Manage**. In case you are working in **Themler Cloud**, please make sure to have chosen a theme with VirtueMart support. By starting a new theme, in **Start for Free** >> **Select CMS** the **"VirtueMart for Joomla!"** option should be selected. ####Magento#### Magento product pages are generated once a new product is added to the Products section of the Catalog, and the **Product Details template** is applied to each of these pages (but for **Complex (grouped) products**, for which a single product page is created and a single template is applied). A new product can be added in **Magento Admin Panel** >> **Catalog** >> **Manage Products** by clicking the **"Add Product"** button in the top right corner, filling in the necessary fields and saving the product. Make sure to set the **"Enabled"** option for the product status so that it is present in your actual website. Please note that unlike some other CMSs, for a new Magento Product such fields as Weight, Tax Class, both Description and Short Description are mandatory. So even if you do not want the weight to be displayed for a specific product, the field should be completed with **"1"** value. [Magento Documentation][3] gives a quick reference on each of the options to be configured for individual products. When creating a new product, you are supposed to specify the **product type**: !magento-product-type.png! The presence of some elements on the **Product Details template** depends on the product type used - for example, for the Configurable product, different variations are available, depending on the attributes added. So, the drop-down for the variations will be output in the **Product Variations** control: !magento-configurable-product.png! Learn more about [Magento Product Types][4], and particularly about the [Configurable][5] and the [Grouped][6] product types in Magento knowledge base. ####PrestaShop#### In PrestaShop the **Product Details template** is applied to all pages of the Catalog Products. A new product page is generated after adding a new product via **PrestaShop back-office** >> **Catalog tab** >> **Products** >> **Add New**. As mentioned, each product has its own product page with the **Products Details template** whether it is a default individual **Product**, **Virtual Product** or **Product Pack** (containing several existing products). The product type can be selected after clicking **"Add new"** from the **Information** tab on the left. !prestashop-product-types.png! Each product can have various information which can be specified while adding or editing the product, in the corresponding tabs like **Information**, **Images**, **Associations**, **Quantities**, etc. The only required information is the **Product Name** which should be defined in the **Name** field in the **Information tab**. After the product is saved, several **Product Combinations** can be added. These are different versions of the same product based on the variety of colors, size, etc. Such property combinations are displayed by the **Product Variations** control on the same **Product Details template**. !prestashop-product-combinations.png! More information about configuring various product information, similar to using different product types, can be found in [PrestaShop Documentation][7]. ####Sample#### !product-details-template-sample.png! ####See Also#### [Product Details control (eCommerce)](page:4776) [Products Template](page:5678) [Adding Products to wooCommerce Themes (video)](page:3879) [1]: http://docs.woothemes.com/document/managing-products/ [2]: http://docs.virtuemart.net/manual/products-menu/product.html [3]: http://www.magentocommerce.com/knowledge-base/entry/tutorial-creating-products [4]: http://www.magentocommerce.com/wiki/modules_reference/english/mage_adminhtml/catalog_product/producttype [5]: http://www.magentocommerce.com/knowledge-base/entry/tutorial-creating-a-configurable-product [6]: http://www.magentocommerce.com/knowledge-base/entry/tutorial-creating-a-grouped-product [7]: http://doc.prestashop.com/display/PS15/Adding+Products+and+Product+Categories#AddingProductsandProductCategories-ManagingandAddingProductsintheCatalog