{"id":375726,"date":"2026-10-03T20:37:19","date_gmt":"2026-10-03T20:37:19","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/loopkit-product-carousel-slider-card-builder-for-woocommerce\/"},"modified":"2026-10-04T11:15:04","modified_gmt":"2026-10-04T11:15:04","slug":"loopkit-product-carousel","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/loopkit-product-carousel\/","author":17120676,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.1","stable_tag":"1.0.1","tested":"7.1.2","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"LoopKit \u2013 Product Carousel, Slider & Card Builder for WooCommerce","header_author":"ModinaTheme","header_description":"An Elementor-native WooCommerce product carousel. Build it where you build the page, with live editing and WCAG AA accessibility included.","assets_banners_color":"e7eaf0","last_updated":"2026-10-04 11:15:04","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/modinatheme.com\/loopkit\/","header_author_uri":"https:\/\/modinatheme.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":74,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"modinatheme","date":"2026-10-03 20:42:47","revision":3726688},"1.0.1":{"tag":"1.0.1","author":"modinatheme","date":"2026-10-04 11:15:04","revision":3727353}},"upgrade_notice":{"1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3726682,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3726682,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3726682,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3726682,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3726682,"resolution":"1","location":"assets","locale":"","width":1440,"height":626},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3726682,"resolution":"2","location":"assets","locale":"","width":1440,"height":900},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3726682,"resolution":"3","location":"assets","locale":"","width":1440,"height":900},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3726682,"resolution":"4","location":"assets","locale":"","width":1440,"height":900},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3726682,"resolution":"5","location":"assets","locale":"","width":1440,"height":900},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3726682,"resolution":"6","location":"assets","locale":"","width":1440,"height":626},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3726682,"resolution":"7","location":"assets","locale":"","width":1440,"height":900}},"screenshots":{"1":"A product carousel on the storefront, using the Classic preset.","2":"Live editing: switching the preset redraws the carousel in the Elementor canvas with no reload.","3":"The Card Builder: arrange elements across the image, content and hover zones.","4":"Product query controls, with six sources, filters and ordering.","5":"Style tab navigation controls for arrows, dots and the focus ring.","6":"Keyboard use: the pagination dots are one Tab stop, with arrow keys and a visible focus ring.","7":"The LoopKit page: a quick start, what is included, the tested themes and the changelog."}},"plugin_section":[],"plugin_tags":[76538,33766,10133,286,10134],"plugin_category":[45],"plugin_contributors":[282613],"plugin_business_model":[],"class_list":["post-375726","plugin","type-plugin","status-publish","hentry","plugin_tags-elementor","plugin_tags-product-carousel","plugin_tags-product-slider","plugin_tags-woocommerce","plugin_tags-woocommerce-slider","plugin_category-ecommerce","plugin_contributors-modinatheme","plugin_committers-modinatheme"],"banners":{"banner":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/banner-772x250.png?rev=3726682","banner_2x":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/banner-1544x500.png?rev=3726682","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/icon-128x128.png?rev=3726682","icon_2x":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/icon-256x256.png?rev=3726682","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/screenshot-1.png?rev=3726682","caption":"A product carousel on the storefront, using the Classic preset."},{"src":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/screenshot-2.png?rev=3726682","caption":"Live editing: switching the preset redraws the carousel in the Elementor canvas with no reload."},{"src":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/screenshot-3.png?rev=3726682","caption":"The Card Builder: arrange elements across the image, content and hover zones."},{"src":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/screenshot-4.png?rev=3726682","caption":"Product query controls, with six sources, filters and ordering."},{"src":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/screenshot-5.png?rev=3726682","caption":"Style tab navigation controls for arrows, dots and the focus ring."},{"src":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/screenshot-6.png?rev=3726682","caption":"Keyboard use: the pagination dots are one Tab stop, with arrow keys and a visible focus ring."},{"src":"https:\/\/ps.w.org\/loopkit-product-carousel\/assets\/screenshot-7.png?rev=3726682","caption":"The LoopKit page: a quick start, what is included, the tested themes and the changelog."}],"raw_content":"<!--section=description-->\n<p><strong>Your product carousel should not be a guessing game.<\/strong> \ud83c\udfa0<\/p>\n\n<p>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.<\/p>\n\n<p>Watch it work in one minute:<\/p>\n\n<p>https:\/\/youtu.be\/lsB9G_2hmTQ<\/p>\n\n<p>LoopKit fixes that. It adds <strong>one Elementor widget<\/strong> that builds a WooCommerce product carousel <strong>live in the canvas<\/strong>. Change a control and the carousel redraws instantly \u2014 same markup, same CSS, same result your customers will see. No reload. No preview tab. No shortcode to paste.<\/p>\n\n<h4>\ud83d\ude24 The four things that make product carousels painful<\/h4>\n\n<ul>\n<li><strong>\"It looked fine in the editor.\"<\/strong> Most carousel plugins render on the server, so the editor is an approximation and the page is a surprise.<\/li>\n<li><strong>\"I need custom CSS for every client.\"<\/strong> Fixed card layouts force you into the one design the plugin author liked.<\/li>\n<li><strong>\"My PageSpeed score dropped.\"<\/strong> jQuery, a full slider bundle and stylesheets loaded on every page, carousel or not.<\/li>\n<li><strong>\"The accessibility audit failed.\"<\/strong> Keyboard traps, invisible focus, autoplay that cannot be paused \u2014 and a plugin that charges you extra to fix it.<\/li>\n<\/ul>\n\n<p>LoopKit answers all four, in the free version. \ud83d\udc47<\/p>\n\n<h4>\u2728 What you get<\/h4>\n\n<p><strong>\ud83e\ude84 True live editing<\/strong>\nEvery control \u2014 style, card layout, motion, carousel behaviour \u2014 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.<\/p>\n\n<p><strong>\ud83e\uddf1 A real Card Builder<\/strong>\nEight 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.<\/p>\n\n<p><strong>\ud83c\udfa8 Eight presets that still look like your site<\/strong>\nClassic, Minimal, Overlay, Compact, Editorial, Promo, Reviewed and Showcase. A preset is an arrangement, not a skin \u2014 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.<\/p>\n\n<p><strong>\ud83d\uded2 Queries that match how you actually sell<\/strong>\nSix sources \u2014 recent, featured, on sale, best selling, top rated and manual selection \u2014 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.<\/p>\n\n<p><strong>\u267f Accessibility included, not upsold<\/strong>\nLabelled carousel region, slide positions announced as \"3 of 12\", off-screen slides made inert so focus never disappears, real buttons with <code>aria-current<\/code>, pagination dots as a single Tab stop with arrow-key navigation, a visible pause control whenever autoplay runs, and full <code>prefers-reduced-motion<\/code> support. Escape leaves the carousel \u2014 no keyboard traps.<\/p>\n\n<p><strong>\u26a1 Light enough to forget about<\/strong>\nAbout 4.4 KB of gzipped CSS and JavaScript on pages that use it, and <strong>nothing at all<\/strong> on pages that don't. The carousel engine is fetched only when a carousel approaches the viewport. No jQuery.<\/p>\n\n<p><strong>\ud83c\udfac Motion with taste<\/strong>\nSix 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.<\/p>\n\n<p><strong>\ud83c\udf0d Ready for real-world sites<\/strong>\nRight-to-left layouts, translation-ready strings, WPML and Polylang support, HPOS declared, and verified every release on Storefront, Astra, Hello Elementor, GeneratePress and Kadence.<\/p>\n\n<h4>\ud83c\udfc6 Why LoopKit instead of the others<\/h4>\n\n<ul>\n<li><strong>What you see is what ships.<\/strong> The editor canvas renders the exact same card as the front end. Not a mockup of it.<\/li>\n<li><strong>Accessibility is free here.<\/strong> Other carousel plugins put WCAG features behind a Pro licence. That seemed like a strange thing to charge for.<\/li>\n<li><strong>No advertising noise.<\/strong> 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.<\/li>\n<li><strong>Zero tracking.<\/strong> No telemetry, no phone-home, no external requests of any kind.<\/li>\n<li><strong>Your design, not ours.<\/strong> Presets set what a card contains; your Style tab decides how it looks.<\/li>\n<li><strong>Built for client work.<\/strong> Carousel settings live on the widget, so they travel with the page \u2014 copy a section to another site and the carousel comes with it.<\/li>\n<\/ul>\n\n<h4>\ud83d\udc64 Who it's for<\/h4>\n\n<p>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.<\/p>\n\n<h4>\ud83d\ude80 Getting started takes a minute<\/h4>\n\n<ol>\n<li>Install WooCommerce and Elementor (the free one is enough).<\/li>\n<li>Edit any page with Elementor and search the widgets for <strong>Product Carousel<\/strong>.<\/li>\n<li>Drag it in. It renders immediately with your recent products \u2014 there is nothing to configure before you see something real.<\/li>\n<\/ol>\n\n<h4>\ud83d\udccb Requirements<\/h4>\n\n<p>WordPress 6.0+ \u00b7 WooCommerce 7.0+ \u00b7 Elementor (free) 3.15+ \u00b7 PHP 7.4+<\/p>\n\n<h4>\ud83d\udd0e Source code and third-party libraries<\/h4>\n\n<p>The JavaScript and CSS in <code>assets\/<\/code> are compiled. Their human-readable source ships with the plugin in <code>src\/<\/code>, and is built with <code>@wordpress\/scripts<\/code> (webpack).<\/p>\n\n<p>LoopKit bundles one third-party library:<\/p>\n\n<ul>\n<li><a href=\"https:\/\/swiperjs.com\">Swiper<\/a> 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 <code>assets\/swiper-license.txt<\/code>.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Make sure WooCommerce 7.0 or newer and Elementor 3.15 or newer are installed and active.<\/li>\n<li>Upload the plugin to <code>\/wp-content\/plugins\/<\/code>, or install it from Plugins &gt; Add New.<\/li>\n<li>Activate it.<\/li>\n<li>Edit any page with Elementor and search the panel for \"Product Carousel\".<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"do%20i%20need%20elementor%20pro%3F\"><h3>Do I need Elementor Pro?<\/h3><\/dt>\n<dd><p>No. LoopKit works with the free version of Elementor.<\/p><\/dd>\n<dt id=\"is%20there%20a%20settings%20page%3F\"><h3>Is there a settings page?<\/h3><\/dt>\n<dd><p>No, deliberately. Everything is configured on the widget in the Elementor panel, so your settings travel with the page. The LoopKit page in the admin menu is for getting started, documentation, support and the changelog; it has nothing to configure.<\/p><\/dd>\n<dt id=\"is%20there%20a%20shortcode%3F\"><h3>Is there a shortcode?<\/h3><\/dt>\n<dd><p>No. LoopKit is an Elementor widget.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20high-performance%20order%20storage%3F\"><h3>Does it work with High-Performance Order Storage?<\/h3><\/dt>\n<dd><p>Yes. LoopKit declares HPOS compatibility. It only reads products, never orders.<\/p><\/dd>\n<dt id=\"where%20are%20saved%20card%20presets%20stored%3F\"><h3>Where are saved card presets stored?<\/h3><\/dt>\n<dd><p>In a single WordPress option, shared by every carousel on the site. Saving or deleting one needs the capability to edit other people's posts (Editors and Administrators), because a change reaches pages other people wrote. Deleting the plugin removes the option.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20wpml%20or%20polylang%3F\"><h3>Does it work with WPML or Polylang?<\/h3><\/dt>\n<dd><p>Yes. With WPML, the carousel's screen reader name and the sale badge text appear in the translation editor. With Polylang, translate the page as usual; every carousel setting travels with it. Product queries follow the language through WooCommerce.<\/p><\/dd>\n<dt id=\"can%20i%20use%20more%20than%20one%20carousel%20on%20a%20page%3F\"><h3>Can I use more than one carousel on a page?<\/h3><\/dt>\n<dd><p>Yes. Each carousel is independent.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Added a link to the one-minute video tour on the LoopKit page.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>A Product Carousel widget for Elementor that redraws in the canvas as you change any control.<\/li>\n<li>Card Builder with eight elements across image, content and hover zones, with per-device hiding.<\/li>\n<li>Eight card presets, plus presets you save from the panel and reuse across the site.<\/li>\n<li>Six product sources with category, tag, product type and stock filters.<\/li>\n<li>Six arrow styles and positions, dots, fraction and progress pagination, autoplay with a pause button.<\/li>\n<li>Six hover effects, custom easing, a staggered entrance and adjustable drag resistance.<\/li>\n<li>WCAG AA accessibility: labelled region and slides, inert off-screen slides, single-tab-stop dots.<\/li>\n<li>Right-to-left layouts, translation files, and WPML and Polylang support.<\/li>\n<li>A LoopKit admin page with a quick start, documentation, support and this changelog.<\/li>\n<\/ul>","raw_excerpt":"An Elementor-native WooCommerce product carousel. Build it in the editor, watch it update live, and ship it accessible.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/375726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=375726"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/modinatheme"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=375726"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=375726"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=375726"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=375726"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=375726"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=375726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}