The Grid layout is ideal for displaying multiple categories in a structured and clean design. It keeps your products organized, making it easier for customers to explore your store. This guide walks you through the entire process of setting up a Grid Showcase in WC Category Showcase, from start to finish.
Step 1: Prepare Your Category Images
Before you start building, make sure each category has a clear, high-quality image. These images define the overall look of your showcase.
Follow this guide to learn how to add or update category images: Preparing Category Images
Use consistent image dimensions to keep your grid aligned and professional.
Step 2: Create a New Showcase
Once your images are ready, it’s time to create your first showcase.
Go to Category Showcase → Add New Showcase. Give your showcase a title and configure its basic layout.
Detailed instructions can be found here: Creating Your First Showcase
Step 3: Choose the Layout Type
When you reach the Layout Selection section, choose Grid Layout from the available options.
This layout displays your product categories in a structured grid with rows and columns.
To explore layout options in detail: Layout Selection
Step 4: Select Categories to Display
Next, go to the Category Selection section.
Choose which categories (and subcategories, if needed) you want to display. You can also control the order and visibility.
Learn how selection works here: Category Selection
Step 5: Customize the Title and Description
To make your showcase informative and engaging, enable titles and descriptions for each category from the Showcase tab.
This helps customers understand what each section represents.
Detailed setup instructions: Title & Description Settings
Step 6: Adjust Category Card Appearance
Each category in the grid is displayed as a card.
You can control how these cards look. Change borders, background colors, or hover effects.
Read more about it here: Category Card Settings
Step 7: Configure CTA Button
Then move to the Button Style Settings to customize your “View Products” or “Shop Now” buttons.
See guides for both: Button Style Settings
Step 8: Fine-Tune Fonts and Typography
Typography affects how your content feels.
You can adjust font size, color, and spacing in the Fonts Settings tab.
Detailed guide: Fonts Settings
Step 9: Publish and Preview
Once everything looks right, click Publish and preview your showcase on the front end.
You should now see a shortcode. You can copy this code and paste it inside any page using the shortcode block. Now, the product categories should be neatly displayed in a grid format.