The category showcase shortcode allows you display either specifically selected categories or all categories from different post types such as Post, Portfolio, WooCommerce Product and News.
In this article, we will explain how to display the category showcase and configure the categories and style.
To see the category showcase shortcode in action, check out the demo page.
Displaying the Category Showcase Shortcode
To add the category showcase shortcode:
| Setting | Descripiton |
|---|---|
| Choose Loop Feed | Defines from which post type to show categories. 4 options are available: Post Category, Portfolio Category, WooCommerce Product Category, News Category |
| Select Specific Categories To Show | Determines the visible categories. If nothing is selected all the categories of the post type will be shown. |
| Image Size | Sets the image size dimensions. |
| Show Description | Toggles the visibility of a category description. |
Adding an Extra Class Name
Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.
You can read Adding custom CSS class to a shortcode article for further explanation.
Configuring the Layout and Styling
There are some more settings in Category Showcase Settings pop-up which allow you to configure the layout of categories.
To configure the layout:
| Setting | Descripiton |
|---|---|
| How Many Columns? | Defines the number of columns for categories. |
| Layout Style | Defines the layout style. Two options are available: Grid and Masonry. |
| Item Spacing | Sets the space between category items in pixel. |
| Setting | Descripiton |
|---|---|
| Title / Description Color | Sets category title and description text color. |
| Title / Description Animations ( On Mouse Over) | Defines how category title and description appear on mouse over. 5 options are available: None, Simple, Framed, Modern, Editorial |
| Image Animations ( On Mouse Over) | Defines the category image animation on mouse over. 5 options are available: None, Blur, Gradient, Zoom, Slide |
| Overlay Color | Sets an overlay color for the category image. It covers the whole image. It’s best to define a transparent color so the background image can be visible. |
Configuring the Visibility for Devices
To make the Category Showcase shortcode visible only for some devices such as Phones, Tablets, Mega Tablets, Netbooks, Desktops, there is a setting in Button settings pop-up which is called Visibility For Devices. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read Configuring the visibility for devices article.
