0

Estoy teniendo problemas con las variaciones de WooCommerce, estoy intentando añadir un icono (SVG) a las variaciones con 1 unidad de Stock o más.

He añadido este codigo al functions.php

        // Iconos para backorder y en stock
add_filter('woocommerce_available_variation', 'customize_variation_data');

function customize_variation_data($variation) {
    $variation_obj = new WC_Product_Variation($variation['variation_id']);
    
    // Verificar si la variación está en backorder
    $variation['is_on_backorder'] = $variation_obj->is_on_backorder();
    
    // Verificar si la variación está en stock
    $variation['is_in_stock'] = $variation_obj->is_in_stock();

    return $variation;
}

// Encolar el script JS
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

function enqueue_custom_scripts() {
    if (is_product()) {
        wp_enqueue_script('custom-variation-script', get_stylesheet_directory_uri() . '/js/custom-variation-script.js', array('jquery'), null, true);
    }
}

Tambien tengo un codigo JavaScript, /js/custom-variation-script.js:

jQuery(document).ready(function($) {
    // Define el URL del SVG
    var svgUrl = '/wp-content/uploads/2024/08/stock.svg';
    
    function updateVariationLabels() {
        // Iterar sobre cada lista de swatches
        $('.st-swatch-preview').each(function() {
            var $swatch = $(this);
            var attributeName = $swatch.data('attribute');

            // Obtener las variaciones de producto
            var variations = $('.variations_form').data('product_variations');
            
            // Iterar sobre cada variación
            variations.forEach(function(variation) {
                if (variation.is_on_backorder) {
                    var value = variation.attributes['attribute_' + attributeName];
                    
                    // Buscar el span correspondiente y añadir el SVG
                    $swatch.find('span.st-custom-attribute').each(function() {
                        var $span = $(this);
                        if ($span.data('value') === value) {
                            if (!$span.find('img').length) { // Verifica si la imagen ya está añadida
                                $span.append('<img src="' + svgUrl + '" alt="Stock" style="width: 16px; height: 16px; vertical-align: middle; margin-left: 5px;">');
                            }
                        }
                    });
                }
            });
        });
    }

    
    // Actualizar las etiquetas cuando se carga la página
    updateVariationLabels();

    // Actualizar las etiquetas cuando se encuentra una variación
    $('.variations_form').on('found_variation', function(event, variation) {
        if (variation.is_on_backorder) {
            updateVariationLabels();
        }
    });
});

Este codigo funciona correctamente, muestra el icono (SVG) en el frontend correctamente. El problema es que solo muestra el icono cuando la variacion tiene activado Permite reservas.

Y yo necesito que se muestre en todas las variaciones que tengan más de una unidad de stock.
He intentado modificar el codigo para que funcione solo con productos con 1 unidad de stock o más, pero nunca me aparece el icono.
Quiero eliminar por completo la opcion de Permitir reservas / Backorder y que solo muestre el icono en productos con Stock.

Alguna idea? Muchisimas gracias

1 respuesta 1

0

Para que el icono svg se muestre en todas las variaciones con al menos una unidad de stock y no solo en productos en backorder necesitas modificar el codigo para verificar directamente el stock de la variación en lugar de si esta en backorder.

functions.php

add_filter('woocommerce_available_variation', 'customize_variation_data');

function customize_variation_data($variation) {
    $variation_obj = new WC_Product_Variation($variation['variation_id']);
    
    
    $variation['has_stock'] = ($variation_obj->get_stock_quantity() > 0);

    return $variation;
}


add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

function enqueue_custom_scripts() {
    if (is_product()) {
        wp_enqueue_script('custom-variation-script', get_stylesheet_directory_uri() . '/js/custom-variation-script.js', array('jquery'), null, true);
    }
}

/js/custom-variation-script.js

jQuery(document).ready(function($) {
    
    var svgUrl = '/wp-content/uploads/2024/08/stock.svg';
    
    function updateVariationLabels() {
        
        $('.st-swatch-preview').each(function() {
            var $swatch = $(this);
            var attributeName = $swatch.data('attribute');

            
            var variations = $('.variations_form').data('product_variations');
            
            
            variations.forEach(function(variation) {
                if (variation.has_stock) {  // Cambiado de is_on_backorder a has_stock
                    var value = variation.attributes['attribute_' + attributeName];
                    
                    
                    $swatch.find('span.st-custom-attribute').each(function() {
                        var $span = $(this);
                        if ($span.data('value') === value) {
                            if (!$span.find('img').length) { // Verifica si la imagen ya está añadida
                                $span.append('<img src="' + svgUrl + '" alt="Stock" style="width: 16px; height: 16px; vertical-align: middle; margin-left: 5px;">');
                            }
                        }
                    });
                }
            });
        });
    }

    
    updateVariationLabels();

    // Actualizar las etiquetas cuando se encuentra una variación
    $('.variations_form').on('found_variation', function(event, variation) {
        if (variation.has_stock) {  // Cambiado de is_on_backorder a has_stock
            updateVariationLabels();
        }
    });
});

Saludos

1
  • Hola! Muchas gracias por tu aportacion he probado tu codigo y no me ha funcionando en los productos con Stock. Asi aparecia antes con Backorder: ibb.co/PjPrTt9 - Ahora con el codigo que me has mandado no aparece. Muchisimas gracias aun asi, te lo agrazco. Continuare buscando una solucion
    – CHKFDZ
    Commented el 27 sept. a las 11:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.