LoopKit – Product Carousel, Slider & Card Builder for WooCommerce

Description

Your product carousel should not be a guessing game. 🎠

You drop in a carousel widget, set a few options, and then… reload. Squint. Reload again. The editor shows one thing, the live page shows another, and the client is waiting.

Watch it work in one minute:

LoopKit fixes that. It adds one Elementor widget that builds a WooCommerce product carousel live in the canvas. Change a control and the carousel redraws instantly — same markup, same CSS, same result your customers will see. No reload. No preview tab. No shortcode to paste.

😤 The four things that make product carousels painful

• “It looked fine in the editor.” Most carousel plugins render on the server, so the editor is an approximation and the page is a surprise.
• “I need custom CSS for every client.” Fixed card layouts force you into the one design the plugin author liked.
• “My PageSpeed score dropped.” jQuery, a full slider bundle and stylesheets loaded on every page, carousel or not.
• “The accessibility audit failed.” Keyboard traps, invisible focus, autoplay that cannot be paused — and a plugin that charges you extra to fix it.

LoopKit answers all four, in the free version. 👇

✨ What you get

🪄 True live editing
Every control — style, card layout, motion, carousel behaviour — redraws the canvas with no page reload and no server request. Only a change to the product query fetches anything, and your old products stay on screen while it does.

🧱 A real Card Builder
Eight elements: image, sale badge, stock badge, title, price, rating, short description and add to cart. Drag them into the order you want across three zones: image area, content area and a hover overlay. Hide any element per device using your own Elementor breakpoints.

🎨 Eight presets that still look like your site
Classic, Minimal, Overlay, Compact, Editorial, Promo, Reviewed and Showcase. A preset is an arrangement, not a skin — colours and type keep coming from Elementor’s Style tab and your Global Fonts. Built a card you love? Save it as your own named preset and reuse it on every carousel on the site.

🛒 Queries that match how you actually sell
Six sources — recent, featured, on sale, best selling, top rated and manual selection — plus filters for category, tag, product type, stock and catalog visibility. Variable, grouped, external and out-of-stock products all render correctly, with prices through WooCommerce so multi-currency plugins keep working.

♿ Accessibility included, not upsold
Labelled carousel region, slide positions announced as “3 of 12”, off-screen slides made inert so focus never disappears, real buttons with aria-current, pagination dots as a single Tab stop with arrow-key navigation, a visible pause control whenever autoplay runs, and full prefers-reduced-motion support. Escape leaves the carousel — no keyboard traps.

⚡ Light enough to forget about
About 4.4 KB of gzipped CSS and JavaScript on pages that use it, and nothing at all on pages that don’t. The carousel engine is fetched only when a carousel approaches the viewport. No jQuery.

🎬 Motion with taste
Six hover effects (zoom, lift, tilt, overlay fade, slide-up, border draw), six easing curves plus your own cubic-bezier, a staggered entrance as the carousel scrolls into view, and drag with adjustable edge resistance. Transform and opacity only, so it stays smooth on a mid-range phone.

🌍 Ready for real-world sites
Right-to-left layouts, translation-ready strings, WPML and Polylang support, HPOS declared, and verified every release on Storefront, Astra, Hello Elementor, GeneratePress and Kadence.

🏆 Why LoopKit instead of the others

• What you see is what ships. The editor canvas renders the exact same card as the front end. Not a mockup of it.
• Accessibility is free here. Other carousel plugins put WCAG features behind a Pro licence. That seemed like a strange thing to charge for.
• No advertising noise. No settings page to hunt through, no recommended-plugin panels, no review nags, no activation redirect, no dashboard banners. One welcome notice on the Plugins screen that disappears the moment you dismiss it. That is the whole footprint.
• Zero tracking. No telemetry, no phone-home, no external requests of any kind.
• Your design, not ours. Presets set what a card contains; your Style tab decides how it looks.
• Built for client work. Carousel settings live on the widget, so they travel with the page — copy a section to another site and the carousel comes with it.

👤 Who it’s for

Freelancers and agencies building WooCommerce stores in Elementor who are judged on PageSpeed scores, accessibility audits, and how rarely the client calls back. And anyone who just wants a carousel that behaves.

🚀 Getting started takes a minute

1. Install WooCommerce and Elementor (the free one is enough).
2. Edit any page with Elementor and search the widgets for Product Carousel.
3. Drag it in. It renders immediately with your recent products — there is nothing to configure before you see something real.

📋 Requirements

WordPress 6.0+ · WooCommerce 7.0+ · Elementor (free) 3.15+ · PHP 7.4+

🔎 Source code and third-party libraries

The JavaScript and CSS in assets/ are compiled. Their human-readable source ships with the plugin in src/, and is built with @wordpress/scripts (webpack).

LoopKit bundles one third-party library:

• Swiper 11.2.10, Copyright 2014-2025 Vladimir Kharlampidi, released under the MIT License. Its source is at https://github.com/nolimits4web/swiper, and its licence text ships with the plugin in assets/swiper-license.txt.