cambiar de color la imagen al seleccionar la variacion sin l...

Paula

Respuestas: 12

Eminent Member

Topic starter

Hola, como puedo hacer que al dar click en un atributo de color en esta pagina: https://www.velascodegayo.com/producto/blazer-simona/ cambie al color de la foto correspondiente sin necesidad de seleccionar la talla? solo se da el cambio si selecciono los dos atributos

gracias

Contenido solo visible a usuarios registrados

Respondido : 18/09/2025 11:03 pm

Pepe

Respuestas: 41312

Illustrious Member Admin

Hola Paula.

Esto es común de WooCommerce ya que WooCommerce gestiona las variaciones combinadas: si tienes variaciones de Color + Talla, WooCommerce nunca cargará la imagen de la variación hasta que estén seleccionados todos los atributos obligatorios. Esto no depende del plugin de galería; es el comportamiento nativo de WooCommerce.

Es complicado lo que buscas y se necesita una programación a media que por desgracia no podemos proporcionarlo en el foro.

Un Saludo

Respondido : 19/09/2025 11:23 am

Paula

Respuestas: 12

Eminent Member

Topic starter

Gracias por tu explicacion Pepe, intente con chat gpt y me dio la siguiente informacion, pero igual no me funciono...

1. Entender el comportamiento actual

WooCommerce solo cambia la imagen de variación cuando TODOS los atributos requeridos están seleccionados (por eso te obliga a elegir talla antes de mostrar la imagen).
Pero podemos forzar que el cambio de imagen ocurra apenas seleccione el color, aunque la variación no esté completa.

2. Solución con JS (Snippet)

Agrega este código en tu child theme (archivo functions.php), o usando un plugin como Code Snippets para no tocar el core:

add_action('wp_footer', function () {

    if (is_product()) : ?>

        <script>

        document.addEventListener('DOMContentLoaded', function () {

            const colorSelect = document.querySelector('select#pa_color'); // selector de atributo color

            const variationForm = document.querySelector('.variations_form');
            if (colorSelect && variationForm) {

                colorSelect.addEventListener('change', function () {

                    const selectedColor = this.value;

                    if (!selectedColor) return;
                    // Dispara el cambio de variación

                    const event = new Event('change', { bubbles: true });

                    colorSelect.dispatchEvent(event);

// Espera a que WooCommerce cargue las variaciones y cambie la imagen setTimeout(() => { const activeImg = document.querySelector('.woocommerce-product-gallery__image img'); if (activeImg) { activeImg.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }, 300); }); } }); </script> <?php endif; });

3. Qué hace este código

✅ Detecta el cambio en el atributo de color.
✅ Dispara el evento change para que WooCommerce cargue la imagen de la variación asociada a ese color.
✅ No requiere que se seleccione la talla para que la imagen cambie (aunque igual pedirá la talla para poder añadir al carrito).

Respondido : 19/09/2025 1:45 pm

Karen Rios

Respuestas: 18826

Illustrious Member Moderator

Hola Paula,

Como comenta Pepe en este caso más allá de la IA es entender como está todo el código de WooCommerce construido y hacer dentro de el las modificaciones que requieres, ya es que algo personalizado requiere programación a medida, una alternativa es que lo consultes con nuestro directorio de colaboradores quienes pueden ayudarte a añadir lo que necesitas.

Un Saludo

Respondido : 19/09/2025 1:49 pm

cambiar de color la imagen al seleccionar la variacion sin la talla

1. Entender el comportamiento actual

2. Solución con JS (Snippet)

3. Qué hace este código