WooCommerce Product Tab for Elementor

New, Featured, On Sale, three groups, one block. A product tab lets shoppers switch between curated sets in place, without loading a new page or scrolling past sections they do not want. This is the Product Tab widget from the Magical Products Display add-on for Elementor, when to use it, how to add it, and how to keep it clear.

• Type Elementor widget
• For WooCommerce
• Layout Tabbed sections
• Best for Several groups in one block

Why tab your products

A home page often wants to show several angles of the catalog at once, but stacking them makes a long page and burying them in a menu hides them. Tabs solve both: a few labelled groups share one compact block, and the shopper picks which to see. It keeps the page short while still surfacing new arrivals, best sellers, and sale items.

Tabs vs separate sections

How to add a Product Tab in Elementor

With the Magical Products Display add-on active:

1. Activate the add-on and edit your page with Elementor.
2. Drag the Product Tab widget onto the canvas.
3. Define each tab: a label plus a product group by category or filter.
4. Choose display: grid or carousel, and how many products load.
5. Style and publish: tab styling and active state, then check mobile.

Options worth setting

• Tabs. One product group per tab, by category, tag, or filter.
• Display style. Grid or carousel for each tab.
• Product details. Price, rating, sale badge, and add-to-cart per item.
• Responsive. Tabs stack or scroll and columns adjust on small screens.
• Styling. Tab colors, active state, spacing, and typography in Elementor.

Tips for tabs that stay clear

• Use three or four tabs, not eight; too many defeat the point.
• Label by benefit, New Arrivals beats Category 3.
• Set a sensible default tab that most shoppers want first.
• Keep each tab short, a handful of products, not the full catalog.
• Make the active tab obvious with clear contrast.

Frequently asked questions