Shop Archive Widgets
Design your shop and category pages with product grids, filters, pagination, and sorting widgets.
Overview
Shop Archive widgets work within Product Archive templates. They integrate with WooCommerce’s product query system and support AJAX filtering, sorting, and infinite scroll pagination.
The Shop Archive category contains 11 widgets that let you build fully custom shop and category pages. Use them inside a Product Archive template built with the Template Builder to replace the default WooCommerce shop layout.
All widgets are registered under the mpd-shop-archive Elementor category and dynamically integrate with WooCommerce’s product query and filtering systems.
MPD Products Archive
The main product listing widget for archive pages. Displays products based on the current archive query—whether the customer is browsing a category, tag, search results, or the main shop page. Products render in a configurable grid layout with full card customization.
Products Archive widget — product grid on shop and category pages
Key Features
- Displays products based on the current archive query (category, tag, search results, shop page)
- Grid layout with configurable columns (1–6 columns)
- Product card elements: image, title, price, rating, add to cart button, sale badge
- AJAX pagination modes: traditional numbered, Load More button, Infinite Scroll
- AJAX filtering support—works with all filter widgets on the page
- Product image hover effects and aspect ratio controls
- Card styling: background, border, shadow, border-radius, and padding
- Responsive column breakpoints for tablet and mobile
MPD Archive Title
Displays the archive page title dynamically based on the current context. Shows the category name on category pages, tag name on tag pages, “Shop” on the main shop page, and the search term on search results pages.
Archive Title widget — dynamic title based on current archive context
Key Features
- Dynamic title based on current context: category name, tag name, “Shop”, or search term
- Configurable HTML tag (H1–H6, div, span, p)
- Typography controls: font family, size, weight, line-height, letter-spacing
- Text color and alignment options (left, center, right)
- Margin and padding spacing controls
MPD Archive Description
Renders the category or tag description content that is set in the WooCommerce product category/tag edit screen. Useful for adding SEO-friendly content and context to archive pages.
Archive Description widget — category/tag description content
Key Features
- Displays the description set in WooCommerce product categories or tags
- Supports HTML content within descriptions
- Typography and text color customization
- Text alignment controls
- Margin and padding spacing options
MPD Result Count
Shows the product result count text, such as “Showing 1–12 of 45 results.” Automatically updates when customers apply filters or navigate between pages via AJAX.
Result Count widget — “Showing 1–12 of 45 results”
Key Features
- Displays “Showing X–Y of Z results” text
- Auto-updates with AJAX filtering and pagination
- Typography controls: font family, size, weight, color
- Text alignment options (left, center, right)
- Margin and padding spacing controls
MPD Ordering
Renders the product sorting dropdown that lets customers reorder products on the page. Integrates with AJAX so sorting happens without a full page reload.
Ordering widget — product sorting dropdown
Key Features
- Sort options: Default sorting, Popularity, Average Rating, Latest, Price: Low to High, Price: High to Low
- Integrates with AJAX for sort-without-reload
- Dropdown styling: background, border, text color, border-radius
- Typography controls for the dropdown text
- Alignment and width controls
MPD Pagination
Provides page navigation for product listings. Supports multiple pagination styles and integrates with AJAX for seamless page transitions without full page reloads.
Pagination widget — page navigation for product listings
Key Features
- Pagination styles: Numbered pages, Previous/Next buttons, Load More button, Infinite Scroll
- AJAX support for seamless page transitions
- Button colors: normal, hover, and active state styling
- Active page number highlight styling
- Spacing and gap controls between pagination items
- Border-radius and border controls
- Alignment options (left, center, right)
MPD Active Filters
Displays the currently applied filters as removable tags or chips. Customers can click individual filter tags to remove them, or use the “Clear All” button to reset all filters at once.
Active Filters widget — removable filter tags
Key Features
- Shows currently applied filters as removable tags/chips
- Displays active price range, selected attributes, and selected categories
- Click to remove individual filters
- “Clear All” button to reset all filters at once
- Tag styling: background color, text color, border, and border-radius
- Remove icon styling and hover effects
- Spacing between filter tags
MPD Price Filter
A price range filter that lets customers narrow products by price. Includes a draggable range slider and optional min/max price input fields. Filters products via AJAX without a page reload.
Price Filter widget — price range slider
Key Features
- Price range slider with draggable handles
- Min and max price input fields
- AJAX filtering without page reload
- Slider track and handle color customization
- Input field styling: border, background, text color, border-radius
- Currency symbol display
- Auto-detects min/max price range from available products
MPD Attribute Filter
Filters products by WooCommerce product attributes such as Color, Size, Material, or any custom attribute. Supports multiple display modes and multi-select for combining attribute values.
Attribute Filter widget — filter by color, size, material, etc.
Key Features
- Filter by any WooCommerce product attribute (Color, Size, Material, etc.)
- Display modes: checkbox list, dropdown, or color/image swatches
- Multi-select support for combining multiple attribute values
- AJAX filtering without page reload
- Show product count per attribute value
- Swatch styling: size, border, border-radius, and selected state
- Checkbox and label typography customization
MPD Category Filter
Filters products by WooCommerce product category. Supports hierarchical category trees, flat lists, and dropdown display modes, with optional product counts.
Category Filter widget — filter by product category
Key Features
- Filter products by WooCommerce product category
- Display modes: hierarchical list, flat list, or dropdown
- Show product count per category
- Collapsible subcategory trees
- AJAX filtering without page reload
- Category name typography and color customization
- Active/selected category highlight styling
- Indent and spacing controls for hierarchical lists
MPD Advanced Filter
A comprehensive, combined multi-criteria filter widget that consolidates all filtering options into a single widget. Includes collapsible filter groups and a mobile-friendly offcanvas panel for smaller screens.
Advanced Filter widget — combined multi-criteria filter panel
Key Features
- Combined filter for: price, attributes, categories, stock status, on-sale status, and rating
- Collapsible filter groups with expand/collapse toggle
- Mobile-friendly offcanvas filter panel (slide-in sidebar)
- “Apply Filters” button or instant AJAX filtering mode
- Filter group heading typography and color customization
- Offcanvas trigger button styling
- Reset/clear all filters option
- Responsive breakpoint for offcanvas mode
All filter widgets work together. When a customer applies a price filter, the attribute filter, category filter, result count, and pagination all update automatically via AJAX.
AJAX filtering and pagination use the mpd_filter_products and mpd_load_more_products actions. The nonce used is mpd_shop_archive_nonce.