Summary

The Products template is used to show the grid of all products or subcategories in e-commerce themes. The main control used on this template is Products.

Usage

WordPress

By default, in Wordpress themes the Products template is used for the WooCommerce Shop page. However, this template can be used on any other page, that is set up as Shop Base Page in Wordpress Dashboard >> WooCommerce >> Settings >> Pages >> Page Setup >> Shop Base Page. Only a single page can use the Products template at once.

woocommerce-shop-base-page.png

The grid is represented by the products catalog by default. Still, it is possible to define what will be displayed in the grid on this page: for this please go to Wordpress Dashboard >> WooCommerce >> Settings >> Catalog >> Catalog Options >> Shop Page Display and select whether to show products, subcategories, or both.

To be shown on the Products template, products should be added via Wordpress Dashboard >> Products >> Add Product and saved.

Categories and subcategories can be added and managed in Wordpress Dashboard >> Products >> Categories. A single product can belong to one or several categories; this can be specified in Products >> [select a product to edit] >> Edit Product >> Product Categories.

Usually not all possible information about the product can be displayed on the Products template, but only the necessary data that customers will see by viewing the catalog (such as Product Name, Price, SKU, Thumbnail Image, a short description etc.) is shown. In the Catalog tab of WooCommerce settings these fields can be selected, and different parameters for product data, pricing options and images to display in the Products control for this template can be specified.

Note: To make the Products template available, WooCommerce plugin should be enabled in the 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, the "WooCommerce for Wordpress" option should be selected in Start for Free >> Select CMS.

Joomla

In Joomla themes, the Products template is used for a VirtueMart Category Layout item. So, to turn on the Products template in Joomla, this item should be created in the menu and product category/categories should be linked to it. Please follow these sample steps:

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

  2. Create one or several Products in Joomla administration >> VirtueMart (Components >> VirtueMart) >> Products, add select different product parameters (such as Product Name, Price) and specify the Category that the product should belong to, and then publish the Products.

  3. Add a new Menu Item into a new or existing Menu and set the Menu Item Type as "VirtueMart >> Category Layout". Select the newly created Product Category in Required Settings >> Select a Category. This will link the category to the VirtueMart Category Layout menu item so that all of the products from this category are displayed on the Products template.

virtuemart-category-layout-item.png

Main options for the Products and Categories displaying on the Products template can be specified in Joomla administration >> VirtueMart (Components >> VirtueMart) >> VirtueMart Configuration in the Shopfront tab and Templates tab >> Shopfront Settings. Particularly, in the second section, it is possible to select whether to display subcategories ("Show Children Category" option) and a number of products and categories in a row, to be shown in the Products control on this template.

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

Magento

Products template is applied to the Catalog pages in Magento themes. On these pages the products are listed when the corresponding product category is selected (from the Categories block in the Left Sidebar or from the Horizontal menu if it is present in the template). To configure the Catalog system settings, in Magento Admin Panel please navigate System tab >> Configuration >> Catalog. You will be able to define how your products will be shown in the front-end’s Catalog pages (a number of products per page, list mode etc.) and set up other defaults.

To add categories to your Catalog:

  1. Please navigate Magento Admin Panel >> Catalog >> Manage Categories and add a new category as a subcategory to the "Root Catalog (0)" category. The second-level categories can be added to the existing categories by following the hierarchy: Root Catalog (0) >> Parent category >> Child category.

  2. Set the category to be displayed in menu by selecting "Include in Navigation Menu" >> Yes.

  3. Set the category to be active on the website ("Is Active" >> "Yes"), and save.

A category should contain at least one product otherwise it cannot be displayed in the menu, and the corresponding Products template cannot be opened. Products can be put into the category via Magento Admin Panel >> Catalog tab >> Manage Products. Add a new product or open an existing one for editing, then select the Categories section and check one or several categories to associate the product with, then save the changes.

Products can also be assigned to a category at the category level, by selecting Magento Admin Panel >> Catalog tab >> Manage Categories:

  1. Open a category for editing and navigate the Category Products tab.

  2. In the drop-down list at the top left corner of the grid select either "No" to display products not assigned to this category or "Any" to display all products.

magento-category-products.png

