Mostrar las variaciones de producto como un listado de productos @ Ayuda WordPress

En una ocasión un cliente me pidió que quería que en la página de cada producto variable se mostrase cada variación como un producto en sí mismo, en un listado para añadir rápido al carrito.

Pensé que sería complicado pero en realidad fue muy fácil, lo único que tardamos algo más fue en decidir cómo queríamos que se mostrase el listado, el aspecto del mismo, como suele ser habitual.

Usando funciones de WooCommerce puedes hacerlo tú de manera sencilla, con un código como el siguiente:

/* Variaciones de producto Woo como listado */
//Primero quitamos el selector de variaciones y el boton de agregar al carrito simple
remove_action('woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30);
add_action('woocommerce_variable_add_to_cart', 'custom_variable_div', 15);
//Arrancamos la funcion para mostrar el listado de variaciones
add_action('woocommerce_product_meta_end', 'ayudawp_listado_variaciones_como_productos');
function ayudawp_listado_variaciones_como_productos() {
    if ( ! is_product()) {
        return;
    }
    global $product;
    if ( ! $product->is_type('variable') ) {
        return;
    }
    $variation_ids = $product->get_children();
    if ( empty( $variation_ids ) ) {
        return;
    }
echo '
Selección rápida
';
    echo '
';
    foreach ( $variation_ids as $variation_id ) {
        $variation = wc_get_product( $variation_id );
        if ( $variation && $variation->is_in_stock() ) {
echo '';
        }
    }
 echo '
';
}

Con este código pasaremos de esto…

A esto otro…

Luego ya, si ves que queda un poco basto el listado, puedes jugar algo con CSS hasta mostrarlo a tu gusto. Por ejemplo, así haríamos las miniaturas más pequeñas:

*/ Estilos para listado de variaciones de producto */
.elemento-lista-variaciones-personalizada {
display: grid;
grid-template-columns: 80px 1fr auto;
grid-template-areas: 'image details button';
gap: 15px;
padding: 15px;
}
.elemento-lista-variaciones-personalizada img {
grid-area: image;
max-width: 80px; 
height: auto;
}
.elemento-lista-variaciones-personalizada .variation-details {
grid-area: details;
align-self: center;
}
.elemento-lista-variaciones-personalizada h2 {
font-size: 1.1em;
font-family: Verdana;
margin: 0;
text-decoration: none;
}
.elemento-lista-variaciones-personalizada a:where(:not(.wp-element-button)) {
text-decoration: none;
}
.elemento-lista-variaciones-personalizada .price {
font-size: 1.2em;
color: #333;
margin-bottom: 40px;
}
.elemento-lista-variaciones-personalizada .add_to_cart_button.button {
grid-area: button;
background-color: #0073aa;
color: #fff;
border: none;
padding: 10px 15px;
text-transform: uppercase;
font-size: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
text-decoration: none;
}
.elemento-lista-variaciones-personalizada .button:hover {
background-color: #005177;
}

Y se ve bastante mejor:

Y si no te gusta, pues enreda con el CSS hasta que esté como prefieras. Lo importante es que funciona ¿no?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!