Displaying Product Variations as Separate Entries in the Product Grid

Feature Requests / Improvements
1

Hello Bricks Builder team and community,

I’m working on a project where there’s a specific requirement to display each product variation as a distinct entry within the product grid. The primary objective is to present the users with a larger visual catalog, making it appear as though there are more products available while still managing them under a single product variation in the backend.

Background:

The client envisions a scenario where, instead of seeing a single product with dropdown options for different variations, users see each variation as a separate product on the catalog page. For instance, if there’s a T-shirt product that comes in three colors (red, blue, and green), instead of listing one T-shirt product with color options, it would be shown three times in the grid – once for each color.

This approach can offer several advantages:

  1. It provides a visually richer browsing experience for users, potentially increasing engagement and sales.
  2. It enables businesses to highlight their range of offerings more prominently.
  3. For stores with a limited number of products, this can help in filling up the grid, making the store look more populated.

I’ve noticed that this layout style is becoming a trend and many online stores prefer this kind of presentation.

Query:

Is there currently a way in Bricks Builder to query and display product variations in the grid as described above? If not, could this feature be considered for a future update? I believe it would be beneficial not only for my project but for other users who want a similar layout.

Thank you for taking the time to consider this request, and I’m looking forward to hearing your thoughts and suggestions!

3 Likes
3

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.';
}
?>
1 Like
4

Nice! That project is in afterburner mode, but for the future. Really great. Good solution. I will try it out next time I have this problem. Maybe even a good thing to have that in Bricks itself. So, @thomas if you are reading this might be worth considering something similar?

5

Thank you! Yes, I agree it would be a nice feature to add to Bricks.

1 Like