3.Check more products to assign them to this category and click the "Save Category" button.

PrestaShop

In PrestaShop the Products template is applied to Catalog pages which contain products and categories. These pages are accessible via Categories block in Hook Left Column or by using the Horizontal menu.

Product Categories can be added and managed in PrestaShop back-office >> Catalog tab >> Categories. New categories should be added as subcategories of the root category "Home". They are not actually root categories though, so the radio button next to the "Root Category" option in the category specifications should be set to "No". Enable the "Displayed" option so that the category is visible for the customers on the site front-end:

prestashop-new-category.png

Even though they aren't root categories, these categories do serve as first-level categories in your Catalog and can have subcategories under them.

To be displayed on the Products template, products should be added and assigned to the categories. For this:

  1. Add a new product via PrestaShop back-office >> Catalog tab >> Products >> Add New.
  2. Mark a category or categories the product will belong to in the Associations tab of the product details. You may wish to create a new category here, by clicking the "Create new category" button; this will take you to the Categories section of the Catalog tab, then please follow the standard procedure of creating a category.

Specify the main options for displaying products in the grid on the Products template in the Preferences tab >> Products. The "Catalog mode" option should be disabled unless you want customers only to review products but not to buy them. If the option is on, all shopping features will be disabled, and the Products and Product Details controls will serve for information purposes only.

Sample

products-template-sample.png

See Also

Products control
Product details template
Adding Products to wooCommerce Themes (video)

