The theme provides a powerful custom shortcode to dynamically display lists of product categories or tags anywhere on your site. Designed with a mobile-first approach, the list features horizontal scrolling with drag support, ensuring a smooth user experience on all devices.
This tool is ideal for creating visual navigation bars above product grids or suggesting related topics on single product pages.
How it Works
The shortcode [woo_taxonomy] handles both visual cards and text-only lists. When displaying images, it follows a smart 3-step fallback logic to ensure the best possible visual is always shown:
- Alpha Product Taxonomy Thumbnail: It first checks for a custom image set specifically for this taxonomy (find option in product taxonomy backend: Alpha Product Taxonomy Thumbnail).
- Product Image Fallback: If no thumbnail is set, it scans the 10 most recent products in that term and uses the Featured Image of the first available product. This also excludes any images that have already been used by a previously listed term in the current shortcode execution to prevent visual duplication.
- Smart Exclusion: To reduce redundancy, the shortcode automatically hides the current term when placed on a specific category or tag archive page.
Usage Examples
1. Standard Visual Cards
Displays categories with images.
[woo_taxonomy taxonomy="product_cat"]2. Text-Only Links
To display a compact list of links to your product tag archives without images (e.g., for a “Related Tags” section), simply set show_images to “no” or “false”.
[woo_taxonomy taxonomy="product_tag" show_images="no"]3. Custom Styling (Mobile & Desktop)
You can control sizes and spacing directly via shortcode attributes without writing CSS.
[woo_taxonomy image_display_size="3.5rem" image_display_size_mobile="2rem" font_size="1rem"]Configuration & Attributes
The shortcode is highly customizable. Below is a full list of available attributes:
| Attribute | Default | Description |
|---|---|---|
| taxonomy | both | Defines which terms to display. Accepted values: product_cat, product_tag, or both. |
| show_images | yes | Toggle image display. Set to no for a text-only list. |
| image_resolution | thumbnail | The WordPress image size to load (e.g., thumbnail, medium, full). |
| image_display_size | 3.25rem | Forces a specific width/height for images on desktop. All common units can be used. |
| image_display_size_mobile | 2.75rem | Forces a specific width/height for images on mobile devices (<768px). |
| padding | 0.5rem 1.25rem | Adds padding to the card content (e.g., 10px). |
| font_size | 0.9rem | Sets the font size for the term name (e.g., 16px). |
| class | (empty) | Add custom CSS classes to the container. The class “no-cards” can be set to hide the card design. |
Advanced Layout Options
The list automatically handles horizontal scrolling and touch-dragging on all screen sizes. However, you can alter the visual style of the cards themselves:
Minimalist Look (No Cards)
If you want to remove the background, border styles and padding, add the utility class .no-cards. It’s an easy way to create a clean and minimal dynamic taxonomy list.
[woo_taxonomy class="no-cards" show_images="no"]