[shortcodeglut_accordion]
WooCommerce Product Accordion Shortcode
Complete Documentation for [shortcodeglut_accordion] — Plugin Version 1.5.5
Table of Contents
Overview
The Product Accordion shortcode displays WooCommerce products in an expandable accordion layout with colorful gradient product icons, built-in sorting, pagination, and category filtering. Each accordion item presents product details in a compact header that expands to reveal the full product description, feature tags, and action buttons.
- Expandable accordion layout with colorful gradient product icons (8 rotating gradients)
- Single expand mode (one item open at a time) or multi expand mode (multiple items open)
- Product header displays: gradient icon, title, meta info (categories, SKU, stock status), price, and expand toggle
- Expanded body shows: product excerpt/description, feature tags (from product tags or visible attributes), Add to Cart button, and View Product button
- Feature tags pulled from product tags (up to 4), falling back to visible product attributes (up to 2 per attribute)
- AJAX Add to Cart with “View Cart” button transformation after successful addition
- AJAX pagination for seamless browsing without page reloads
- Category filtering and product exclusion
- Optional section title and breadcrumb display
Basic Usage
[shortcodeglut_accordion]
No parameters are required. The shortcode will display all products in an accordion layout, 10 per page, sorted by title ascending, with single-expand mode and all display elements enabled.
[shortcodeglut_accordion category="electronics" items_per_page="5" title="Our Electronics"]
Displays electronics products in an accordion with a section title, 5 per page with pagination.
Parameters Reference
| Parameter | Type | Default | Description |
|---|---|---|---|
| expand | string | single | Expand mode: single = only one item open at a time, multi = multiple items can be open simultaneously |
| show_price | boolean | true | Show product price in the accordion header: true or false |
| show_excerpt | boolean | true | Show product description in the expanded body: true or false |
| show_features | boolean | true | Show feature tags from product tags/attributes in the expanded body: true or false |
| show_breadcrumb | boolean | 0 | Show breadcrumb trail: 1 or 0 |
| title | string | empty | Section title displayed above the accordion. Leave empty for no title. |
| items_per_page | integer | 10 | Number of products displayed per page |
| paging | boolean | 1 | Enable pagination: 1 or 0 |
| ajax | string | off | AJAX pagination: on or off. When enabled, page transitions happen without a full page reload. |
| order_by | string | title | Sort field: title, date, or price |
| order | string | ASC | Sort direction: ASC or DESC |
| 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" |
| icon_width | integer | 56 | Product icon width in pixels. Controls the size of the gradient icon in each accordion header. |
Usage Examples
Example 1: Default Accordion (All Products)
[shortcodeglut_accordion]
Displays all products in an accordion, 10 per page, sorted by title ascending, with single-expand mode. All display elements (price, excerpt, features) are shown.
Example 2: Multi-Expand with Section Title
[shortcodeglut_accordion expand="multi" title="Product Comparison"]
Displays an accordion where multiple items can be open at the same time, with a section title of “Product Comparison.” Useful for side-by-side product comparison.
Example 3: Category Filter with Custom Icon Size
[shortcodeglut_accordion category="fashion" icon_width="72" items_per_page="8"]
Shows fashion products with larger gradient icons (72px) and 8 items per page with pagination.
Example 4: AJAX Pagination with Price Sorting
[shortcodeglut_accordion ajax="on" order_by="price" order="ASC" items_per_page="5"]
Products sorted by lowest price first with smooth AJAX pagination (no page reloads when navigating pages). Shows 5 products per page.
Example 5: Minimal Accordion (No Price, No Features)
[shortcodeglut_accordion show_price="false" show_features="false" title="Quick Overview"]
A clean accordion showing only the product title, meta info, and description. Price and feature tags are hidden for a streamlined look.
Example 6: Exclude Products with Newest First
[shortcodeglut_accordion exclude="12,34,56" order_by="date" order="DESC" title="New Arrivals"]
Displays all products except IDs 12, 34, and 56, sorted by newest first. Includes a “New Arrivals” section title.
Example 7: No Pagination, Breadcrumb, Featured Products
[shortcodeglut_accordion paging="0" show_breadcrumb="1" category="featured" items_per_page="20"]
Shows up to 20 featured products in a single-page accordion with a breadcrumb trail. No pagination controls are displayed.
Example 8: Full Configuration
[shortcodeglut_accordion expand="multi" show_price="true" show_excerpt="true" show_features="true" title="All Products" items_per_page="6" paging="1" ajax="on" order_by="title" order="ASC" category="clothing" exclude="99,100" icon_width="64"]
A fully configured accordion showing clothing products (excluding IDs 99 and 100), sorted alphabetically, with multi-expand mode, AJAX pagination, 6 per page, and a custom icon width of 64px.
Tips & Best Practices
Use
expand="single" (default) for a clean, focused browsing experience where only one product is expanded at a time. Use expand="multi" when you want visitors to compare multiple products by keeping several accordion items open simultaneously.
The default
icon_width="56" works well for most designs. Increase to 72 or 80 for layouts where the product image is important, or decrease to 40 or 48 for a more compact, text-focused display.
Enable
ajax="on" for seamless page transitions. Without AJAX, pagination triggers a full page reload, which can feel disruptive in an accordion layout. AJAX keeps the user’s place on the page.
Feature tags are automatically pulled from product tags (up to 4 tags shown). If a product has no tags, the system falls back to visible product attributes, displaying up to 2 values per attribute. Make sure your products have tags or visible attributes for the best visual result.
The
exclude parameter accepts comma-separated product IDs: exclude="12,34,56". Use this to hide specific products from the accordion without affecting other shortcodes on your site.
For large catalogs, keep
items_per_page between 6–15 for optimal page load times. The accordion loads all items on the page at once, so very high values may slow down rendering. Consider enabling pagination for catalogs with more than 20 products.
The
title parameter adds a heading above the accordion. Use it to provide context (e.g., title="Frequently Bought Together" or title="Product Specifications"). Leave empty when the accordion’s purpose is self-evident from the surrounding page content.
Frequently Asked Questions
Q: What is the difference between single and multi expand mode?
A: In single mode (default), opening one accordion item automatically closes any previously open item — only one item is expanded at a time. In multi mode, multiple items can be open simultaneously, which is useful for product comparisons.
Q: Where do the feature tags come from?
A: Feature tags are pulled first from WooCommerce product tags (up to 4 are displayed). If a product has no tags, the system falls back to visible product attributes and displays up to 2 values per attribute. You can manage tags in the WordPress admin under Products > Tags.
Q: How does the Add to Cart button work?
A: Each expanded accordion item includes an Add to Cart button. When clicked, the product is added to the cart via AJAX (no page reload). After a successful addition, the button transforms into a “View Cart” button that links directly to the WooCommerce cart page.
Q: Can I show products from multiple categories?
A: The category parameter accepts a single category slug. For multi-category filtering with advanced operators (IN, NOT IN, AND), use [shortcodeglut_woo_category] instead. You can place multiple accordion shortcodes on the same page, each filtering by a different category.
Q: How do I sort by price or date?
A: Use the order_by parameter with price, date, or title, combined with the order parameter (ASC or DESC). For example, to show cheapest products first: order_by="price" order="ASC".
Q: What are the gradient icons?
A: Each accordion item displays a colorful gradient icon in the header, generated from the product’s featured image. The accordion uses 8 rotating gradient styles that cycle through products, giving the layout a vibrant, colorful appearance without requiring custom images. The icon_width parameter controls the icon size.
Q: Does AJAX pagination require any special setup?
A: No. Simply set ajax="on" and pagination will work via AJAX automatically. No additional plugins or configuration are needed. If AJAX is off (ajax="off"), pagination works with standard page reloads.
ShortcodeGlut — WooCommerce Product Shortcodes Plugin
Version 1.5.5 | Last Updated: May 2026