###Summary### The Products template is used to show the grid of all products or subcategories in e-commerce themes. The main control used on this template is [Products](page:4778). ###Usage### ####WordPress#### By default, in Wordpress themes the **Products template** is used for the WooCommerce **Shop** page. However, this template can be used on any other page, that is set up as **Shop Base Page** in **Wordpress Dashboard** >> **WooCommerce** >> **Settings** >> **Pages** >> **Page Setup** >> **Shop Base Page**. Only a single page can use the **Products template** at once. !woocommerce-shop-base-page.png! The grid is represented by the products catalog by default. Still, it is possible to define what will be displayed in the grid on this page: for this please go to **Wordpress Dashboard** >> **WooCommerce** >> **Settings** >> **Catalog** >> **Catalog Options** >> **Shop Page Display** and select whether to show products, subcategories, or both. To be shown on the **Products template**, products should be added via **Wordpress Dashboard** >> **Products** >> **Add Product** and saved. Categories and subcategories can be added and managed in **Wordpress Dashboard** >> **Products** >> **Categories**. A single product can belong to one or several categories; this can be specified in **Products** >> **[select a product to edit]** >> **Edit Product** >> **Product Categories**. Usually not all possible information about the product can be displayed on the **Products template**, but only the necessary data that customers will see by viewing the catalog (such as Product Name, Price, SKU, Thumbnail Image, a short description etc.) is shown. In the **Catalog tab** of **WooCommerce settings** these fields can be selected, and different parameters for product data, pricing options and images to display in the [Products control](page:4778) for this template can be specified. **Note:** To make the **Products template** available, **WooCommerce plugin** should be enabled in the 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, the **"WooCommerce for Wordpress"** option should be selected in **Start for Free** >> **Select CMS**. ####Joomla#### In Joomla themes, the **Products template** is used for a **VirtueMart Category Layout** item. So, to turn on the **Products template** in Joomla, this item should be created in the menu and product category/categories should be linked to it. Please follow these sample steps: 1. Create a **Product Category** in **Joomla administration** >> **VirtueMart (Components** >> **VirtueMart)** >> **Product Categories** >> **New** and save it. 2. Create one or several **Products** in **Joomla administration** >> **VirtueMart (Components** >> **VirtueMart)** >> **Products**, add select different product parameters (such as Product Name, Price) and specify the Category that the product should belong to, and then publish the **Products**. 3. Add a new **Menu Item** into a new or existing Menu and set the **Menu Item Type** as **"VirtueMart >> Category Layout"**. Select the newly created **Product Category** in **Required Settings** >> **Select a Category**. This will link the category to the **VirtueMart Category Layout** menu item so that all of the products from this category are displayed on the **Products template**. !virtuemart-category-layout-item.png! Main options for the **Products** and **Categories** displaying on the **Products template** can be specified in **Joomla administration** >> **VirtueMart (Components** >> **VirtueMart)** >> **VirtueMart Configuration** in the **Shopfront tab** and **Templates tab** >> **Shopfront Settings**. Particularly, in the second section, it is possible to select whether to display subcategories (**"Show Children Category"** option) and a number of products and categories in a row, to be shown in the [Products control](page:4778) on this template. **Note:** **Products template** is available only if **VirtueMart extension** is installed in Joomla back-end and enabled in **Extensions tab** >> **Extension Manager** >> **Manage**. If you are working in **Themler Cloud**, please make sure to have chosen a theme with VirtueMart support. If you start a new theme, **Start Now** >> **Select CMS**, the **"VirtueMart for Joomla!"** option should be selected. ####Magento#### **Products template** is applied to the **Catalog** pages in Magento themes. On these pages the products are listed when the corresponding product category is selected (from the **Categories** block in the **Left Sidebar** or from the **Horizontal menu** if it is present in the template). To configure the **Catalog** system settings, in **Magento Admin Panel** please navigate **System tab** >> **Configuration** >> **Catalog**. You will be able to define how your products will be shown in the front-end’s Catalog pages (a number of products per page, list mode etc.) and set up other defaults. To add categories to your Catalog: 1. Please navigate **Magento Admin Panel** >> **Catalog** >> **Manage Categories** and add a new category as a subcategory to the **"Root Catalog (0)"** category. The second-level categories can be added to the existing categories by following the hierarchy: **Root Catalog (0)** >> **Parent category** >> **Child category**. 2. Set the category to be displayed in menu by selecting **"Include in Navigation Menu"** >> **Yes**. 3. Set the category to be active on the website (**"Is Active"** >> **"Yes"**), and save. A category should contain **at least one product** otherwise it cannot be displayed in the menu, and the corresponding **Products template** cannot be opened. Products can be put into the category via **Magento Admin Panel** >> **Catalog tab** >> **Manage Products**. Add a new product or open an existing one for editing, then select the **Categories** section and check one or several categories to associate the product with, then save the changes. Products can also be assigned to a category at the category level, by selecting **Magento Admin Panel** >> **Catalog tab** >> **Manage Categories**: 1. Open a category for editing and navigate the **Category Products** tab. 2. In the drop-down list at the top left corner of the grid select either **"No"** to display products not assigned to this category or **"Any"** to display all products. !magento-category-products.png! 3.Check more products to assign them to this category and click the **"Save Category"** button. ####PrestaShop#### In PrestaShop the **Products template** is applied to **Catalog** pages which contain products and categories. These pages are accessible via **Categories** block in [Hook Left Column](page:4478) or by using the [Horizontal menu](page:4756). Product Categories can be added and managed in **PrestaShop back-office** >> **Catalog tab** >> **Categories**. New categories should be added as subcategories of the root category **"Home"**. They are not actually root categories though, so the radio button next to the **"Root Category"** option in the category specifications should be set to **"No"**. Enable the **"Displayed"** option so that the category is visible for the customers on the site front-end: !prestashop-new-category.png! Even though they aren't root categories, these categories do serve as first-level categories in your **Catalog** and can have subcategories under them. To be displayed on the **Products template**, products should be added and assigned to the categories. For this: 1. Add a new product via **PrestaShop back-office** >> **Catalog tab** >> **Products** >> **Add New**. 2. Mark a category or categories the product will belong to in the **Associations** tab of the product details. You may wish to create a new category here, by clicking the **"Create new category"** button; this will take you to the **Categories** section of the **Catalog** tab, then please follow the standard procedure of creating a category. Specify the main options for displaying products in the grid on the **Products template** in the **Preferences tab** >> **Products**. The **"Catalog mode"** option should be **disabled** unless you want customers only to review products but not to buy them. If the option is on, all shopping features will be disabled, and the [Products](page:4778) and [Product Details](page:4776) controls will serve for information purposes only. ####Sample#### !products-template-sample.png! ####See Also#### [Products control](page:4778) [Product details template](page:5673) [Adding Products to wooCommerce Themes (video)](page:3879)