La experiencia del usuario es un factor crucial para aumentar las ventas y fidelizar a los clientes. Una de las características que pueden marcar la diferencia en una tienda online es la capacidad de comparar de manera detallada las variaciones de un producto. En este contexto, el código que te presento introduce una funcionalidad poderosa y práctica para Woocommerce: una tabla comparativa de variaciones de productos.
Esta funcionalidad permite a los clientes ver y comparar las diferentes variaciones de un producto en un solo lugar, proporcionando detalles importantes como el precio, la imagen, la descripción, el stock disponible y el SKU. Además, lo mejor de todo es que los clientes pueden añadir directamente la variación deseada al carrito con la cantidad que elijan, todo desde la misma interfaz. Esta mejora no solo optimiza la experiencia del usuario, sino que también puede aumentar significativamente las tasas de conversión.
El código añade una acción a WooCommerce que despliega una tabla comparativa después del resumen del producto individual. Esta tabla presenta de manera clara y organizada todas las variaciones disponibles del producto. Además, es completamente responsive y en dispositivos móviles las celdas se verán una debajo de la otra.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
add_action('woocommerce_after_single_product_summary', 'display_detailed_variation_comparison_table', 15);
function display_detailed_variation_comparison_table() {
global $product;
if ($product->is_type('variable')) {
$variations = $product->get_available_variations();
if (!empty($variations)) {
echo '<h3 style="text-align:center; margin:50px;">' . __('Comparación de Variaciones', 'woocommerce') . '</h3>';
echo '<div class="variation-comparison-table-wrapper">';
echo '<table class="shop_table shop_table_responsive variation-comparison-table">';
echo '<thead><tr>';
echo '<th>' . __('Variación', 'woocommerce') . '</th>';
echo '<th>' . __('Imagen', 'woocommerce') . '</th>';
echo '<th>' . __('Precio', 'woocommerce') . '</th>';
echo '<th>' . __('Stock', 'woocommerce') . '</th>';
echo '<th>' . __('Descripción', 'woocommerce') . '</th>';
echo '<th>' . __('SKU', 'woocommerce') . '</th>';
echo '<th>' . __('Añadir al carrito', 'woocommerce') . '</th>';
echo '</tr></thead>';
echo '<tbody>';
foreach ($variations as $variation) {
$variation_obj = wc_get_product($variation['variation_id']);
$variation_image_src = wp_get_attachment_image_src($variation['image_id'], 'thumbnail');
$variation_image = $variation_image_src ? $variation_image_src[0] : wc_placeholder_img_src(); // Usa una imagen de marcador de posición si no hay imagen
$variation_price = $variation_obj->get_price_html();
$variation_stock = $variation_obj->is_in_stock() ? $variation_obj->get_stock_quantity() : __('Agotado', 'woocommerce');
$variation_description = $variation_obj->get_description();
$variation_sku = $variation_obj->get_sku();
// Obtener los atributos de la variación
$attributes = '';
foreach ($variation_obj->get_attributes() as $attribute_name => $attribute_value) {
$term = get_term_by('slug', $attribute_value, $attribute_name);
if ($term) {
$attributes .= $term->name . ', ';
} else {
$attributes .= $attribute_value . ', ';
}
}
$attributes = rtrim($attributes, ', '); // Eliminar la última coma y el espacio
echo '<tr>';
echo '<td style="font-weight:bold;" data-label="' . __('Variación', 'woocommerce') . '">' . $attributes . '</td>';
echo '<td data-label="' . __('Imagen', 'woocommerce') . '"><img src="' . esc_url($variation_image) . '" alt="' . esc_attr($variation_obj->get_name()) . '"></td>';
echo '<td data-label="' . __('Precio', 'woocommerce') . '">' . $variation_price . '</td>';
echo '<td data-label="' . __('Stock', 'woocommerce') . '">' . $variation_stock . ' unidades' . '</td>';
echo '<td data-label="' . __('Descripción', 'woocommerce') . '">' . $variation_description . '</td>';
echo '<td data-label="' . __('SKU', 'woocommerce') . '">' . $variation_sku . '</td>';
echo '<td data-label="' . __('Añadir al carrito', 'woocommerce') . '">';
echo '<form class="cart" method="post" enctype="multipart/form-data">';
echo '<input type="hidden" name="add-to-cart" value="' . absint($product->get_id()) . '">';
echo '<input type="hidden" name="product_id" value="' . absint($product->get_id()) . '">';
echo '<input type="hidden" name="variation_id" value="' . absint($variation['variation_id']) . '">';
woocommerce_quantity_input(array(
'input_name' => 'quantity',
'input_value' => '1',
));
echo '<button type="submit" class="single_add_to_cart_button button alt">' . __('Añadir al carrito', 'woocommerce') . '</button>';
echo '</form>';
echo '</td>';
echo '</tr>';
}
echo '</tbody>';
echo '</table>';
echo '</div>';
}
}
}
add_action('wp_footer', 'add_variation_comparison_table_styles');
function add_variation_comparison_table_styles() {
?>
<style type="text/css">
.variation-comparison-table-wrapper {
overflow-x: auto;
margin: 20px;
padding: 20px;
}
.variation-comparison-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
}
table.shop_table tr>*:first-child {
padding-inline-start: 10px;
}
.variation-comparison-table th,
.variation-comparison-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
.variation-comparison-table th {
background-color: #f4f4f4;
}
.variation-comparison-table img {
max-width: 150px; /* Ajustar el tamaño de la imagen en escritorio */
height: auto;
display: block;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.variation-comparison-table,
.variation-comparison-table thead,
.variation-comparison-table tbody,
.variation-comparison-table th,
.variation-comparison-table td,
.variation-comparison-table tr {
display: block;
text-align: center;
}
.variation-comparison-table thead tr {
display: none !important;
}
.variation-comparison-table tr {
margin-bottom: 15px;
border-bottom: 2px solid #ddd;
}
.variation-comparison-table td {
display: block;
text-align: left;
font-size: 14px;
padding: 10px;
border: none;
border-bottom: 1px solid #ddd;
position: relative;
}
.variation-comparison-table img {
max-width: 150px; /* Ajustar el tamaño de la imagen en móvil */
}
table.shop_table_responsive tbody td {
display: block;
text-align: center;
}
}
</style>
<?php
}
Lenguaje del código: PHP (php)Entendiendo el Código
1. add_action('woocommerce_after_single_product_summary', 'display_detailed_variation_comparison_table', 15);
Esta línea agrega una acción a WooCommerce que ejecuta la función display_detailed_variation_comparison_table después del resumen de un producto individual. La prioridad de 15 asegura que la tabla se muestre en el lugar deseado, tras los detalles del producto.
2. function display_detailed_variation_comparison_table()
Esta función es el núcleo de la funcionalidad. Comienza obteniendo el objeto del producto global. Si el producto es de tipo variable, se recuperan todas las variaciones disponibles.
3. Comprobación del Tipo de Producto
El código verifica si el producto es de tipo variable. Si es así, procede a obtener las variaciones disponibles.
4. Generación del Encabezado de la Tabla
Se genera un encabezado para la tabla con columnas que incluyen la variación, imagen, precio, stock, descripción, SKU y una opción para añadir la variación al carrito. Esto establece la estructura básica de la tabla.
5. Iteración a través de las Variaciones
La función itera sobre cada variación disponible del producto. Para cada variación, se obtiene el objeto de producto correspondiente y se extraen los detalles necesarios como la imagen, el precio, el stock, la descripción y el SKU.
6. Extracción y Formateo de Atributos
Se extraen los atributos de cada variación y se formatean para ser presentados en una columna de la tabla. Esto incluye convertir los slugs de los atributos en nombres legibles.
7. Generación de Filas de la Tabla
Para cada variación, se genera una fila en la tabla con todas las columnas previamente definidas. Esto incluye:
- Variación: Se muestran los atributos.
- Imagen: Se muestra la imagen de la variación, con una imagen de marcador de posición si no hay una imagen disponible.
- Precio: Se muestra el precio de la variación.
- Stock: Se muestra la cantidad de stock disponible o un mensaje de «Agotado» si no hay stock.
- Descripción: Se muestra la descripción de la variación.
- SKU: Se muestra el SKU de la variación.
- Añadir al carrito: Se incluye un formulario que permite a los usuarios añadir la variación directamente al carrito con la cantidad deseada.
8. Añadir al Carrito
El formulario dentro de cada fila de la tabla incluye campos ocultos que envían los IDs del producto y la variación al carrito de WooCommerce cuando se hace clic en el botón «Añadir al carrito».
9. Estilos Responsivos
El código incluye un bloque de estilos CSS que asegura que la tabla sea responsiva. Esto significa que la tabla se ajustará para verse bien tanto en dispositivos de escritorio como en dispositivos móviles. En pantallas pequeñas, las filas de la tabla se despliegan como bloques y se reorganizan para facilitar la lectura y la interacción en dispositivos móviles.
10. add_action('wp_footer', 'add_variation_comparison_table_styles');
Finalmente, se añade una acción que ejecuta la función add_variation_comparison_table_styles en el pie de página. Esta función contiene los estilos CSS necesarios para la tabla comparativa, garantizando que se apliquen correctamente en todas las páginas donde se utilice.
11. function add_variation_comparison_table_styles()
Esta función define los estilos CSS directamente en el archivo PHP. Los estilos aseguran que la tabla tenga un diseño limpio y organizado, con una disposición que se adapta automáticamente a diferentes tamaños de pantalla.
Conclusión
Este código mejora significativamente la experiencia de usuario en Woocommerce al proporcionar una manera clara y accesible de comparar variaciones de productos. La tabla no solo muestra información esencial sobre cada variación, sino que también permite a los usuarios añadir productos al carrito directamente desde la tabla, todo ello en un diseño responsivo que se adapta a cualquier dispositivo.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.