Bootstrap Product Display — WooCommerce Product Grids via Shortcode & Elementor

The Problem It Solves

WooCommerce's default product display is functional but inflexible — and heavily tied to the active theme. Getting a clean, responsive product grid into a specific page section, a landing page, or a widget area without fighting the theme's stylesheet is harder than it should be. Most solutions reach for a page builder extension or a bloated plugin suite. This plugin takes a different approach: leverage Bootstrap 5, which many themes and builds already load, and give the developer or site owner a single shortcode or Elementor widget that works cleanly anywhere it's placed.

Two Ways to Deploy

Shortcode: Drop [bootstrap_products] into any page, post, or text widget. Control category, columns, product limit, and icon via attributes — no settings screen required for individual instances. Multiple shortcodes can appear on the same page independently.

[bootstrap_products category="clothing" columns="4" limit="8" icon_class="fa-solid fa-gift"]

Elementor Widget: A dedicated "Bootstrap Product Display" widget appears in the Elementor panel. The same controls — category (multi-select dropdown), columns (1–6), product count, and icon class — are all exposed as Elementor controls, making it fully compatible with visual editing without any shortcode knowledge.

Both routes share a single render function under the hood, so the output is identical regardless of how it's invoked.

Customisation

Global styling is managed from Settings > Product Display — a single settings page covering border colour, divider colour, background colour, text colour, button colour and text, description character limit, and a fallback image URL. These settings apply site-wide, giving a consistent look across all instances without repeating configuration per shortcode.

Per-instance controls handle the structural decisions: which category to show, how many columns, how many products, and whether to include a decorative Font Awesome icon on the card divider. The icon sits centred on the horizontal rule between the product image and the card content — a small detail that adds visual polish without requiring any CSS knowledge from whoever is configuring it.

Smart Image Fallbacks

Product grids break visually when some products have featured images and others don't — mismatched card heights, empty image areas, inconsistent layouts. The plugin handles this with a three-level fallback: use the product's featured image if it exists; fall back to a custom default image URL set in the plugin settings; fall back to a neutral placeholder if neither is available. Every card renders consistently regardless of how complete the product data is.

Technical Approach

Bootstrap 5 is loaded conditionally via wp_enqueue_style only when the shortcode is rendered — it doesn't add stylesheet overhead to pages that don't use the plugin. Font Awesome 6 is loaded the same way, only when an icon_class is actually specified. The render function uses WP_Query with a tax query for category filtering, ob_start() / ob_get_clean() for clean shortcode output, and wp_reset_postdata() to avoid polluting the global post state.

The Elementor widget extends Elementor's Widget_Base class and registers cleanly via the elementor/widgets/register hook, with a capability check for WooCommerce before loading the widget class.

• Bootstrap 5.3 for responsive grid layout
• Font Awesome 6.5 for optional card icons
• Shared render function between shortcode and Elementor widget
• Global style settings via WordPress Settings API
• Three-level image fallback logic
• Conditional asset loading — no overhead on pages without the plugin
• Multi-category filtering via comma-separated slugs (shortcode) or multi-select (Elementor)

Who It's For

Useful in any situation where WooCommerce products need to appear outside the standard shop or archive template — a homepage section featuring selected products, a landing page for a specific category, a promotional page with a custom layout, or any context where the default WooCommerce loop output doesn't fit. Works with the classic editor, the block editor (via shortcode block), and Elementor without any theme dependency.