Single Product Template



The Single Product Template uses the Elementor Pro Theme Builder feature to allow you to create multiple single product templates and assign display conditions to apply them to specific products, such as products in specific categories or tags.

In this article, we will cover the following topics:

Getting Started

To get started, navigate to Templates -> Theme Builder from the WordPress Admin.

elementor-single-product-template-theme-builder.png

Then on the left side menu of the Theme Builder, click on Prodigy Product and click Add New in the top right corner of the page.

elementor-single-product-template-prodigy-product-part.png

You will then see the Elementor Library.  You can either select and insert the Prodigy Product example template or close the library to start creating a template from scratch.

elementor-single-product-template-library-template.png

Product Images Widget

The Product Images Widget displays the product's gallery of images on the single product template.

elementor-product-images-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-product-images-adding.png

Content Tab - Content

In the content tab of the widget settings, you can control the visibility of thumbnail images.

elementor-product-images-content.png

Style Tab - Gallery

In the Style tab, the Gallery section provides the following controls.

elementor-product-images-style-gallery.png

Style Tab - Gallery Navigation Buttons

In the Style tab, the Gallery Navigation Buttons section provides the following controls.

elementor-product-images-style-gallery-nav-buttons.png

Style Tab - Gallery Control Buttons

In the Style tab, the Gallery Control Buttons section provides the following controls.

elementor-product-images-style-gallery-control-buttons.png

Style Tab - Thumbnails

In the Style tab, the Thumbnails section provides the following controls.

elementor-product-images-style-thumbnails.png

Style Tab - Thumbnails Navigation Buttons

In the Style tab, the Thumbnails Navigation Buttons section provides the following controls.

elementor-product-images-style-thumbnails-nav-buttons.png

Breadcrumbs Widget

The Breadcrumbs Widget can be used to create breadcrumb links at the top of the Single Product template.

elementor-single-breadcrumbs-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-breadcrumbs-adding.png

Style Tab - General

In the Style tab, the General section provides the following controls.

elementor-single-breadcrumbs-style-general.png

Product Title Widget

The Product Title Widget can be used to add the title of the product to the single product template.

elementor-product-title-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-product-title-adding.png

Content Tab - Content

In the content tab of the widget settings, you can control the HTML tag of the product title.

elementor-product-title-content.png

Style Tab - General

In the Style tab, the General section provides the following controls.

elementor-product-title-style-general.png

Style Tab - Title

In the Style tab, the TItle section provides the following controls.

elementor-product-title-style-title.png

Price Range Widget

The Price Range Widget can be used to display the price or range of prices of the product on the single product template.

elementor-price-range-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-price-range-adding.png

Style Tab - General

In the Style tab, the General section provides the following controls.

elementor-price-range-style-general.png

Style Tab - Text

In the Style tab, the Text section provides the following controls.

elementor-price-range-style-text.png

Product Rating Widget

The Product Rating Widget can be used to display the star rating and a link to the reviews on your single product template.

elementor-product-rating-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-product-rating-adding.png

Content Tab - Content

In the content tab of the widget settings, you can control the icon that is displayed next to the reviews link.

elementor-product-rating-content.png

Style Tab - General

In the Style tab, the General section provides the following controls.

elementor-product-rating-style-general.png

Style Tab - Stars

In the Style tab, the Stars section provides the following controls.

elementor-product-rating-style-stars.png

Style Tab - Reviews

In the Style tab, the Reviews section provides the following controls.

elementor-product-rating-style-reviews.png

Style Tab - Separator

In the Style tab, the Separator section provides the following controls.

elementor-product-rating-style-separator.png

Style Tab - Box

In the Style tab, the Box section provides the following controls.

elementor-product-rating-style-box.png

Product Description Widget

The Product Description Widget can be used to display a full or truncated product description on your single product template.

elementor-product-description-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-description-adding.png

Content Tab - Content

In the content tab of the widget settings, you can control the truncation settings of the widget.

elementor-product-description-content.png

Style Tab - General

In the Style tab, the General section provides the following controls.

elementor-product-description-style-general.png

Style Tab - Text

In the Style tab, the Text section provides the following controls.

elementor-product-description-style-text.png

Style Tab - Anchor

In the Style tab, the Anchor section provides the following controls.

elementor-product-description-style-anchor.png

Add To Cart Widget

The Add To Cart Widget can be used to display the add-to-cart button on your single product template. This widget also includes options selection for variable products and subscription options.

elementor-add-to-cart-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-add-to-cart-adding.png

Style Tab - General

In the Style tab, the General section provides the following controls.

elementor-add-to-cart-style-general.png

Style Tab - Attributes

In the Style tab, the Attributes section provides the following controls.

elementor-add-to-cart-style-attributes.png

Style Tab - Price

In the Style tab, the Price section provides the following controls.

elementor-add-to-cart-style-price.png

Style Tab - Stock

