How To Display Variations As a List of Products in WooCommerce

This code display a list of your variations as products on your single product page. You can use any single variable product page hook to display your variations anywhere on your page.

add_action('woocommerce_product_meta_end', 'wpsitesdotnet_related_variations_loop');
function wpsitesdotnet_related_variations_loop() {

    if ( ! is_product()) {
        return;
    }

    global $product;

    if ( ! $product->is_type('variable') ) {
        return;
    }

    $variation_ids = $product->get_children();

    if ( empty( $variation_ids ) ) {
        return;
    }

    echo '<div class="custom-variations-list">';

    foreach ( $variation_ids as $variation_id ) {
    
        $variation = wc_get_product( $variation_id );

        if ( $variation && $variation->is_in_stock() ) {
        
            echo '<div class="custom-variation-item">';
            echo '<a href="' . get_permalink($variation->get_id() ) . '">';
            echo $variation->get_image();
            echo '</a>';
            echo '<div class="variation-details">';
            echo '<a href="' . get_permalink($variation->get_id() ) . '">';
            echo '<h2>' . $variation->get_name() . '</h2>';
            echo '</a>';
            echo '<span class="price">' . $variation->get_price_html() . '</span>';
            echo '<a href="?add-to-cart=' . $variation->get_id() . '" data-quantity="1" class="button add_to_cart_button" data-product_id="' . $variation->get_id() . '">' . __('Add to cart', 'woocommerce') . '</a>';
            echo '</div>';
            echo '</div>';
        }
    }

    echo '</div>';
}

The code works on all single variable product pages. If you want to control the execution of the function on 1 or more specific variable product pages, you can add a conditional tag like this :

$target_product_ids = array(123, 456, 789); 

if ( ! in_array( $product->get_id(), $target_product_ids ) ) {
return;
}

Optional Styling

Here’s some sample CSS you can use to get started with styling your list of variable products

.custom-variation-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    grid-template-areas: 'image details button';
    gap: 15px;
    padding: 15px;
}

.custom-variation-item img {
    grid-area: image;
    max-width: 80px; 
    height: auto;
}

.custom-variation-item .variation-details {
    grid-area: details;
    align-self: center;
}

.custom-variation-item h2 {
    font-size: 1.1em;
    font-family: Verdana;
    margin: 0;
    text-decoration: none;
}

.custom-variation-item  a:where(:not(.wp-element-button)) {
    text-decoration: none;
}

.custom-variation-item .price {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 40px;
}

.custom-variation-item .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;
}

.custom-variation-item .button:hover {
    background-color: #005177;
}

Related Solutions

• Variation Addons Block With Price Difference for WooCommerce
• Variations Table Per Product for WooCommerce
• Variations On Single Product Page Table With Quantity Selector
• Apple Style Product Addons Page Template for WooCommerce
• How To Add Bulk Variations To Cart In WooCommerce