LoopKit Handbook

Install

LoopKit needs WooCommerce and Elementor. It will not activate without them, and tells you which one is missing.

Install from Plugins → Add New, or upload the zip. Activate WooCommerce and Elementor first — LoopKit declares them as required plugins, so WordPress will refuse to activate it before they are running.

The LoopKit page

Admin menu → LoopKit. Administrators only.

After activation, a LoopKit item appears in the admin menu. It is a single information page, not a settings screen: carousels are always configured on the widget.

The welcome notice

Once, after activation, administrators see a short notice on the Plugins screen and the Dashboard with Get started and Dismiss. It goes away for good as soon as you dismiss it or open the LoopKit page, and it is remembered per user. There is no redirect on activation, and no other notice anywhere in wp-admin.

The Plugins screen also gets a Get started link under LoopKit. Uninstalling the plugin removes the record of who dismissed the notice.

Add a carousel

Edit any page with Elementor, search the widget panel for Product Carousel, and drag it onto the canvas. It renders immediately using recent products and the Classic preset — there is nothing to configure before you see something.

Products

Content tab. Decides which products appear and in what order.

Source

Six sources. Everything except Manual selection takes the filters below it.

Filters and limits

Card

Content tab. Decides what each product card contains.

Two ways to build one

Card layout chooses between them. Start from a preset gives you one of eight ready arrangements. Build it myself opens the Card Builder, where you assemble the card yourself.

Elements and zones

A card holds up to eight elements, and each one sits in one of three zones:

The eight elements are image, sale badge, stock badge, title, price, rating, short description and add to cart. Drag a row to reorder it. Each row has its own options once you choose its element — the title gets an HTML tag and a word limit, the image gets a size and a hover flip, the sale badge chooses between a word and a discount percentage, and the rating can show an empty row for products nobody has reviewed yet.

Hiding an element on some devices

Every row has a Hide on switch for each device your site uses — Desktop, Tablet and Mobile, plus any custom breakpoints you have turned on in Elementor. A short description that helps on a wide screen can disappear on a phone, while the rest of the card stays.

In the editor, a hidden element works like every other hidden Elementor element: preview that device and it stays in place, faded and striped, so you can still select and edit it. Turn off Elementor's Show hidden elements in the responsive bar to see the card exactly as visitors will.

How presets work

A preset is a saved arrangement of elements — not a skin, and not a template.

Picking a preset sets which elements the card holds and which zone each one sits in. It does not set any colours, fonts or spacing. Those always come from the Style tab, which is why a preset takes on your site's design rather than dropping a stranger's design into your page.

Presets and hand-built cards run through exactly the same renderer, so a preset can never do something the Card Builder cannot. Switching between them changes the arrangement and nothing else.

I image areaC content areaH hover overlay— not in this preset

A few presets also set an element option: Compact trims the title to four words, Editorial uses an h2 title and an 18-word description, Promo shows the discount as a percentage and badges only low or out-of-stock products, Reviewed shows the rating even with no reviews, and Showcase flips to the gallery image on hover.

Saving your own preset

Built a card you want to reuse? Under the Card Builder, type a name into Save this card as a preset and press Save preset. It joins the Preset list at once, for every carousel on the site, with no page reload. Saving again under the same name replaces it.

To remove one, choose it under Preset and press Delete this saved preset. Carousels that used it switch to Classic. The eight built-in presets cannot be deleted.

Layout

Content tab. How many cards fit, and how far apart they sit.

Carousel

Content tab. Navigation and movement.

Motion

Content tab. Hover behaviour and entrance.

Style tab

Eight sections, in the order they appear. Every colour and font can come from your Elementor Global Colors and Global Fonts, so a carousel matches the site by default.

Card

Background, content padding, space between elements, corner radius, border, shadow, and the hover overlay colour.

Image

Shape is square by default, so every card is the same height whatever shape your photographs are — a catalogue shot at mixed sizes would otherwise produce a ragged row. Landscape, wide and portrait are there too, and Original proportions lets each image keep its own.

Fit then decides what happens to images that are not that shape: Fill the shape crops them, Fit inside letterboxes them. Choose fit-inside for products photographed on white, where cropping would cut the product. Background fills the letterboxed area and sits behind transparent PNGs. Inset adds padding so the image sits inside the card rather than running to its edges, and there is a corner radius and border for the image itself.

Text

