✅Optimiza la Presentación de Productos Variables en Woocommerce

Cuando se trata de gestionar una tienda en línea, la experiencia del cliente es uno de los factores más importantes para garantizar el éxito. En plataformas como WooCommerce, los productos variables suelen ser una opción popular para ofrecer diferentes combinaciones de atributos, como tamaño, color o material. Sin embargo, la presentación predeterminada de estas opciones puede ser un tanto limitada, especialmente cuando solo muestra un rango de precios o un selector desplegable que no destaca lo suficiente las posibilidades del producto.

Este código personalizado está diseñado para transformar la forma en que se presentan los productos variables en WooCommerce, reemplazando el precio estándar con una tabla interactiva que incluye imágenes, atributos detallados, precios individuales, campos para elegir la cantidad y botones para añadir al carrito. Este enfoque no solo moderniza la apariencia de los productos, sino que también mejora significativamente la usabilidad para los clientes.

Imagina que un cliente está interesado en un producto con varias variaciones. Con la configuración estándar, tendría que usar un selector desplegable, elegir manualmente cada variación y verificar el precio una a una. Esto puede ser confuso y lento, especialmente si hay muchas combinaciones disponibles. Con la tabla que genera este código, los clientes pueden ver todas las opciones disponibles de un vistazo, con sus respectivos precios y detalles visuales. Esto les permite tomar decisiones más rápidas y fundamentadas, lo que aumenta la probabilidad de que completen una compra.

Además, esta tabla interactiva incluye opciones para elegir cantidades personalizadas y añadir productos al carrito directamente desde la lista, lo que elimina pasos innecesarios en el proceso de compra. Esta comodidad adicional no solo beneficia al cliente, sino también al negocio, ya que reduce las tasas de abandono y fomenta la conversión.

Por si fuera poco, este código también se encarga de estilizar la tabla para que sea visualmente atractiva, asegurando que encaje perfectamente con el diseño general de tu tienda. Desde colores personalizados hasta una disposición optimizada para dispositivos móviles, cada detalle ha sido considerado para maximizar tanto la funcionalidad como la estética.

1. display_variation_table_instead_of_price

Esta función reemplaza el precio predeterminado de los productos variables por una tabla que muestra todas las variaciones disponibles.

Lógica principal:

• Comprueba si el producto es de tipo «variable» utilizando $product->is_type('variable').
• Obtiene todas las variaciones disponibles del producto mediante $product->get_available_variations().
• Construye una tabla HTML que incluye:
  • Imagen de la variación.
  • Atributos y opciones específicas de la variación.
  • Precio individual.
  • Campo para seleccionar la cantidad.
  • Botón para añadir al carrito directamente desde la tabla.

Beneficio: Mejora la experiencia del usuario al presentar toda la información en un formato claro y visualmente atractivo.

2. handle_table_variations_add_to_cart

Gestiona la acción de añadir productos al carrito directamente desde la tabla de variaciones.

Lógica principal:

• Detecta si se ha enviado un formulario con el botón «Añadir al carrito».
• Itera sobre las variaciones seleccionadas y sus cantidades, utilizando WC()->cart->add_to_cart para añadirlas al carrito.
• Redirige a la misma página, añadiendo un mensaje de confirmación mediante wp_safe_redirect y un parámetro de consulta (added-to-cart=1).

Beneficio: Simplifica el proceso de añadir productos al carrito y mejora la experiencia del cliente al mantenerlo en la misma página.

3. custom_variation_table_styles

Añade estilos personalizados para la tabla de variaciones.

Lógica principal:

• Inserta CSS en línea para dar formato a la tabla, con reglas específicas para:
  • Bordes, colores y fuentes de las celdas.
  • Resaltado de filas alternas.
  • Responsividad en dispositivos móviles.

Beneficio: Garantiza que la tabla sea funcional y estéticamente coherente con el diseño de la tienda.

4. remove_variable_product_price_range

Elimina el rango de precios predeterminado que aparece para los productos variables.

Lógica principal:

• Comprueba si el producto es de tipo «variable».
• Devuelve una cadena vacía en lugar del rango de precios.

Beneficio: Evita confusiones al mostrar precios más claros a través de la tabla.

5. remove_default_variation_elements

Oculta los elementos predeterminados de WooCommerce relacionados con las variaciones.

Lógica principal:

• Inserta reglas CSS en línea para ocultar selectores, botones y otros elementos predeterminados.

Beneficio: Previene conflictos visuales y funcionales con la nueva tabla de variaciones.

6. add_variable_product_summary

Añade un resumen de las variaciones y su rango de precios en la página de categoría o listados.

Lógica principal:

