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

Product Tabs block guide

Pro

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

Start

Add the block

WooCommerce products in tabs: featured, on sale, best selling, top rated, newest or categories.

  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 Tabs”. It is in the Bright Addons Pro category.
  3. Set it up

    Open the block sidebar and work through Tabs, Products, Product card and Add to cart and quick view.
  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 4

Tabs

Open the block sidebar and find the Tabs panel.

Setting What it does Choices
Tab style Choose one. Pills, Underline, Plain text

Panel 2 of 4

Products

Open the block sidebar and find the Products panel.

Setting What it does Choices
Products per tab From 1 to 48. –
Columns From 1 to 8. –
Column gap Text you type. –
Row gap Text you type. –
Hide out of stock products On or off. –
Nothing found message Text you type. –

Panel 3 of 4

Product card

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 4

Add to cart and quick view

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

Questions

Good to know

Is the Product Tabs block free?

Product Tabs 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.