[shopglut_advanced_filter] 

April 13, 2026
Pro Shortcodes
282 views
9 min read
Updated April 13, 2026
PRO VERSION

Advanced Filter Shortcode

[shopglut_advanced_filter]

Powerful AJAX-powered product filtering with sidebar, grid/list view, and advanced search capabilities

📋 Table of Contents

📖 Overview

The Advanced Filter shortcode is a PRO feature that displays WooCommerce products with a powerful filtering sidebar. It provides an immersive shopping experience with AJAX-powered filtering, grid/list view toggle, and multiple filter options.

This shortcode requires both WooCommerce and ShortcodeGlut PRO plugins to be active.

Shortcode Names:

  • [shopglut_advanced_filter]
  • [shortcodeglut_advanced_filter] alias

✨ Key Features

AJAX-powered filtering
Grid/List view toggle
Responsive sidebar layout
Category tree with children
Price range slider
Star rating filter
Product search
Sort by options
AJAX pagination
WooTemplate support
Mobile responsive
Match mode: Any/All

🚀 Basic Usage

The simplest form of the shortcode with default settings:

// Basic usage with all defaults [shopglut_advanced_filter] // With sidebar position [shopglut_advanced_filter sidebar=”left”] // With custom columns and items per page [shopglut_advanced_filter columns=”3″ items_per_page=”9″]

⚙️ Parameters Reference

Parameter Type Default Description
sidebar string left Sidebar position: left, right, or top
items_per_page integer 12 Number of products to display per page
columns integer 4 Number of columns in grid view (1-6)
orderby string date Sort by: date, title, price, popularity, rating
order string DESC Sort direction: DESC (descending) or ASC (ascending)
categories string “” Comma-separated category slugs to filter by default
template string “” WooTemplate ID for custom product display
show_search boolean 1 Show/hide search box in sidebar (1 or 0)
show_categories boolean 1 Show/hide category filter in sidebar (1 or 0)
show_price_range boolean 1 Show/hide price range slider (1 or 0)
show_rating boolean 1 Show/hide rating filter (1 or 0)
show_sort_by boolean 1 Show/hide sort by dropdowns (1 or 0)
match_mode string any Category matching: any (IN) or all (AND)

💡 Usage Examples

1. Right Sidebar Layout

Display filters on the right side:

[shopglut_advanced_filter sidebar=“right”]

2. Top Filter Bar

Display filters horizontally at the top:

[shopglut_advanced_filter sidebar=“top”]

3. Custom Grid Layout

Display products in 3 columns with 9 items per page:

[shopglut_advanced_filter columns=“3” items_per_page=“9” ]

4. Filter by Specific Categories

Only show products from specific categories:

[shopglut_advanced_filter categories=“electronics,computers,laptops” ]

5. Sort by Price (Low to High)

Default sorting by price ascending:

[shopglut_advanced_filter orderby=“price” order=“ASC” ]

6. Minimal Filters

Show only essential filters (categories and price):

[shopglut_advanced_filter show_search=“0” show_rating=“0” show_sort_by=“0” ]

7. With Custom WooTemplate

Use a custom template from WooTemplates:

[shopglut_advanced_filter template=“my_custom_product_card” columns=“3” ]

8. Match All Categories

Products must match ALL selected categories (AND logic):

[shopglut_advanced_filter match_mode=“all” ]

🎨 WooTemplate Support

The Advanced Filter shortcode fully supports WooTemplates for custom product card designs. When you specify a template ID, products will be rendered using your custom template instead of the default card.

Create your product card template in WooTemplates, then use the template parameter to apply it.

Supported Template Tags

When using WooTemplates, you can use these tags in your template HTML:

Tag Description
[product_title] Product name/title
[product_price] Product price HTML (with sale price if applicable)
[product_image] Product image (thumbnail size)
[product_short_description] Product short description

🔍 Available Filters

The sidebar includes the following filter options (when enabled):

1. Search

  • Text-based product search
  • Searches through product titles and content
  • Real-time AJAX results

