BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Bright Addons

Product Category Grid block guide

Pro

How to add the Product Category Grid block and what every setting does. It comes with Bright Addons Blocks Pro, which also includes every free block.

See the Product Category Grid block All block guides

Start

Add the block

WooCommerce product categories as cards in a grid or carousel, with images and counts.

  1. Install the plugins

    Install Bright Addons Blocks Pro from your account and activate your licence. It includes every free block. WooCommerce must be active.

  2. Add the block

    Open a page or post in the block editor, press +, and search for “Product Category Grid”. It is in the Bright Addons Pro category.

  3. Set it up

    Open the block sidebar and work through Categories, Layout, Product card, Carousel and Colors.

  4. Publish

    Preview the page on desktop, tablet and phone, then publish. The block loads its own CSS and JavaScript only on pages that use it.

Panel 1 of 5

Categories

Open the block sidebar and find the Categories panel.

Setting What it does Choices
Show Choose one. Main categories, All categories, Subcategories of…, Subcategories of the category being viewed, Manual selection
Parent category Text you type. –
Categories Shown in the order you pick them. –
Number of categories From 1 to 60. –
Order by Choose one. Shop order (drag and drop order), Name, Number of products
Order Choose one. Ascending, Descending
Hide empty categories On or off. –
Hide "uncategorized" On or off. –

Panel 2 of 5

Layout

Open the block sidebar and find the Layout panel.

Setting What it does Choices
Layout Choose one. Grid, Carousel
Columns From 1 to 8. –
Gap Text you type. –

Panel 3 of 5

Product card

Open the block sidebar and find the Product card panel.

Setting What it does Choices
Card style Choose one. Overlay (text on image), Classic (text below), Circle (round image)
Image resolution Choose one. Thumbnail – 150 x 150, Medium – 300 x 300, Medium large – 768 x 0, Large – 1024 x 1024, 1536×1536 – 1536 x 1536, 2048×2048 – 2048 x 2048, Woocommerce thumbnail – 300 x 300, Woocommerce single – 600 x 0, Woocommerce gallery thumbnail – 100 x 100, Full
Image shape Choose one. 1:1, 4:5, 3:4, 4:3, 3:2, 16:9
Text position Choose one. Bottom, Center, Top
Title tag Choose one. H1, H2, H3, H4, H5, H6, div, span, p
Product count On or off. –
Count text (one product) {count} is replaced with the number. –
Count text (several products) Text you type. –
Description On or off. –
Description length (words) A number. –
Button On or off. –
Button text Text you type. –
Button icon Icon picker. –
Icon position Choose one. Before, After
Open in a new tab On or off. –

Panel 4 of 5

Carousel

Open the block sidebar and find the Carousel panel.

Setting What it does Choices
Slides per view (desktop) From 1 to 8. –
Slides per view (tablet) From 1 to 6. –
Slides per view (phone) From 1 to 3. –
Gap (px) From 0 to 80. –
Arrows On or off. –
Arrows position Choose one. On the sides, inside, On the edges, Outside, Below, centered, Below, right, Above, right
Pagination Choose one. Dots, Lines, Numbers, Fraction (1 / 5), Progress bar, None
Align slides Choose one. Start, Center
Move by Choose one. One slide, A full page
Loop On or off. –
Autoplay On or off. –
Autoplay delay (ms) From 1000 to 15000. –
Pause on hover On or off. –
Speed (ms) From 100 to 2000. –
Equal height slides On or off. –

Panel 5 of 5

Colors

Open the block sidebar and find the Colors panel.

Setting What it does Choices
Dots Color picker. –
Active dot Color picker. –
Arrow background Color picker. –
Arrow icon Color picker. –

Questions

Good to know

Is the Product Category Grid block free?

Product Category Grid is a Pro block. It comes with Bright Addons Blocks Pro, which has the same plans and prices as Bright Addons Pro for Elementor and includes all 62 free blocks.

Does it need WooCommerce?

Yes. This block shows WooCommerce data, so WooCommerce must be active. Without it, the block shows nothing on the page.

Do I need Elementor for this block?

No. It is a block for the WordPress block editor (Gutenberg). Elementor is not needed. If you use Bright Addons Pro for Elementor on the same site, both plugins work side by side.

Will it slow down my pages?

No. Each block loads only its own small CSS and JavaScript, and only on pages where it is used. Blocks you do not need can be switched off in Bright Blocks.

Does it work with my theme?

Yes. The blocks work with block themes and classic themes, and follow your theme fonts. Wide and full width alignment are supported.

Bright Addons Blocks

Build with every block

Blocks Pro adds 99 Pro blocks, Pro effects for every block, Theme Templates and popups to the 62 free blocks.

See Blocks Pro prices See the Product Category Grid block