How to add the Product Grid Pro block and what every setting does. It comes with Bright Addons Blocks Pro, which also includes every free block.
Start
WooCommerce products in a grid with category tabs, sorting, filters, pagination, load more, quick view and add to cart.
Panel 1 of 7
Open the block sidebar and find the Products panel.
| Setting | What it does | Choices |
|---|---|---|
| Show | Choose one. | Latest products, Featured products, On sale, Best selling, Top rated, Manual selection, Related to the current product, Upsells of the current product, Current query (shop and category pages) |
| Products | Shown in the order you pick them. The list holds the 200 newest products; use the field below for older ones. | – |
| More product IDs | Comma separated. | – |
| Only from categories | Text you type. | – |
| Leave out categories | Text you type. | – |
| Only with tags | Text you type. | – |
| Number of products | From 1 to 100. | – |
| Skip first | A number. | – |
| Order by | Choose one. | Newest, Name, Price, Sales, Rating, Shop order (menu order), Random |
| Order | Choose one. | High to low / newest / z to a, Low to high / oldest / a to z |
| Hide out of stock products | On or off. | – |
| Leave out the product being viewed | On or off. | – |
| Nothing found message | Text you type. | – |
Panel 2 of 7
Open the block sidebar and find the Layout panel.
| Setting | What it does | Choices |
|---|---|---|
| Columns | From 1 to 8. | – |
| Column gap | Text you type. | – |
| Row gap | Text you type. | – |
Panel 3 of 7
Open the block sidebar and find the Product card panel.
| Setting | What it does | Choices |
|---|---|---|
| Card style | Choose one. | Classic (button below), Hover (button slides over the image), Minimal (no box), Side (image left) |
| 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, 2:3, 4:3, 3:2, Original |
| Image fit | Choose one. | Fill (crop), Show all (no crop) |
| Image on hover | Choose one. | Nothing, Zoom, Show the second gallery image |
| Sale badge | On or off. | – |
| Sale text | {percent} is replaced with the discount. Example: Save {percent}%. | – |
| New badge | On or off. | – |
| New for (days) | A number. | – |
| New text | Text you type. | – |
| Featured badge | On or off. | – |
| Featured text | Text you type. | – |
| Out of stock badge | On or off. | – |
| Out of stock text | Text you type. | – |
| Badges position | Choose one. | Top left, Top right |
| Category | On or off. | – |
| Title tag | Choose one. | H1, H2, H3, H4, H5, H6, div, span, p |
| Title lines | Longer titles are cut with "…". Leave empty to show the full title. | – |
| Star rating | On or off. | – |
| Show stars without reviews | On or off. | – |
| Number of reviews | On or off. | – |
| Price | On or off. | – |
| Short description | On or off. | – |
| Description length (words) | A number. | – |
| Open products in a new tab | On or off. | – |
Panel 4 of 7
Open the block sidebar and find the Add to cart and quick view panel.
| Setting | What it does | Choices |
|---|---|---|
| Add to cart button | On or off. | – |
| Button shows | Choose one. | Icon and text, Text only, Icon only |
| Button icon | Icon picker. | – |
| Add to cart text | Leave the three text fields empty to use the WooCommerce wording. | – |
| Text for products with options | Text you type. | – |
| Text when it cannot be bought | Text you type. | – |
| Add without reloading the page | On or off. | – |
| Text after adding | Text you type. | – |
| After adding | Choose one. | Button becomes "view cart", Button goes back to "add to cart" |
| View cart text | Text you type. | – |
| Quick view | A button on the image opens the product in a popup, with gallery, description and add to cart. | – |
| Quick view icon | Icon picker. | – |
| Quick view label | Read by screen readers and shown as a tooltip. | – |
| Quick view button | Choose one. | Appears on hover, Always visible |
Panel 5 of 7
Open the block sidebar and find the Result count and sorting panel.
| Setting | What it does | Choices |
|---|---|---|
| Result count | For example: Showing 1 to 8 of 24 products. | – |
| Sorting dropdown | Visitors sort by popularity, rating, date or price without reloading the page. | – |
| Sorting label | Text you type. | – |
Panel 6 of 7
Open the block sidebar and find the Category filter panel.
| Setting | What it does | Choices |
|---|---|---|
| Show category filter | Visitors switch categories without reloading the page. | – |
| Categories to show | Leave empty to show the main categories that have products. | – |
| "All" label | Text you type. | – |
| Style | Choose one. | Pills, Underline, Plain text |
Panel 7 of 7
Open the block sidebar and find the Pagination panel.
| Setting | What it does | Choices |
|---|---|---|
| Type | Choose one. | None, Numbers, Previous / next, Numbers with previous / next, Load more button, Infinite scroll |
| Page limit | 0 for no limit. | – |
| Previous text | Text you type. | – |
| Next text | Text you type. | – |
| Button text | Text you type. | – |
| Button icon | Icon picker. | – |
| Icon position | Choose one. | Before, After |
| Loading text | Text you type. | – |
| Scroll to top on page change | On or off. | – |
Questions
Product Grid Pro 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.
Yes. This block shows WooCommerce data, so WooCommerce must be active. Without it, the block shows nothing on the page.
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.
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.
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
Blocks Pro adds 99 Pro blocks, Pro effects for every block, Theme Templates and popups to the 62 free blocks.
Yearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.