In the Style tab, the Stock section provides the following controls.

elementor-add-to-cart-style-stock.png

Style Tab - Subscriptions Alert

In the Style tab, the Subscriptions Alert section provides the following controls.

elementor-add-to-cart-style-subscriptions-alert.png

Style Tab - Subscriptions Tabs

In the Style tab, the Subscriptions Tabs section provides the following controls.

elementor-add-to-cart-style-subscriptions-tabs.png

Style Tab - Confirmation Message

In the Style tab, the Confirmation Message section provides the following controls.

elementor-add-to-cart-style-confirmation-message.png

Style Tab - Button (Add to Cart)

In the Style tab, the Button (Add to Cart) section provides the following controls.

elementor-add-to-cart-style-button.png

Style Tab - Quantity

In the Style tab, the Quantity section provides the following controls.

elementor-add-to-cart-style-quantity.png

Product Meta Widget

The Product Meta Widget can be used to display a table with the SKU, categories, and tags on your single product template.

elementor-product-meta-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-product-meta-adding.png

Style Tab - General

In the Style tab, the General section provides the following controls.

elementor-product-meta-style-general.png

Style Tab - Label

In the Style tab, the Label section provides the following controls.

elementor-product-meta-style-label.png

Style Tab - Value

In the Style tab, the Value section provides the following controls.

elementor-product-meta-style-value.png

Style Tab - Divider

In the Style tab, the Divider section provides the following controls.

elementor-product-meta-style-divider.png

Product Data Tabs Widget

The Product Meta Widget can be used to display tabs with the product description, additional information, and reviews on your single product template.

elementor-product-data-tabs-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-product-data-tabs-adding.png

Content Tab - Content

In the content tab of the widget settings, you can control the visibility of description, additional information, and reviews tabs.

elementor-product-data-tabs-content.png

Style Tab - General

In the Style tab, the Gallery section provides the following controls.

elementor-product-data-tabs-style-general.png

Style Tab - Description

In the Style tab, the Description section provides the following controls.

elementor-product-data-tabs-style-description.png

Style Tab - Additional Info

In the Style tab, the Additional Info section provides the following controls.

elementor-product-data-tabs-style-additional-info.png

Style Tab - Reviews

In the Style tab, the Reviews section provides the following controls.

elementor-product-data-tabs-style-reviews-1.png

elementor-product-data-tabs-style-reviews-2.png

Style Tab - Review Item

In the Style tab, the Review Item section provides the following controls.

elementor-product-data-tabs-style-review-item-1.png

elementor-product-data-tabs-style-review-item-2.png

Related Products Widget

The Related Product Widget can be used to display up-sell and/or cross-sell products on your single product template.

elementor-single-related-products-widget.png

You will see the widget in the Prodigy Product section in the list of widgets in the left column. To add it to your template, just drag the widget into the appropriate section or column.

elementor-single-product-related-products-adding.png

Content Tab - Product Selection

In the content tab of the widget settings, the Product Selection section allows you to control the type of related product to display (up-sell, cross-sell, or both).

elementor-single-related-products-content-product-selection.png

Content Tab - Content

In the content tab of the widget settings, you can control the default sorting order, number of columns and rows, and the visibility of certain elements.

elementor-single-related-products-content.png

Style Tab - General

In the Style tab, the Gallery section provides the following controls.

elementor-single-related-products-style-general.png

Style Tab - Heading

In the Style tab, the Heading section provides the following controls.

elementor-single-related-products-style-heading.png

Style Tab - Box

In the Style tab, the Box section provides the following controls.

elementor-single-related-products-style-box.png

Style Tab - Slider

In the Style tab, the Slider section provides the following controls.

elementor-single-related-products-style-slider.png

Style Tab - Image

In the Style tab, the Image section provides the following controls.

elementor-single-related-products-style-image.png

Style Tab - Category

In the Style tab, the Category section provides the following controls.

elementor-single-related-products-style-category.png

Style Tab - Title

In the Style tab, the Title section provides the following controls.

elementor-single-related-products-style-title.png

Style Tab - Rating

In the Style tab, the Rating section provides the following controls.

elementor-single-related-products-style-rating.png

Style Tab - Price

In the Style tab, the Price section provides the following controls.

elementor-single-related-products-style-price.png

Style Tab - Sale Badge

In the Style tab, the Sale Badge section provides the following controls.

elementor-single-related-products-style-sale-badge.png

Display Conditions

When saving the Single Product template, you will see the Elementor Publish Settings where you can set both include and exclude conditions for the template.

elementor-single-product-template-conditions.png

Conditions can be set for the following:

  • All Prodigy Products
  • Prodigy Category
  • Prodigy Child Categories
  • Prodigy Tag

 

Build WordPress stores with modern technology

Sign up to use the Prodigy platform, a powerful alternative to WooCommerce. Prodigy is free at ANY scale.

Create an Account