[shortcodeglut_tabs]
WooCommerce Tabs Layout Shortcode
Complete Documentation for [shortcodeglut_tabs] — Plugin Version 1.5.5
Table of Contents
Overview
The Tabs Layout shortcode displays WooCommerce products organized under a tabbed category navigation. Each tab represents a product category, and clicking a tab loads that category’s products into an embedded product grid — all without reloading the page.
- Tabbed category navigation — each tab shows products from one category
- Customizable tab bar background (gradients or solid colors)
- AJAX-powered tab switching (loads products without page reload)
- Built-in product grid inside each tab with simple product cards
- Product cards display: gradient background, title, excerpt (10 words), price, Add to Cart button
- Auto-detects up to 6 product categories, or specify custom category slugs
- Fallback to “All Products” tab when no categories are found
- Panel transition animations for smooth content changes
Basic Usage
[shortcodeglut_tabs]
No parameters are required. The shortcode will auto-detect up to 6 product categories, create a tab for each, and display 8 products per tab in a 4-column grid with the default pill-style tab navigation.
[shortcodeglut_tabs categories="electronics,fashion,home" posts_per_page="6" columns="3"]
Creates tabs for three specific categories, showing 6 products per tab in a 3-column grid.
Parameters Reference
| Parameter | Type | Default | Description |
|---|---|---|---|
| style | string | pill | Tab navigation style. Currently supports pill. |
| animation | string | fade | Panel transition animation when switching tabs. Currently supports fade. |
| header_bg_color | string | linear-gradient(135deg, #667eea 0%, #764ba2 100%) | Background for the tab navigation bar. Accepts hex colors (e.g., #3498db) or CSS gradients. |
| show_header | boolean | 1 | Show the section title header above the tabs: 1 (show) or 0 (hide). |
| section_title | string | Browse by Category | Section heading text displayed above the tab navigation bar. |
| categories | string | empty | Comma-separated category slugs to create tabs. Leave empty to auto-detect up to 6 categories. |
| posts_per_page | integer | 8 | Number of products displayed inside each tab. |
| columns | integer | 4 | Number of grid columns for products inside each tab (1–6). |
| show_empty | boolean | 1 | Show categories with no products when auto-detecting: 1 (show) or 0 (hide). |
Usage Examples
Example 1: Default Tabs (Auto-Detect Categories)
[shortcodeglut_tabs]
Automatically detects up to 6 product categories and creates a tab for each. Shows 8 products per tab in a 4-column grid with the default purple gradient tab bar and “Browse by Category” header.
Example 2: Custom Categories
[shortcodeglut_tabs categories="electronics,fashion,home-kitchen,sports"]
Creates exactly four tabs for the specified category slugs. Each tab loads its category’s products via AJAX when clicked.
Example 3: Custom Tab Bar Color
[shortcodeglut_tabs header_bg_color="#2c3e50" section_title="Shop Our Collections"]
Sets the tab navigation bar to a solid dark blue-gray color and changes the section heading to “Shop Our Collections”. Auto-detects categories as usual.
Example 4: Gradient Tab Bar with Fewer Products
[shortcodeglut_tabs header_bg_color="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" posts_per_page="4" columns="2"]
Uses a pink-to-red gradient for the tab bar, showing only 4 products per tab in a 2-column layout. Great for highlighting a small curated selection in each category.
Example 5: Hide Header, Compact Layout
[shortcodeglut_tabs show_header="0" categories="shirts,pants,shoes" posts_per_page="6" columns="3"]
Hides the section title header entirely for a cleaner look. Shows 6 products per tab across 3 columns for three clothing categories.
Example 6: Hide Empty Categories
[shortcodeglut_tabs show_empty="0" posts_per_page="12" columns="4"]
Auto-detects categories but skips any that have zero products. Displays up to 12 products per tab in a full 4-column grid. Useful for stores where some categories are not yet populated.
Example 7: Single Category Focus with Custom Title
[shortcodeglut_tabs categories="featured" section_title="Featured Products" posts_per_page="8" columns="4"]
Creates a single tab for the “featured” category with a custom section title. Useful when you want the tabbed look but are focused on one specific category.
Example 8: Minimal Configuration with Solid Color
[shortcodeglut_tabs header_bg_color="#1abc9c" posts_per_page="3" columns="3" show_header="0"]
A minimal setup with a teal solid-color tab bar, no section header, showing only 3 products per tab in a 3-column grid. Ideal for a compact product showcase section on the homepage.
Tips & Best Practices
Leave
categories empty to let the shortcode auto-detect up to 6 product categories. Use manual category slugs when you want precise control over which categories appear as tabs and in what order.
The
header_bg_color parameter accepts any valid CSS background value. Use hex colors like #3498db for solid backgrounds, or full CSS gradients like linear-gradient(135deg, #667eea 0%, #764ba2 100%) for a premium look.
Tab switching is always AJAX-powered. When a visitor clicks a tab, the product grid updates without a full page reload, providing a fast and seamless browsing experience.
Use
columns="4" for desktop-focused layouts. Use columns="3" for a balanced look that works well on tablets. Use columns="2" if you want larger product cards or are targeting mobile-first layouts.
The
categories parameter expects category slugs, not display names. For example, use categories="home-kitchen" (the slug), not categories="Home & Kitchen" (the name). You can find slugs in WordPress admin under Products > Categories.
Keep
posts_per_page between 4 and 12 for optimal performance. Since each tab loads its products via AJAX, the initial page load only fetches the first tab’s products, keeping the page fast.
If no categories are found (either auto-detected or manually specified), the shortcode displays a single “All Products” tab so your visitors can still browse your catalog.
Frequently Asked Questions
Q: What happens if I don’t specify any categories?
A: The shortcode auto-detects up to 6 product categories from your WooCommerce store and creates a tab for each. If you have more than 6 categories, only the first 6 are shown. If no categories exist at all, a single “All Products” tab is displayed as a fallback.
Q: How do I change the tab bar color?
A: Use the header_bg_color parameter. You can pass a hex color like header_bg_color="#e74c3c" for a solid red, or a full CSS gradient like header_bg_color="linear-gradient(to right, #ff7e5f, #feb47b)" for a warm gradient effect.
Q: How do I hide the section title?
A: Set show_header="0" to hide the section title header above the tabs. You can also change the title text with section_title="Your Custom Title".
Q: Why are empty categories showing up as tabs?
A: By default, show_empty="1" includes categories with no products. Set show_empty="0" to hide categories that have zero products. This only applies when auto-detecting categories (i.e., when categories is empty).
Q: Does tab switching reload the page?
A: No. Tab switching is fully AJAX-powered. When a visitor clicks a different tab, the product grid updates instantly without a page reload, ensuring a smooth and fast browsing experience.
Q: Can I show more than 6 categories?
A: Auto-detection is capped at 6 categories. To show more, manually specify the category slugs using the categories parameter with comma-separated values. There is no hard limit on manually specified categories.
Q: How is this different from [shortcodeglut_grid]?
A: The Grid shortcode displays all products in a single flat grid with optional category filtering. The Tabs shortcode organizes products under a tabbed category navigation — each tab shows only products from that category, and switching tabs is done via AJAX without reloading the page.
ShortcodeGlut — WooCommerce Product Shortcodes Plugin
Version 1.5.5 | Last Updated: May 2026