Come visualizzare lo SKU di una variante in Elementor Pro

Ogni variante di un prodotto può avere un proprio SKU (Stock Keeping Unit), un codice unico che aiuta a tracciare e gestire l’inventario. Tuttavia, quando si utilizza Elementor Pro per personalizzare il template del singolo prodotto, la visualizzazione dello SKU delle varianti non funziona.

Il problema con i template personalizzati in Elementor

Se utilizzi il template di default di WooCommerce, lo SKU delle varianti viene visualizzato automaticamente quando un cliente seleziona una variante specifica. Ma se decidi di personalizzare il template del singolo prodotto con Elementor Pro, noterai che lo SKU delle varianti non viene visualizzato nel frontend.

Come visualizzare lo SKU con un semplice script

Per risolvere questo problema, puoi utilizzare uno script JavaScript che aggiorna dinamicamente lo SKU quando l’utente seleziona una variante. Prima di inserire il codice, però, bisogna:

Aggiungi l’elemento “Intestazione” nel tuo template “Single Product” di Elementor

Associa il tag dinamico “Product SKU” a quell’intestazione in modo che possa ricevere lo SKU del prodotto.

Applica una classe CSS personalizzata chiamata sku-text a questo elemento, così lo script saprà dove aggiornare il testo dello SKU.

Una volta fatto questo, puoi inserire il seguente script nella sezione Custom Code di Elementor:

<script>
jQuery(document).ready(function($) {

		// Selettore per l'elemento SKU
    var selettoreSku = '.sku-text .elementor-heading-title';
    var elementoSku = $(selettoreSku);

    // Memorizza lo SKU del prodotto padre (SKU iniziale)
    var skuIniziale = elementoSku.text();

    // Evento per aggiornare lo SKU quando viene trovata una variante
    $(document).on('found_variation', function(event, variation) {
        if (variation.sku) {
            elementoSku.text('SKU: ' + variation.sku);  // Mostra lo SKU della variante
        } else {
            elementoSku.text('');  // Pulisce se la variante non ha SKU
        }
    });

    // Evento per resettare lo SKU al prodotto padre
    $(document).on('reset_data', function() {
        elementoSku.text(skuIniziale);  // Ripristina lo SKU del prodotto principale
    });
    
});
</script>

Spiegazione script

1. Rileva la variante selezionata: Quando l’utente seleziona una variante, viene attivato l’evento found_variation, che contiene i dati della variante, incluso lo SKU.
2. Aggiorna lo SKU nel template: Lo script cerca un elemento specifico con la classe .sku-text .elementor-heading-title e aggiorna il suo contenuto con lo SKU della variante selezionata.
3. Gestione dei reset: Se la selezione della variante viene annullata o resettata, lo script svuota il campo dello SKU per evitare confusione.