Product Archive Template



The Product Archive Template uses the Elementor Pro Theme Builder feature to allow you to create multiple product archive templates and assign display conditions to apply them to specific product archives, such as the primary shop page, product categories, or product 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-product-archive-template-theme-builder.png

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

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

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

elementor-product-archive-template-library-template.png

Product Archive Widget

The Product Archive Widget displays the grid of products that are displayed in the template.

elementor-product-archive-widget.png

If you are starting with a blank template, you will see the widget in the Prodigy Archive section in the list of widgets in the left column. You can drag the widget into the appropriate section or column of the template.

elementor-product-archive-template-product-archive-add.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-product-archive-widget-content.png

Style Tab - General

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

elementor-product-archive-widget-style-general.png

Style Tab - Box

In the Style tab, the Box section includes the following controls that affect the outer container of each product card.

elementor-product-archive-widget-style-box.png

Style Tab - Image

In the Style tab, the Image section contains the following controls that affect the product image.

elementor-product-archive-widget-style-image.png

Style Tab - Category

In the Style tab, the Category section includes the following controls. This section is only available if the category visibility is set to Show in the content section.

elementor-product-archive-widget-style-category.png

Style Tab - Title

In the Style tab, the Title section includes the following controls that affect the product title.

elementor-product-archive-widget-style-title.png

Style Tab - Rating

In the Style tab, the Rating section includes the following controls. This section is only available if the rating visibility is set to Show in the content section.

elementor-product-archive-widget-style-rating.png

Style Tab - Price

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

elementor-product-archive-widget-style-price.png

Style Tab - Sale Badge

In the Style tab, the Sale Badge section includes the following controls. This section is only available if the Sale Badget visibility is set to Show in the content section.

elementor-product-archive-widget-style-sale-badge.png

Style Tab - Pagination

In the Style tab, the Pagination section includes the following controls.

elementor-product-archive-widget-style-pagination.png

Breadcrumbs Widget

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

elementor-breadcrumbs-widget.png

You will see the widget in the Prodigy Archive 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-product-archive-template-breadcrumbs-add.png

Style Tab - General

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

elementor-breadcrumbs-widget-style-general.png

Product Sorting Widget

The Product Sorting Widget can be used to add a sorting dropdown to your Product Archive template.

elementor-product-sorting-widget.png

You will see the widget in the Prodigy Archive 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-product-archive-template-product-sorting-add.png

Style Tab - General

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

elementor-product-sorting-widget-style-general.png

Product Search Widget

The Product Search Widget can be used to add a search field to your Product Archive template.

elementor-product-search-widget.png

You will see the widget in the Prodigy Archive 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-product-archive-template-product-search-add.png

Style Tab - Heading

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

elementor-product-search-widget-style-heading.png

Style Tab - General

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

elementor-product-search-widget-style-general.png

Product Filters Widget

The Product Filters Widget can be used to add attribute filters to your Product Archive template.

elementor-product-filters-widget.png

You will see the widget in the Prodigy Archive 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-product-archive-template-product-filters-add.png

Content Tab - Content

In the content tab of the widget settings, you can control the filter type, visibility of products count, and the attributes to include in the filter.

elementor-product-filters-widget-content.png

Style Tab - General

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

elementor-product-filters-widget-style-general.png

Style Tab - Heading

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

elementor-product-filters-widget-style-heading.png

Style Tab - Attribute Name

In the Style tab, the Attribute Name section provides the following controls.

elementor-product-filters-widget-style-attribute-name.png

Style Tab - Attribute Value

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

elementor-product-filters-widget-style-attribute-value.png

Style Tab - Products Count

In the Style tab, the Products Count section provides the following controls.

elementor-product-filters-widget-style-products-count.png

Style Tab - Attribute Value Box

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

elementor-product-filters-widget-style-attribute-value-box.png

Style Tab - Filter Card List

In the Style tab, the Filter Card List section provides the following controls.

elementor-product-filters-widget-style-filter-card-list.png

Style Tab - Arrow Button

In the Style tab, the Arrow Button section provides the following controls.

elementor-product-filters-widget-style-arrow-button.png

Style Tab - Filter Item Close Icon

In the Style tab, the Filter Item Close Icon section provides the following controls.

elementor-product-filters-widget-style-filter-item-close-box.png

Price Filter Widget

The Price Filter Widget can be used to add a price filter to your Product Archive template.

elementor-price-filter-widget.png

You will see the widget in the Prodigy Archive 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-product-archive-template-price-filter-add.png

Style Tab - General

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

elementor-price-filter-widget-style-general.png

Style Tab - Heading

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

elementor-price-filter-widget-style-heading.png

Style Tab - Slider Bar

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

elementor-price-filter-widget-style-slider-bar.png

Style Tab - Field Label

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

elementor-price-filter-widget-style-field-label.png

Style Tab - Field

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

elementor-price-filter-widget-style-field.png

Style Tab - Button

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

elementor-price-filter-widget-style-button.png

Active Filters Widget

The Active Filters Widget can be used to add a section to your Product Archive template that shows all of the currently active filters and allows the user to clear individual or all filters.

elementor-active-filters-widget.png

You will see the widget in the Prodigy Archive 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-product-archive-template-active-filters-add.png

Style Tab - General

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

elementor-active-filters-widget-style-general.png

Style Tab - Heading

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

elementor-active-filters-widget-style-heading.png

Style Tab - Badge Name

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

elementor-active-filters-widget-style-badge-name.png

Style Tab - Badge Close Icon

In the Style tab, the Badge Close Icon section provides the following controls.

elementor-active-filters-widget-style-badge-close-icon.png

Style Tab - Clear Filters

In the Style tab, the Clear Filters section provides the following controls.

elementor-active-filters-widget-style-clear-filters.png

Product Categories Widget

The Product Categories Widget can be used to add category navigation to your Product Archive template.

elementor-product-categories-widget.png

You will see the widget in the Prodigy Archive 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-product-archive-template-product-categories-add.png

Content Tab - Content

In the content tab of the widget settings, you can control the visibility of the product count next to each category link.
 

elementor-product-categories-widget-content.png

Style Tab - General

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

elementor-product-categories-widget-style-general.png

Style Tab - Heading

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

elementor-product-categories-widget-style-heading.png

Style Tab - Category Name

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

elementor-product-categories-widget-style-category-name.png

Style Tab - Products Count

In the Style tab, the Products Count section provides the following controls.

elementor-product-categories-widget-style-products-count.png

Style Tab - Filter Card Box

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

elementor-product-categories-widget-style-filter-card-box.png

Style Tab - Filter Card List

In the Style tab, the Filter Card List section provides the following controls.

elementor-product-categories-widget-style-filter-card-list.png

Style Tab - Arrow Button

In the Style tab, the Arrow Button section provides the following controls.

elementor-product-categories-widget-style-arrow-button.png

Display Conditions

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

elementor-product-archive-template-conditions.png

Conditions can be set for the following:

  • All Product Archives
  • Shop Page
  • Prodigy Product Categories
  • Prodigy Product Tags

 

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