Karaly Shop Display: griglie e carousel prodotti per WooCommerce

Karaly Shop Display mostra i prodotti del tuo WooCommerce in vetrine eleganti: griglie ordinate e carousel scorrevoli da inserire in home, nelle categorie, negli archivi o in qualsiasi pagina. Ogni card può mostrare immagine, brand, prezzo, gli swatch dei colori disponibili, le taglie a magazzino e il pulsante della wishlist.

La versione 2.0.0 lo rende universale. Il plugin era nato per un negozio di abbigliamento con una struttura di catalogo specifica, dove ogni colore è un prodotto a parte. Ora gestisce anche il caso più comune, il prodotto variabile con il colore come variazione, e riconosce da solo quale dei due modelli usare per ogni singolo prodotto. Funziona quindi su qualsiasi WooCommerce, anche con un catalogo misto.

Cosa fa il plugin

Karaly Shop Display copre l’intero percorso di visualizzazione dei prodotti, dalla vetrina alla scheda. Da un lato aggiunge griglie e carousel da posizionare dove vuoi, con lo shortcode [karaly_products] o con il widget Elementor. Dall’altro arricchisce la pagina del singolo prodotto con il blocco degli altri colori e quello delle taglie disponibili. Tutto è pensato per essere montato senza scrivere codice e senza toccare il tema.

A differenza dei blocchi prodotto generici, qui il focus è sulle varianti: i colori diventano pallini e miniature cliccabili, le taglie diventano chip che riflettono solo ciò che è davvero acquistabile. È quello che serve a un negozio di moda, ma vale per qualsiasi catalogo con colori e misure: accessori, calzature, arredo, cosmetica.

Caratteristiche principali

• Griglia e carousel prodotti: vetrine per home, categorie, archivi e pagine, con shortcode [karaly_products] e widget Elementor dedicato.
• Universale per due modelli di catalogo: colori letti dalle variazioni di un prodotto variabile oppure dai prodotti collegati con lo Style ID, riconosciuti in automatico prodotto per prodotto.
• Carousel continuo o a scatti: marquee infinito senza scatti oppure avanzamento a intervalli, con velocità, direzione, pausa al hover, frecce in tre stili e tre posizioni, paginazione a puntini, barre o numeri.
• Swatch colore cliccabili: pallini nelle card e miniature foto nella scheda prodotto, con il colore precaricato al clic sui prodotti variabili.
• Taglie e numeri disponibili: legge le variazioni effettivamente a magazzino e le mostra come chip, distinguendo taglie e numeri di scarpe.
• Wishlist universale: rileva e usa YITH, TI WooCommerce Wishlist, WPC Smart Wishlist o WooCommerce Wishlists, con fallback a cuore decorativo.
• Brand intelligente: dalla tassonomia configurata, alle tassonomie brand più diffuse, fino all'estrazione dalle parole maiuscole iniziali del titolo.
• Crea l'attributo Style ID: un clic dal pannello registra l'attributo non nativo per chi gestisce un prodotto per colore.
• Personalizzazione completa: colonne per desktop, tablet e mobile, spaziatura, proporzioni immagine, colori, sfondo sezione, visibilità di ogni elemento della card.
• Pannello a tab con diagnostica: Grid, Carousel, Singolo prodotto, Attributi, Diagnostica e Documentazione, con uno strumento che spiega cosa rileva il plugin su ogni prodotto.

Universale: due modelli di catalogo, uno stesso plugin

Il punto che distingue Karaly Shop Display è il modo in cui legge i colori. Ci sono due modi diffusi di gestire le varianti in WooCommerce, e il plugin li supporta entrambi senza che tu debba scegliere a priori.

Con il prodotto variabile il colore è una variazione interna a un unico prodotto: il plugin legge le variazioni a magazzino, usa l’immagine di ciascun colore come miniatura e, al clic, precarica la variante con il meccanismo nativo di WooCommerce. Con il modello un prodotto per colore, tipico dei cataloghi importati da feed fornitore, ogni colore è una scheda separata e il collegamento avviene tramite un codice modello condiviso, lo Style ID. Poiché lo Style ID non esiste in WooCommerce di serie, il plugin lo crea per te con un pulsante dedicato. In modalità automatica la scelta avviene da sola, prodotto per prodotto, così un catalogo che mescola i due approcci resta coerente.

Griglia e carousel