Title typography and colour, with a separate hover colour. Price typography and colour, plus a colour for the struck-through original price on sale items.

Rating

Star colour, empty star colour, size and alignment.

LoopKit draws its own stars. WooCommerce renders ratings with an icon font from its own stylesheet, so on a site that dequeues WooCommerce CSS — common on tuned installs — the card would show the sentence "Rated 4.33 out of 5" instead of stars. LoopKit draws them from the same markup, so the rating looks the same whether or not that stylesheet is on the page, and these colour controls always apply.

Screen readers still hear the full sentence: the stars carry it as their label, so nothing is lost by hiding the text.

Badges

Shared typography, then separate background and text colours for the sale badge and the stock badge, plus distance from the card edge and corner radius.

Button

Typography, normal and hover colours, padding, radius, border, and whether the button fills the card width or fits its text.

Short description

Its own section, because it is the one element usually switched off and it needs more room than a colour when it is on: typography, colour, alignment, and space above it.

Navigation

Arrows: size, colour and background, separate colour and background on hover, line thickness, corner radius and a border. Pagination: dot colour, active dot colour, size, the space above the row, and the progress bar's height.

And the focus ring — the outline keyboard users see. You can recolour it to suit your design; it is never removed.

Themes

LoopKit is checked against five reference themes before every release. These are the five, and what "supported" is measured on.

What each column means

Accessibility

Built in, on by default, and not something you configure. This is what ships in the free version.

• The carousel is a labelled region, announced as a carousel, using the name you set in Accessible label.
• Each slide is announced with its position — "3 of 12".
• Slides that are off screen are made inert, so keyboard focus never disappears into a card nobody can see.
• Arrows and dots are real buttons with proper names, and the current dot is marked as current.
• Autoplay always comes with a visible pause button, placed before the slides so it can be reached first. This is a WCAG requirement, which is why it cannot be turned off separately.
• Live-region announcements are silent while autoplay runs, and become polite as soon as the visitor takes control.
• Escape moves focus out of the carousel, so it can never trap the keyboard.
• The pagination dots are a single Tab stop. Tab lands on the current dot; the arrow keys move between dots and the carousel follows; Home and End jump to the first and last. A carousel of a hundred products never makes a keyboard user tab through a hundred dots.
• Focus rings are always visible and inherit your theme's accent unless you recolour them.
• Each card contains exactly one link — the title, stretched across the whole card. A keyboard user hears the product name once, rather than tabbing through several identical links.

Performance

• Nothing loads on pages without a carousel. The stylesheet and script are registered against the widget, so a page that does not use it downloads neither.
• The carousel engine is fetched on demand. Swiper is a separate file that is only requested when a carousel approaches the viewport. A visitor who never scrolls that far never downloads it.
• No jQuery.
• Columns, gaps, colours and motion are CSS custom properties, so changing them costs nothing at runtime and nothing in the editor.
• The carousel measures itself rather than the window, so it lays out correctly in a sidebar, a narrow column or a popup — not only at full page width.

For developers

Filters and actions, all prefixed loopkit_.

Registering your own preset

Presets are data, so the editor can draw yours without asking the server — which is why there is no PHP template to override. Build rows with the helper and return them:

use LoopKit\Card\Card_Schema;
use LoopKit\Render\Preset_Library;

add_filter( 'loopkit_preset_templates', function ( $presets ) {
    $presets['house_style'] = array(
        'label' => __( 'House style', 'my-theme' ),
        'stack' => array(
            Preset_Library::row( 'image', Card_Schema::ZONE_IMAGE ),
            Preset_Library::row( 'title', Card_Schema::ZONE_CONTENT, array( 'tag' => 'h2' ) ),
            Preset_Library::row( 'price' ),
            Preset_Library::row( 'add_to_cart', Card_Schema::ZONE_HOVER ),
        ),
    );

    return $presets;
} );

Your preset then appears in the Preset dropdown alongside the built-in eight, and renders in the editor canvas exactly as it will on the page.

Presets saved from the panel reach the library through this same filter, at priority 5, so a filter at the default priority can still see and adjust them. Saved preset names start with saved_.

Custom elements and device hiding

An element registered with loopkit_card_elements gets the Hide on switches for free on the frontend, as long as its markup uses get_element_classes(). In its canvas template, print {{ loopkitItem.hidden }} at the end of the same class attribute so the editor hides it too.

Troubleshooting