• Comprueba si el producto es de tipo «variable».
• Obtiene el precio mínimo y máximo del conjunto de variaciones.
• Muestra un resumen que incluye:
  • Rango de precios.
  • Detalle de los atributos disponibles.
• Incluye un mensaje de orientación para que el cliente explore más opciones.

Beneficio: Proporciona información rápida y clara al cliente antes de acceder a la página del producto.

7. Estilo adicional para el resumen (wp_head)

Añade estilos para el resumen de variaciones.

Lógica principal:

• Aplica formato al resumen, destacando atributos y rango de precios.

Beneficio: Garantiza una presentación atractiva y profesional.

Beneficios globales del código

Experiencia del usuario mejorada:
La tabla presenta todas las opciones de manera clara, permitiendo decisiones rápidas y fundamentadas. El cliente puede añadir múltiples variaciones al carrito desde una sola pantalla.

Optimización de ventas:
Reduce la fricción en el proceso de compra. Elimina pasos innecesarios, aumentando las conversiones.

Personalización visual:
La tabla y el resumen están diseñados para ser responsivos y adaptarse al estilo de la tienda.

Este conjunto de funciones convierte la experiencia estándar de WooCommerce en una solución más intuitiva y amigable para los clientes, lo que puede traducirse en mayores ventas y satisfacción.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

// Mostrar la tabla en lugar del precio en productos variables
add_filter('woocommerce_single_product_summary', 'display_variation_table_instead_of_price', 15);

function display_variation_table_instead_of_price() {
    global $product;

    // Verificar que el producto sea variable
    if ($product->is_type('variable')) {
        // Obtener todas las variaciones disponibles
        $available_variations = $product->get_available_variations();
        $variations_attributes = $product->get_variation_attributes();

        // Mostrar tabla con las variaciones y precios
        echo '<form method="post">';
        echo '<table class="variations-prices-table">';
        echo '<thead><tr><th>IMAGEN</th><th>OPCIONES</th><th>PRECIO</th><th>CANTIDAD</th><th>AGREGAR AL CARRITO</th></tr></thead>';
        echo '<tbody>';

        foreach ($available_variations as $variation) {
            $attributes = $variation['attributes'];
            $price = $variation['display_price'];
            $variation_id = $variation['variation_id'];
            $image = $variation['image']['src'];
            $attribute_list = '';

            // Formatear atributos
            foreach ($attributes as $key => $value) {
                $attribute_name = wc_attribute_label(str_replace('attribute_', '', $key));
                $attribute_list .= '<strong>' . esc_html(strtoupper($attribute_name)) . '</strong>: ' . esc_html($value) . ' | ';
            }

            $attribute_list = rtrim($attribute_list, ' | '); // Quitar el separador final

            // Agregar fila a la tabla
            echo '<tr>';
            echo '<td><img src="' . esc_url($image) . '" alt="' . esc_attr($attribute_list) . '" style="width: 50px; height: auto;"></td>';
            echo '<td>' . $attribute_list . '</td>';
            echo '<td>' . wc_price($price) . '</td>';
            echo '<td><input type="number" name="quantity[' . esc_attr($variation_id) . ']" value="1" min="1" style="width: 50px; font-size: 14px;"></td>';
            echo '<td><button type="submit" name="add-to-cart[' . esc_attr($variation_id) . ']" value="' . esc_attr($variation_id) . '" class="button" style="font-size: 14px;">Añadir al carrito</button></td>';
            echo '</tr>';
        }

        echo '</tbody>';
        echo '</table>';
        echo '</form>';

        // Mostrar mensaje si se agrega un producto al carrito
        if (isset($_GET['added-to-cart'])) {
            echo '<p class="added-to-cart-message" style="color: green; font-weight: bold;">¡Producto añadido al carrito!</p>';
        }
    }
}

// Manejar la cantidad correctamente al agregar al carrito y mostrar el mensaje
add_action('template_redirect', 'handle_table_variations_add_to_cart');
function handle_table_variations_add_to_cart() {
    if (isset($_POST['add-to-cart'])) {
        foreach ($_POST['add-to-cart'] as $variation_id => $value) {
            if (!empty($_POST['quantity'][$variation_id])) {
                WC()->cart->add_to_cart($variation_id, intval($_POST['quantity'][$variation_id]));
            }
        }
        // Evitar redirección, mantener en la misma página con un mensaje
        wp_safe_redirect(add_query_arg('added-to-cart', '1', wc_get_product()->get_permalink()));
        exit;
    }
}

