WordPress Plugin

Category Popup Menu

Open an animated popup of WooCommerce subcategories from any link anywhere on your site — no page reload, Web Vitals safe, theme independent.
Version 1.2
WordPress 5.8+
WooCommerce
Any Theme
By Imran @ metaaffinity.net

What it does
A seamless browsing experience without leaving the page
Place a trigger link anywhere on your site — in a page, post, widget, Elementor block, or navigation menu — and clicking it opens a beautiful animated modal showing that category’s subcategories with images and direct links.

On desktop it appears as a centered card with a smooth fade-in. On mobile it slides up from the bottom as a drawer. Results are cached after the first open, so repeat visits within the same session are instant with no loading spinner. Zero extra HTTP requests on page load.

Features
Built for performance, flexibility, and any theme
Animated Popup
Centered card with smooth fade/slide on desktop. Bottom drawer slide-up on mobile. Backdrop blur, close on click outside or Esc key.

Three Trigger Formats
By numeric ID, by slug with cat- prefix, or by bare slug with hcp-trigger class. Works from any link anywhere on the site.

Shortcode
Generate trigger links with [cat_popup id=”…”] or [cat_popup slug=”…”] shortcodes — no HTML writing needed. Works in posts, pages, widgets, and Elementor.

Product Image Fallback
If a subcategory has no thumbnail set, a product image is borrowed automatically. No empty boxes in the popup grid — always looks complete.

Web Vitals Safe
Zero requests on page load. Data is only fetched on intent (hover/touch) or during browser idle time — no impact on LCP, FID, or CLS scores.

Two-Layer Caching
JS memory cache for instant same-session repeat opens. WordPress transients (12 hours) for server-side data. Both layers work transparently.

View All Button
Each popup has a “View All” button that links to the parent category archive page. Lets users see all products without hunting for the right link.

Any Theme
Pure vanilla JS/CSS/AJAX — no jQuery, no Woodmart, no external libraries or CDN dependencies. Installs and works on any WordPress theme.

Installation
Three steps and you’re live
1
Upload the plugin
Upload the hash-category-popup folder to /wp-content/plugins/

2
Activate
Go to Plugins → Installed Plugins and activate Category Popup Menu

3
Add trigger links
Place trigger links or shortcodes anywhere on your site — the plugin handles everything else automatically

Three Ways to Trigger the Popup
Place a trigger link anywhere on your site — pages, posts, menus, widgets, Elementor
1
By Numeric ID
No CSS class needed — just the href

Use the WooCommerce category’s term ID prefixed with #cat-. Find the ID in WooCommerce → Categories → hover over the category name.




HTML 
<a href="#cat-63">Browse Dental Instruments</a>

2
By Slug with cat- Prefix
No CSS class needed — human-readable

Use the category slug prefixed with #cat-. More readable than numeric IDs — the slug is the URL-friendly version of the category name.




HTML 
<a href="#cat-dental-instruments">Browse Dental Instruments</a>

3
By Bare Slug
Requires class=”hcp-trigger” to opt in

Use the slug directly without any prefix, but add class="hcp-trigger" to tell the plugin to handle this link. Useful when you already have existing hash links.




HTML 
<a href="#dental-instruments" class="hcp-trigger">Browse Dental Instruments</a>

Shortcode
Generate trigger links from the WordPress editor — no HTML needed



Shortcode 
[cat_popup id="63" label="Browse Dental Instruments"]
[cat_popup slug="dental-instruments" label="Browse Dental Instruments"]

Parameter Required Description
id One of id / slug WooCommerce category term ID
slug One of id / slug WooCommerce category slug
label No Link text — default is “Browse Categories”
class No Extra CSS classes added to the generated link

Performance & Web Vitals
Two-layer prefetch strategy — zero cost on page load
Layer 1 — Intent Prefetch
When a user hovers or touches a trigger link, that category’s data is fetched immediately and silently — before the click happens. The popup opens instantly with no spinner when clicked.

Layer 2 — Idle-time Prefetch
After the page fully loads and the browser is idle (requestIdleCallback), remaining trigger links are prefetched one by one with a 150ms gap — no bandwidth spike, no competition with critical resources.

CSS Customization
Override in Appearance → Customize → Additional CSS



CSS Variables 
:root {
  --hcp-width:    1100px;   /* modal max-width */
  --hcp-img-size: 56px;     /* category image size in grid */
  --hcp-radius:   12px;     /* modal corner radius */
  --hcp-accent:   #2d7d46;  /* button / link accent colour */
}

Caching
Client-side and server-side, both layers work together

JS Memory Cache
Per-session cache — repeat opens within the same browser session are instant with no AJAX request fired, no loading spinner shown.


WordPress Transients (12h)
Category data and product image fallbacks cached server-side for 12 hours. Auto-expires and refreshes automatically.
To force-refresh the cache:
DELETE FROM wp_options
WHERE option_name LIKE '_transient_hcp_%';

Frequently Asked Questions
Common questions answered
Can I use it without WooCommerce?
No — the plugin is built specifically for WooCommerce product categories (product_cat taxonomy). It uses WooCommerce category data, thumbnails, and term links. WooCommerce must be installed and active.

Does it work inside Elementor or other page builders?
Yes. You can add trigger links inside any Elementor text or HTML widget, Gutenberg blocks, Classic Editor, or any widget area. The plugin uses click delegation so it works with dynamically added links too.

How do I find my WooCommerce category ID?
Go to WooCommerce → Categories (or Products → Categories). Hover your mouse over a category name and look at the URL shown in the browser’s status bar — you’ll see tag_ID=63 where 63 is the category ID.

Does the popup work on mobile?
Yes. On mobile (screens under 640px) the popup appears as a bottom drawer that slides up from the bottom edge — a familiar mobile pattern. It is fully touch-friendly with tap-to-close on the backdrop.

Can I style the popup to match my brand colours?
Yes. Override the CSS variables listed in the CSS Customization section above using Appearance → Customize → Additional CSS. The --hcp-accent variable controls buttons and links; --hcp-width controls modal width; --hcp-radius controls corner rounding.

Is it compatible with WP Rocket, LiteSpeed Cache, and other caching plugins?
Yes. The popup uses AJAX to fetch data at click/hover time, so it is completely compatible with any full-page or object caching plugin. The nonce used for AJAX security is generated fresh on each page load and is not cached.

What if a category has no subcategories?
The popup opens and shows a “No subcategories found” message along with a “View All” button that links to the category archive. The popup does not break or throw an error — it handles empty categories gracefully.

Changelog
Release history
v1.2Web Vitals-safe two-layer prefetch (intent + idle-time); loading message updated; product count line removed
v1.1hcp-trigger class support for bare slug links; bare slug popup fixed for plain hash hrefs
v1.0Initial release — animated popup, AJAX subcategories, shortcode, product image fallback, 12h transient cache

🌐 metaaffinity.net

Developed by Imran · WordPress plugin development & WooCommerce customization