[shortcodeglut_grid]
WooCommerce Product Grid Shortcode
Complete Documentation for [shortcodeglut_grid] — Plugin Version 1.5.5
Table of Contents
Overview
The Product Grid shortcode displays WooCommerce products in a responsive CSS Grid layout with built-in sorting, pagination, and category filtering. Products are rendered using pre-built WooTemplates for professional, consistent product card displays.
- Responsive CSS Grid layout with configurable columns (1–6)
- Fixed product count via
rows×columns, or paginated withitems_per_page - 10 sort options (date, title, price, popularity, rating — each ascending/descending)
- AJAX-powered sorting and pagination (no page reload)
- Category filtering and product exclusion
- 14 pre-built WooTemplates (vertical and horizontal card styles)
- Optional toolbar and breadcrumb
Basic Usage
[shortcodeglut_grid]
No parameters are required. The shortcode will display all products in a 4-column grid, sorted by newest first, with the default template.
[shortcodeglut_grid columns="3" category="electronics" items_per_page="9"]
Displays 9 electronics products per page in a 3-column grid.
Parameters Reference
| Parameter | Type | Default | Description |
|---|---|---|---|
| columns | integer | 4 | Number of grid columns (1–6) |
| rows | integer | 0 | Fixed number of rows. When 0, uses items_per_page with pagination instead. |
| limit | integer | 0 | Total products to show. 0 = auto-calculated from columns × rows. |
| order_by | string | date-desc | Sort preset (see Sort Options below) |
| order | string | DESC | Fallback sort direction: ASC or DESC. Most order_by presets include direction. |
| items_per_page | integer | 12 | Products per page (used when rows=0 and paging=1) |
| template | string | product_card_basic | Pre-built WooTemplate ID for product card display |
| paging | boolean | 1 | Enable pagination: 1 or 0 |
| ajax | string | off | AJAX pagination: on or off. Sorting always uses AJAX. |
| category | string | empty | Filter by category slug. Leave empty to show all products. |
| exclude | string | empty | Comma-separated product IDs to exclude. Example: exclude="12,34,56" |
| toolbar | string | 1 | Toolbar display: 1 (full), 0 (hidden), or compact (results count only) |
| show_breadcrumb | boolean | 0 | Show breadcrumb trail (Home / Products): 1 or 0 |
Sort Options
The order_by parameter accepts these preset values. Each preset includes both the field and direction:
| Value | Sort Behavior |
|---|---|
| date | Newest First (default) |
| date-desc | Oldest First |
| title-asc | Title: A to Z |
| title-desc | Title: Z to A |
| price-asc | Price: Low to High |
| price-desc | Price: High to Low |
| popularity-desc | Best Selling |
| popularity-asc | Least Selling |
| rating-desc | Highest Rated |
| rating-asc | Lowest Rated |
toolbar="1", visitors can change the sort order from a dropdown. The selected sort is applied instantly via AJAX without a page reload.
Usage Examples
Example 1: Default Grid (All Products)
[shortcodeglut_grid]
Displays all products in a 4-column grid, 12 per page, sorted by newest first, with the Basic template.
Example 2: Fixed Grid (3 × 2 Layout)
[shortcodeglut_grid columns="3" rows="2" paging="0"]
Shows exactly 6 products (3 columns × 2 rows) with no pagination. Great for homepage featured sections.
Example 3: Category Filter with Aqua Template
[shortcodeglut_grid columns="3" category="fashion" items_per_page="9" template="product_card_aqua"]
Displays fashion products in a 3-column grid using the Aqua template, 9 per page with pagination.
Example 4: Sorted by Price with AJAX Pagination
[shortcodeglut_grid order_by="price-asc" ajax="on" items_per_page="12" template="product_card_tropical"]
Products sorted by lowest price first with smooth AJAX pagination. Uses the Tropical template.
Example 5: Exclude Products with Horizontal Template
[shortcodeglut_grid exclude="12,34,56" columns="2" template="product_card_horizontal_blue"]
Displays all products except IDs 12, 34, and 56 in a 2-column grid with the Horizontal Blue template.
Example 6: Compact Toolbar, Best Selling
[shortcodeglut_grid toolbar="compact" order_by="popularity-desc" items_per_page="8" template="product_card_vibrant"]
Compact toolbar (no sort dropdown) with products sorted by best selling. Uses the Vibrant template.
Example 7: No Toolbar, Breadcrumb, Berry Template
[shortcodeglut_grid toolbar="0" show_breadcrumb="1" columns="4" category="electronics" template="product_card_berry"]
No toolbar but shows a breadcrumb. 4-column grid of electronics products with the Berry template.
Example 8: Minimal — Just Products
[shortcodeglut_grid toolbar="0" paging="0" columns="3" rows="1" template="product_card_sage"]
Shows exactly 3 products with no toolbar, no pagination. Clean and minimal using the Sage template.
Pre-Built Templates
Choose from 14 professionally designed product card templates. Use the template parameter with the Template ID shown below.
template parameter. Example: template="product_card_aqua". If omitted, product_card_basic is used.
Vertical Card Templates
Horizontal Card Templates
Tips & Best Practices
Use
rows="2" + paging="0" for a fixed product count (e.g., homepage hero section). Use rows="0" + paging="1" + items_per_page="12" for browsable catalogs.
The grid uses CSS Grid with
grid-template-columns: repeat(N, 1fr), so it automatically stacks on smaller screens. Values 1–6 are supported; values outside this range are clamped.
The toolbar sort dropdown always works via AJAX — no page reload needed. The
ajax parameter controls whether pagination also uses AJAX.
Horizontal templates (e.g.,
product_card_horizontal_blue) work best with columns="1" or columns="2". Vertical templates work well with 3–4 columns.
The
exclude parameter accepts comma-separated product IDs: exclude="12,34,56". Use this to hide specific products from the grid.
For large catalogs, keep
items_per_page between 12–24 for optimal page load times. The grid enforces WooCommerce product visibility rules automatically.
Frequently Asked Questions
Q: What happens if I don’t set rows or limit?
A: When rows="0" and limit="0", the shortcode uses items_per_page (default: 12) with pagination enabled. This is the standard paginated catalog mode.
Q: How is this different from [shortcodeglut_woo_category]?
A: The Grid shortcode shows all products by default and optionally filters by one category. The Category shortcode is category-first (requires a category) and supports multiple categories with advanced operators (IN, NOT IN, AND).
Q: Can I show products from multiple categories?
A: The category parameter accepts a single category slug. For multiple categories with advanced operators, use [shortcodeglut_woo_category] instead.
Q: How do I change the sort order?
A: Use the order_by parameter with one of the 10 preset values (e.g., order_by="price-asc"). When the toolbar is visible, visitors can also change sorting from the dropdown.
Q: Can I hide the toolbar?
A: Yes, set toolbar="0" to hide it completely. Use toolbar="compact" to show only the results count without the sort dropdown.
Q: Does AJAX sorting require the ajax parameter?
A: No. Toolbar sorting always uses AJAX. The ajax parameter only controls whether pagination uses AJAX.
Q: How do I show a breadcrumb?
A: Set show_breadcrumb="1". This displays a simple “Home / Products” trail above the grid.
ShortcodeGlut — WooCommerce Product Shortcodes Plugin
Version 1.5.5 | Last Updated: May 2026