WooCommerce Products Categories for Elementor

The fastest way into a store is often a picture, not a menu. A products categories grid turns your WooCommerce sections into a clickable board of images, so shoppers head straight for what they want. This is the Products Categories widget from the Magical Products Display add-on for Elementor, when to use it, how to add it, and how to make navigation obvious.

• Type Elementor widget
• For WooCommerce
• Layout Category grid
• Best for Visual navigation

Why a visual category grid

A text menu lists categories; a visual grid sells them. When your sections are image-led, dresses, plants, tools, a picture communicates faster than a word and invites a click. Placed high on a home or shop page, a category grid gives every visitor a clear first step and cuts the number who bounce because they could not find their aisle.

Category grid vs a text menu

How to add a Products Categories grid in Elementor

With the Magical Products Display add-on active:

1. Activate the add-on and edit your page with Elementor.
2. Drag the Products Categories widget onto the canvas.
3. Pick categories: all, top-level, or hand-picked, and set the order.
4. Set columns for desktop, tablet, and mobile.
5. Style and publish: overlays and hover effects, then check mobile.

Options worth setting

• Category source. All, top-level only, or a hand-picked set.
• Ordering. By name, product count, or a custom order.
• Card content. Image, name, and optional product count.
• Responsive columns. Columns for desktop, tablet, and mobile.
• Styling. Overlays, spacing, radius, and hover effects in Elementor.

Tips for category navigation that works

• Use a strong image per category, not a placeholder.
• Keep it to the main sections, so the grid does not overwhelm.
• Show the product count when it reassures, hide it when it is low.
• Match ratios so the grid stays even and calm.
• Place it high on the page, where the first-step decision happens.

Frequently asked questions