SUITE MODULE — ECOMMERCE

WooCommerce Product Configurator Toolkit — Modals, Grids, and Staggs Integration

Flat product pages lose sales. LuperIQ Storefront Toolkit adds interactive product modals, a fully configurable product grid shortcode, polished Staggs configurator integration, checkout field optimization, and dual-backend user journey tracking — all from one module with eight admin pages.

The Problem With Default WooCommerce Product Presentation

WooCommerce ships with a functional but rigid product display. Product descriptions are static blocks of text below the image. Product grids use the theme's default layout, offering no control over columns, spacing, shadows, or hover effects. If you run a product configurator like Staggs, you get a working tool but no integration with your store's typography, title injection, or smart default selections. Checkout fields follow WooCommerce's billing-first layout, which confuses customers at gift-focused stores who need to enter shipping details first.

The Storefront Toolkit solves all of these problems in a single module. It replaces static product descriptions with interactive modal popups, gives you a responsive product grid shortcode with full visual control, integrates cleanly with the Staggs product configurator, reorganizes checkout fields for shipping-first stores, and adds dual-backend user journey tracking with conversion analytics. Eight admin pages give you control over every feature without writing code.

Everything in the WooCommerce Product Configurator Toolkit

Who This Module Is Built For

Any WooCommerce store that needs more control over how products are presented, configured, and purchased.

Custom Product Stores (Monogram, Engraving, Personalization)

• Product configurators need polished integration with your store theme, not a bolted-on widget.
• Checkout must handle gift scenarios where the buyer and recipient are different people.
• Monogram processing with custom fonts and SVG data needs a structured backend, not ad-hoc shortcodes.

WooCommerce Stores Using Staggs Product Configurator

• Staggs generates functional but unpolished configurator pages — title injection and typography control fix this.
• Smart auto-selection pre-fills sensible defaults so customers start with a configured product instead of a blank slate.
• Duplicate element removal cleans up the visual noise that Staggs adds to your product pages.

Store Owners Who Want Behavior Visibility

• Journey tracking shows exactly how customers navigate from landing page through product selection to checkout.
• UTM attribution connects marketing campaigns to actual conversion funnels — see which traffic sources convert.
• All tracking data stays on your server with configurable backends, from lightweight SQLite to production-scale ClickHouse.

How the Product Modal System Works

The module hooks into WooCommerce's short description filter and replaces static product text with interactive modal trigger buttons. Three modal types are available: Product Info displays the product's short description in a clean popup overlay, Product Images opens a gallery lightbox with all attached product images, and Color Details shows a swatch reference card for products with color options.

All three modal types are fully ARIA-accessible with keyboard navigation, focus trapping, and screen reader announcements. Modal appearance is configurable from the admin — background color, overlay opacity, border radius, and maximum width are all adjustable in Settings. Specific products can be excluded from modal treatment using a comma-separated product ID list, and special message products can display custom content instead of the standard modal buttons.

Modal content is loaded via AJAX so it does not add weight to the initial page load. The modal handler script and CSS are enqueued only on pages where WooCommerce products are displayed, keeping your non-product pages clean.

Product Grid Shortcode With Full Visual Control

The [luper_product_grid] shortcode renders a responsive CSS Grid layout that adapts to desktop, tablet, and mobile breakpoints. Column counts are independently configurable for each breakpoint — three columns on desktop, two on tablet, one on mobile is a common setup, but you can set any combination from the Grid Styling admin page.

Beyond columns, the grid gives you control over gap spacing between products, inner padding within each product card, box shadow intensity, border radius, and hover effects. All styling is generated as dynamic CSS — no static stylesheet to override. The grid supports a named 10-product catalog, so you can curate exactly which products appear in the grid rather than relying on category queries or recent product lists.

Modal trigger buttons are automatically added to grid items via the woocommerce_after_shop_loop_item hook, so products in the grid get the same interactive modal treatment as products on individual product pages. The grid shortcode works on any page or post — use it for landing pages, curated collections, or homepage product showcases.

User Journey Tracking and Conversion Analytics

The module includes a complete user journey tracking system that records how customers navigate your store. Five configurable tracking levels let you choose between lightweight page-view tracking and detailed interaction logging. Smart diff detection ensures that repeated events (like a customer refreshing the same page) are not logged as separate journey steps.

Journey data is stored in three dedicated MySQL tables with full UTM parameter attribution. When a customer arrives from a Google ad, an email campaign, or an organic search result, the UTM source, medium, campaign, term, and content are captured and tied to every subsequent journey event. The Journey Analytics dashboard visualizes conversion funnels using Chart.js, showing exactly where customers drop off between landing page, product view, add-to-cart, and checkout.

For high-traffic stores, the tracking system supports five storage backends: RabbitMQ for message queue-based ingestion, ClickHouse for columnar analytics, Redis for in-memory buffering, SQLite for lightweight single-file storage, and flat file logging for the simplest setups. A daily cleanup cron removes stale journey data to keep the database lean. All data stays on your server — no external analytics service is involved.

What You Get: Eight Admin Pages, One Module

Frequently Asked Questions

Do I need the Staggs plugin for this module to work?

No. The Staggs integration features are optional and only activate when Staggs is detected on your site. The product modals, grid shortcode, checkout field manager, and journey tracking all work independently without Staggs installed.

Will the product modals conflict with my theme's lightbox or popup plugin?

The modal system uses its own isolated CSS and JavaScript with unique class names. It does not interfere with theme lightboxes or other popup plugins. If you are using Bricks Builder, the module includes explicit overrides to prevent theme conflicts.

How does the checkout field manager work with WooCommerce Blocks checkout?

The checkout field manager hooks into the classic WooCommerce checkout via standard PHP filters. It moves email and phone to the shipping section and syncs shipping to billing. If you are using the WooCommerce Blocks-based checkout, the field reorganization applies to the classic checkout form only.

What happens to journey tracking data if I switch backends?

Each backend stores data independently. If you switch from SQLite to Redis, existing SQLite data remains on disk but new events go to Redis. You can export journey data from the analytics dashboard before switching if you need to preserve historical data.

Is the REST API authenticated?

The products endpoint at storefront/v1/products is public by design, matching WooCommerce's own public product endpoints. It supports category filtering, search queries, and pagination. If you need authenticated endpoints for custom integrations, the module follows standard WordPress REST authentication conventions.

Can I use the product grid shortcode on non-WooCommerce pages?

Yes. The [luper_product_grid] shortcode works on any WordPress page or post. It queries WooCommerce products internally and renders the grid wherever the shortcode is placed — landing pages, blog posts, or custom page templates.

Transform Your WooCommerce Product Pages Today

Install LuperIQ, activate the Storefront Toolkit, and add interactive product modals, a responsive grid shortcode, and conversion tracking to your store. Eight admin pages give you full control without code.

Get Started