La griglia dispone i prodotti su un numero di colonne che imposti separato per desktop, tablet e mobile, con la spaziatura e le proporzioni immagine che preferisci. Il carousel ha due anime: il continuo fluido, uno scorrimento infinito senza riavvolgimento per le vetrine sempre in movimento, e l’a scatti, che avanza a intervalli regolari con le frecce per la navigazione manuale. Frecce e paginazione sono personalizzabili nello stile, nella posizione e nei colori.

Filtri i prodotti per categoria, tag, brand, prodotti in evidenza, in offerta o disponibili, e li ordini per data, prezzo, popolarità, valutazione o ordine manuale. Puoi anche elencare ID specifici quando vuoi una selezione curata a mano. Gli stessi controlli sono disponibili sia da shortcode sia dal widget Elementor, quindi scegli lo strumento in base a come costruisci le pagine, senza rinunciare a nulla.

Colori e taglie nella scheda prodotto

Sotto il pulsante di acquisto, o dove preferisci posizionarlo, il plugin mostra il blocco "Altri colori disponibili" con le miniature degli altri colori e il blocco delle taglie o dei numeri effettivamente acquistabili. Sul prodotto variabile il clic su un colore lo seleziona direttamente; sul modello a prodotti separati apre la scheda del colore scelto. In entrambi i casi il cliente vede a colpo d’occhio le alternative, una cosa che riduce i vicoli ciechi e aiuta la conversione.

L’inserimento può essere automatico tramite gli hook di WooCommerce oppure manuale, con i widget Elementor e gli shortcode [karaly_product_colors] e [karaly_product_sizes]. Questo serve a chi costruisce la scheda prodotto con un template di tema builder e vuole decidere il punto esatto in cui far comparire i blocchi.

Requisiti tecnici

• WordPress 6.0 o superiore (testato fino a 7.0)
• WooCommerce 7.0 o superiore (testato fino a 10.7)
• PHP 7.4 o superiore
• Elementor opzionale (per i widget visuali; lo shortcode funziona senza)
• Licenza GPL v2 o successiva

Installazione in tre passi

1. Scarica e carica il plugin. Scarica karaly-shop-display.zip dalla sezione Download. In WordPress vai su Plugin, poi Aggiungi nuovo, poi Carica plugin e seleziona il file. In alternativa copia la cartella karaly-shop-display in /wp-content/plugins/.
2. Attiva e collega gli attributi. Attiva il plugin dalla schermata Plugin. Apri Karaly Display, vai nella tab Attributi e verifica che gli slug di colore, taglia e brand corrispondano a quelli del tuo shop. Se usi un prodotto per colore, crea l'attributo Style ID con il pulsante dedicato.
3. Inserisci griglia, carousel e blocchi prodotto. Aggiungi lo shortcode [karaly_products] dove vuoi una vetrina, oppure usa il widget Elementor. Per la scheda prodotto lascia attivo l'inserimento automatico dei colori e delle taglie, o posizionali con i widget e gli shortcode dedicati.

Shortcode e widget Elementor

Per le vetrine usi [karaly_products] o il widget "Karaly Shop Display". Per la scheda prodotto hai i widget "Karaly — Colori Prodotto" e "Karaly — Taglie/Numeri Prodotto", oppure gli shortcode [karaly_product_colors], [karaly_product_sizes] e [karaly_product_info]. La tab Documentazione del pannello elenca tutti i parametri con i valori ammessi e mostra le categorie del tuo shop pronte da incollare nello shortcode, così non devi cercarle altrove.

Perché lo offriamo gratis

Karaly Shop Display è nato per un cliente, poi lo abbiamo generalizzato perché l’esigenza di mostrare bene i prodotti, con i colori e le taglie al posto giusto, è comune a tantissimi negozi. Rilasciarlo libero è il nostro modo di restituire qualcosa alla comunità WooCommerce e, allo stesso tempo, di farti conoscere il nostro lavoro.

Se ti serve una variante su misura, una grafica diversa delle card, un’integrazione con un tema o un builder specifico, o l’aiuto per montare il plugin su un catalogo non standard, possiamo farlo: è il nostro servizio di sviluppo plugin WordPress e WooCommerce custom. Lo stesso vale se stai costruendo o rifacendo il negozio da zero, con i nostri siti web ed e-commerce. Per un confronto scrivici dalla pagina contatti o richiedi un’analisi gratuita del tuo store. Trovi gli altri nostri strumenti nella sezione plugins, incluso Recesso Digitale per la conformità all’art. 54-bis.