If you’re running a WooCommerce store and want to display a stylish category dropdown with images and subcategories, this custom shortcode function will do the job. It allows you to create an easy-to-use dropdown that displays product categories, subcategories, and even category images.
In this post, I’ll walk you through how this function works, its features, and how to use it effectively in your WordPress site.
Why Use a Custom Category Dropdown?
WooCommerce provides built-in category listings, but they’re often static and lack customization. This custom WooCommerce category dropdown is designed to:
✅ Display categories dynamically with images
✅ Support subcategories with expandable sections
✅ Include a FontAwesome icon if no image is available
✅ Use a sleek, user-friendly design with animations
The wc_category_dropdown Shortcode
This function generates a category dropdown menu and can be added anywhere using a shortcode. You simply place [wc_category_dropdown] in your post, page, or widget, and it will display a styled category selector.
Features & Attributes
The shortcode supports several attributes to customize the output:
| Attribute | Default Value | Description |
|---|---|---|
hide_empty | true | Hide categories with no products (true or false). |
parent_only | false | Show only parent categories (true or false). |
orderby | name | Order categories by name, id, or count. |
order | ASC | Sort order (ASC or DESC). |
show_image | true | Show category images (true or false). |
default_icon | fa-folder | Default FontAwesome icon if no image is found. |
How It Works
The function first retrieves WooCommerce categories using get_terms(), based on the provided attributes. Then, it dynamically generates a dropdown menu with category images (if available) or a fallback FontAwesome icon.
It also includes JavaScript to enable the toggle effect for subcategories and CSS for styling.
How to Use It in Your Site
- Add the function to your functions.php file or a custom plugin:
add_shortcode("wc_category_dropdown", "wc_category_dropdown");
- Use the shortcode in your WordPress content:
[wc_category_dropdown] - Customize it using shortcode attributes, e.g.:
[wc_category_dropdown parent_only="true" show_image="false"]
Final Thoughts
This WooCommerce category dropdown function enhances user navigation and helps customers quickly find products within categories. By incorporating images and subcategory toggles, it improves the user experience and makes category selection more interactive.
💡 Want more WooCommerce customizations? Stay tuned for more WordPress and WooCommerce tips! 🚀
