Display variants of products

How To
1

Hey,

I was wondering how I can display all variants of a product inside a query loop on the shop or archive page. So as this plugin is doing : [WooCommerce Show Variations as Single Products by welaunch | CodeCanyon](https://Show variants as single products)

5 Likes
2

I have the same problem. The thing is… if you don’t have many products and want to display the variations (like color) to increase the grid of products. This is a very common request, and it would be great if this could be solved as Bricks takes over building the grid, the solutions one can buy don’t work.

I would imagine this would be a feature in the Products Element. It should query each variation as a product before rendering the grid. It should use a field to include variation parameters to consider in builder the query (Color etc.). Maybe it would also have a developer filter, so we can adjust the product before it is rendered to remove or add things to the entry before it is rendered out.

3

Have you found a workaround? Facing this issue still 1 year later.

2 Likes
4

Has anyone made progress on this? I am looking for the same thing

1 Like
5

Came across this post and figured I would share some code I used to achieve this in case it helps anyone else. I wasn’t able to figure out a way to do this with the Products Element so I used a code block.

<?php
  // Query to get WooCommerce products
  $query = new WP_Query( array( 
    'post_type' => 'product', 
    'posts_per_page' => -1 
  ) 
                       ); // -1 to get all products

if ( $query->have_posts() ) {
  while ( $query->have_posts() ) {
    $query->the_post();

    // Get the product ID
    $product_id = get_the_ID();

    // Get the product object
    $product = wc_get_product( $product_id );

    // Get the product name to use as a class
    $product_name_class = sanitize_title( $product->get_name() );

    // Check if the product is a variable product
    if ( $product->is_type( 'variable' ) ) {
      // Get the available variations
      $available_variations = $product->get_available_variations();

      // Output the product-row div for variations with the product name as a class
      echo '<div id="'. esc_attr( $product_id ) .'" class="product-row">';
      // Loop through each variation
      foreach ( $available_variations as $variation ) {
        // Get variation details
        $variation_id = $variation['variation_id'];
        $variation_product = new WC_Product_Variation( $variation_id );

        // Get variation image, name, price, and attributes
        $variation_image = wp_get_attachment_image( $variation_product->get_image_id(), 'full' );
        $variation_name = $variation_product->get_name();
        $variation_price = $variation_product->get_price();
        $variation_attributes = $variation_product->get_attributes();

        // Check if the variation has a color attribute
        if ( isset($variation_attributes['color']) ) {
          $variation_color = $variation_attributes['color'];

          // Output the variation details
          echo '<div class="variation">';
          echo '<div class="variation-image">' . $variation_image . '</div>';
          echo '<div class="variation-name">' . esc_html( $variation_name ) . '</div>';
          echo '<div class="variation-price">' . esc_html( $variation_price ) . '</div>';
          echo '<div class="variation-color">' . esc_html( $variation_color ) . '</div>';
          echo '</div>'; // Close variation div
        }
      }
      echo '</div>'; // Close product-row div
    } else {
      // Handle simple products if necessary
      echo '<div class="product-row ' . esc_attr( $product_name_class ) . '">';
      echo '<div class="variation">';
      echo '<div class="variation-name">' . esc_html( $product->get_name() ) . '</div>';
      echo '<div class="variation-price">' . esc_html( $product->get_price() ) . '</div>';
      echo '</div>'; // Close variation div
      echo '</div>'; // Close product-row div
    }
  }
  wp_reset_postdata();
} else {
  echo 'No products found.';
}
?>
2 Likes