Cómo añadir selector de color personalizado en productos variables de WooCommerce sin plugin Premium

Cómo añadir selector de color personalizado en productos variables de WooCommerce sin plugin premium

1. Crear atributos de color

1. Ve a Productos > Atributos en el panel de WordPress.
2. En el campo Nombre, escribe «Color».
3. Haz clic en Agregar atributo.
4. En la sección de valores, añade los colores deseados (ej. Rojo, Azul, Verde).
5. Marca la casilla Usar para variaciones y guarda los cambios.

2. Crear variaciones de producto

1. Ve a Productos y selecciona el producto variable que deseas editar.
2. En la sección Datos del producto, selecciona Variable.
3. Ve a la pestaña Variaciones.
4. Selecciona Agregar variación y elige un color para cada variación.
5. Configura el precio y la imagen para cada variación.
6. Guarda los cambios.

3. Añadir CSS para el selector de color

/* Estilo para el selector de color */
.variations select {
    display: none; /* Oculta el selector original */
}

.color-selector {
    display: flex;
    gap: 10px;
}

.color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #ccc;
}

4. Añadir JavaScript para el selector de color

jQuery(document).ready(function($) {
    $('.color-option').click(function() {
        var color = $(this).data('color');
        $('select#pa_color').val(color).trigger('change');
    });
});

5. Modificar la plantilla del producto

1. Accede a tu tema y localiza el archivo single-product/add-to-cart/variable.php.
2. Haz una copia de seguridad del archivo antes de editar.
3. Busca la sección donde se genera el selector de variaciones.
4. Reemplaza el código del selector por el siguiente:

6. Guardar y probar

1. Guarda todos los cambios realizados.
2. Visita la página del producto en el frontend.
3. Prueba el selector de color y verifica que las variaciones se cambian correctamente.

.

Categoría: Plugin WooCommerce