// Estilo para la tabla (opcional)
add_action('wp_head', 'custom_variation_table_styles');
function custom_variation_table_styles() {
    echo '<style>
        .variations-prices-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 14px;
        }
        .variations-prices-table th, .variations-prices-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
            word-break: break-word;
        }
        .variations-prices-table th {
            background-color: #5B38ED;
            color: #ffffff;
            font-weight: bold;
            text-transform: uppercase;
        }
        .variations-prices-table td {
            background-color: #f9f9f9;
        }
        .variations-prices-table tr:nth-child(even) td {
            background-color: #e8e8f9;
        }
        .variations-prices-table td strong {
            font-weight: bold;
            color: #000000;
        }
        .variations-prices-table img {
            display: block;
            margin: 0 auto;
        }
        .variations-prices-table input[type="number"] {
            text-align: center;
            font-size: 14px;
        }
        .variations-prices-table button {
            background-color: #5B38ED;
            color: white;
            border: none;
            padding: 6px 10px;
            cursor: pointer;
            font-size: 14px;
        }
        .variations-prices-table button:hover {
            background-color: #3d27a0;
        }
        .added-to-cart-message {
            margin-top: 20px;
        }
        @media screen and (max-width: 768px) {
            .variations-prices-table {
                font-size: 12px;
            }
            .variations-prices-table th, .variations-prices-table td {
                padding: 8px;
            }
            .variations-prices-table td {
                display: block;
                width: 100%;
            }
            .variations-prices-table tr {
                display: flex;
                flex-direction: column;
                border-bottom: 1px solid #ddd;
            }
        }
    </style>';
}

// Eliminar el rango de precios para productos variables
add_filter('woocommerce_get_price_html', 'remove_variable_product_price_range', 10, 2);
function remove_variable_product_price_range($price, $product) {
    if ($product->is_type('variable')) {
        return ''; // Devolver vacío para eliminar el rango de precios
    }
    return $price;
}

// Eliminar selectores de variaciones, cantidad y botón "Añadir al carrito" predeterminados
add_action('wp_enqueue_scripts', 'remove_default_variation_elements');
function remove_default_variation_elements() {
    if (is_product()) {
        wp_add_inline_style('woocommerce-inline', '.variations_form, .single_product_image, .single_variation_wrap { display: none !important; }');
    }
}


add_action('woocommerce_after_shop_loop_item', 'add_variable_product_summary', 5);
function add_variable_product_summary() {
    global $product;

    // Comprobar si es un producto variable
    if ($product->is_type('variable')) {
        // Obtener precios mínimo y máximo
        $prices = $product->get_variation_prices();
        $min_price = current($prices['price']);
        $max_price = end($prices['price']);
        
        // Obtener atributos del producto
        $attributes = $product->get_attributes();
        $attributes_summary = '';

        foreach ($attributes as $attribute_name => $attribute) {
            $attribute_label = wc_attribute_label($attribute_name); // Nombre del atributo
            $values = implode(', ', $attribute->get_options()); // Valores del atributo
            $attributes_summary .= '<strong>' . esc_html($attribute_label) . ':</strong> ' . esc_html($values) . '<br>';
        }

        // Mostrar el mensaje con el rango de precios y atributos
        echo '<div class="variable-product-summary">';
        echo '<p>Rango de precios: ' . wc_price($min_price) . ' - ' . wc_price($max_price) . '</p>';
        echo '<p>' . $attributes_summary . '</p>';
        echo '<p><em>Haga clic en "Seleccionar opciones" para ver más detalles.</em></p>';
        echo '</div>';
    }
}

// Estilos personalizados para el resumen
add_action('wp_head', function() {
    echo '<style>
        .variable-product-summary {
            margin-top: 10px;
            font-size: 14px;
            color: #555;
            border-top: 1px solid #ddd;
            padding-top: 10px;
        }
        .variable-product-summary strong {
            font-weight: bold;
            color: #333;
        }
        .variable-product-summary em {
            font-style: italic;
            color: #888;
        }
    </style>';
});

Lenguaje del código: PHP (php)

En conclución, la personalización de WooCommerce es clave para ofrecer una experiencia de compra única y eficiente a los clientes, y este código es un ejemplo perfecto de cómo una funcionalidad bien diseñada puede marcar la diferencia. Al reemplazar el precio estándar de los productos variables con una tabla interactiva, se elimina la confusión que genera la presentación tradicional, proporcionando a los clientes una visión clara y completa de las opciones disponibles.

Esta solución no solo mejora la estética y usabilidad de la tienda, sino que también optimiza el flujo de compra. Los clientes pueden visualizar imágenes, atributos y precios específicos de las variaciones, seleccionar cantidades personalizadas y añadir productos al carrito de manera directa y sencilla. Esto reduce los pasos necesarios para completar una compra y, en consecuencia, incrementa las tasas de conversión.

Nos vemos en el siguiente tutorial. Un saludo.