Product Categories

← All widgetsWidget 119 · emcp_custom_119

Elementor widget6 layouts11 content options32 style options4 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: woocommerce, categories, product categories, tiles, collections, dynamic.

Setup guide

Open a page in Elementor, search the panel for Product Categories and drag it into a container.
Content › Layout: Tile Layout, Columns, Heading, Show Product Count, Count Suffix, Show Description, Link Text (overlay / card), Fallback Image (no thumbnail) and 2 more.
Content › Query: Categories.
Pick a Tile Layout: Image with overlay title, Card (image top, title below), Circle image, title below, List with counts, Text pills, Mosaic (first tile large). Each one is shown below.
Style tab sections: Tile, Text. Colours, typography and spacing set here are scoped to this widget instance.
Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.

Categories is a live query (source: terms). A "Categories" panel with filters, ordering and count is generated for it; results come from this site's data on every page load.

Conditional options: Count Suffix appears when Show Product Count is yes.

Layout

Image with overlay title

Tile Layout = overlay

Option	Type	Choices / range	Default	Notes
Tile Layout `layout`	Dropdown	Image with overlay title, Card (image top, title below), Circle image, title below, List with counts, Text pills, Mosaic (first tile large)	overlay
Columns `columns`	Dropdown	2, 3, 4, 5, 6	4	Responsive
Heading `heading`	Text
Show Product Count `show_count`	Toggle	on / off	yes
Count Suffix `count_suffix`	Text		products	Shown when show_count = yes
Show Description `show_desc`	Toggle	on / off
Link Text (overlay / card) `cta_text`	Text		Shop now
Fallback Image (no thumbnail) `placeholder_image`	Image
Title Tag `title_tag`	Dropdown	H2, H3, H4	h3
No Categories Text `empty_text`	Text		No categories found.

Option	Type	Choices / range	Default	Notes
Gap `gap`	Slider	min 0, max 80, px	20	Responsive
Tile Height (overlay / mosaic) `tile_h`	Slider	min 100, max 700, px	240	Responsive
Image Height (card) `img_h`	Slider	min 80, max 500, px	180
Circle Size `circle_size`	Slider	min 60, max 300, px	140
Tile Background `tile_bg`	Background
Border `tile_border`	Border
Radius `tile_radius`	Slider	min 0, max 60, px	14
Shadow `tile_shadow`	Box shadow
Hover Shadow `tile_shadow_h`	Box shadow
Content Padding `tile_pad`	Dimensions
Overlay Color `overlay`	Color		rgba(16,24,40,.45)
Overlay Hover Color `overlay_h`	Color		rgba(106,17,203,.6)
Zoom Image on Hover `img_zoom`	Toggle	on / off	yes
Image Filters `img_filter`	Css_filter
Text Align `align`	Button group	Left, Center, Right	center

Option	Type	Default
Heading Typography `h_typo`	Typography
Heading Color `h_color`	Color	#101828
Title Typography `title_typo`	Typography
Title Color `title_color`	Color	#101828
Title Color on Image `title_color_overlay`	Color	#ffffff
Title Hover Color `title_color_h`	Color	#6a11cb
Count Typography `count_typo`	Typography
Count Color `count_color`	Color	#667085
Count Color on Image `count_color_overlay`	Color	rgba(255,255,255,.85)
Description Typography `desc_typo`	Typography
Description Color `desc_color`	Color	#475467
Link Text Typography `cta_typo`	Typography
Link Text Color `cta_color`	Color	#ffffff
Pill Background `pill_bg`	Color	#f2f4f7
Pill Hover Background `pill_bg_h`	Color	#6a11cb
Pill Hover Text `pill_color_h`	Color	#ffffff
List Divider `list_divider`	Color	#eaecf0