2. Sort By

  • Publish Date – Sort by product creation date
  • Title – Alphabetical by product name
  • Price – Sort by product price
  • Popularity – Sort by sales count
  • Rating – Sort by average rating

Plus ascending/descending order toggle.

3. Categories

  • Hierarchical category tree with parent/child relationships
  • Expand/collapse subcategories
  • Product count per category
  • Multi-select with checkboxes

4. Match Mode

  • Any – Products matching ANY selected category (default)
  • All – Products must match ALL selected categories

5. Price Range

  • Slider from $0 to maximum product price
  • Real-time price value display
  • Filters products by maximum price

6. Rating

  • Filter by minimum star rating (1-5 stars)
  • Click star rating to filter
  • Shows products with equal or higher rating

7. View Toggle

  • Grid View – Products in responsive grid
  • List View – Products in vertical list

🎨 Styling & Customization

CSS Classes

The shortcode uses these main CSS classes that you can override in your theme:

Class Description
.shopglut-archive-wrapper Main container
.shopglut-sidebar-left Left sidebar layout
.shopglut-sidebar-right Right sidebar layout
.shopglut-sidebar-top Top filter bar layout
.shopglut-sidebar Sidebar container
.shopglut-content-area Product grid area
.shopglut-product-grid Product grid container
.shopglut-product-card Individual product card
.shopglut-filter-section Filter group in sidebar
.shopglut-pagination Pagination container
All styles are loaded from /wp-content/plugins/shortcodeglut-pro/assets/css/advanced-filter.css. You can override these styles in your theme’s CSS file.

💡 Tips & Best Practices

Use sidebar="top" for mobile-first designs – it stacks filters above products naturally on small screens.
Set columns="2" or columns="3" for better mobile experience. The default 4 columns can be cramped on smaller screens.
Use match_mode="all" when you want products that belong to multiple categories simultaneously (e.g., “Men’s” AND “Shoes”).
Disable unused filters with show_*=0 to reduce clutter and improve user experience.
The price slider automatically detects your store’s maximum price. No manual configuration needed!
AJAX filtering means the page doesn’t reload when applying filters – much faster and better UX.
Make sure your WooTemplate exists and is published before using the template parameter, otherwise products will display with the default card.

❓ FAQ

Q: Does this work with variable products?

A: Yes! Variable products are supported. The “Add to Cart” button becomes “Select Options” for variable products, linking to the product page.

Q: Can I have multiple instances on the same page?

A: Yes! Each instance gets a unique ID and operates independently. You can have different filter configurations on the same page.

Q: How do I change the number of products per row?

A: Use the columns parameter. Values from 1-6 are supported. The grid is responsive and will adjust on smaller screens.

Q: Why aren’t my filters working?

A: Make sure WooCommerce is active and you have products published. Also check that JavaScript is enabled in your browser.

Q: Can I customize the product card design?

A: Yes! Create a custom WooTemplate and use the template parameter. Your template will be used instead of the default card.

Q: Does this support out-of-stock products?

A: Out-of-stock products are shown but display “Read More” instead of “Add to Cart”. You can hide them via WooCommerce settings.

Q: How does the category matching work?

A: With match_mode="any", selecting “Electronics” and “Computers” shows products in EITHER category. With match_mode="all", products must be in BOTH categories.

Q: Can I hide specific filters?

A: Yes! Use the show_search, show_categories, show_price_range, show_rating, and show_sort_by parameters set to 0.

Q: Is this mobile responsive?

A: Absolutely! The layout adapts to mobile screens with breakpoints at 1024px, 768px, and 480px. The sidebar can move to top or stack above content.

Q: Where can I find the CSS file to customize styles?

A: Styles are in /wp-content/plugins/shortcodeglut-pro/assets/css/advanced-filter.css. Copy classes to your theme’s CSS and modify as needed.

🚀 Ready to Get Started?

Copy the shortcode examples above and paste them into any WordPress page, post, or widget!

ShortcodeGlut PRO – Advanced Product Filtering for WooCommerce