Display Product Variations on Shop Page as Single Products

How To
1

Hi, how can I display my product variations on the product archive page as their own product. And once clicked on one of them, they all lead to the same product.

Apparently third party plugins have a problem accessing the shop page when a Bricks template is used instead of the default WooCommerce shop page.

Here’s an example of such a plugin, but it doesn’t work:

Thanks!

1 Like
2

check this out :slight_smile:


function display_variation_products() {
    // WP_Query arguments to fetch product variations
    $args = array(
        'post_type' => 'product_variation',
        'posts_per_page' => -1, // Set to -1 to show all variations
    );

    // The Query
    $variations_query = new WP_Query($args);

    // The Loop
    if ($variations_query->have_posts()) {
        echo '<ul class="products">';
        while ($variations_query->have_posts()) {
            $variations_query->the_post();
            $variation = new WC_Product_Variation(get_the_ID());
            echo '<li class="product">';
            // Link to the parent product
            echo '<a href="' . get_permalink($variation->get_parent_id()) . '">' . get_the_title($variation->get_parent_id()) . '</a> - ';
            // Display the price of the variation
            echo $variation->get_price_html();
            echo '</li>';
        }
        echo '</ul>';
    } else {
        // No variations found
        echo 'No product variations found.';
    }

    // Restore original Post Data
    wp_reset_postdata();
}

// Use this function where you want to display the variations
display_variation_products();
3

Thanks @sinanisler, I’ve added the code to my functions.php and now get an error on my shop page:

Fatal error: Uncaught Error: Call to a member function get_queried_object_id() on null in /usr/www/users/vorldp/jvorld/wp-includes/query.php:61 Stack trace: #0 /usr/www/users/vorldp/jvorld/wp-includes/class-wp-query.php(4778): get_queried_object_id() #1 /usr/www/users/vorldp/jvorld/wp-includes/class-wp-query.php(4703): WP_Query->generate_postdata() #2 /usr/www/users/vorldp/jvorld/wp-includes/class-wp-query.php(3687): WP_Query->setup_postdata() #3 /usr/www/users/vorldp/jvorld/wp-content/plugins/wpcodebox2/src/Runner/QueryRunner.php(126) : eval()‘d code(21): WP_Query->the_post() #4 /usr/www/users/vorldp/jvorld/wp-content/plugins/wpcodebox2/src/Runner/QueryRunner.php(126) : eval()‘d code(41): display_variation_products() #5 /usr/www/users/vorldp/jvorld/wp-includes/class-wp-hook.php(324): Wpcb2\Runner\QueryRunner->{closure}() #6 /usr/www/users/vorldp/jvorld/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters() #7 /usr/www/users/vorldp/jvorld/wp-includes/plugin.php(517): WP_Hook->do_action() #8 /usr/www/users/vorldp/jvorld/wp-settings.php(506): do_action() #9 /usr/www/users/vorldp/jvorld/wp-config.php(102): require_once(’/usr/www/users/…’) #10 /usr/www/users/vorldp/jvorld/wp-load.php(50): require_once(‘/usr/www/users/…’) #11 /usr/www/users/vorldp/jvorld/wp-blog-header.php(13): require_once(‘/usr/www/users/…’) #12 /usr/www/users/vorldp/jvorld/index.php(17): require(‘/usr/www/users/…’) #13 {main} thrown in /usr/www/users/vorldp/jvorld/wp-includes/query.php on line 61

I need to keep using my custom shop page ( Shop – jvorld ) in order to individualize the design.

4

oh its not a functions.php code :slight_smile:

this is a example how a new loop can be made just for querying variable products only.

read the comment lines top of the functions it gives hints what it is doing.

this is not a full solutions it is just an example really. if you can figureout the custom query yourself you may create something with query loop.

just try to run with code element or try to replicate the query array on custom query loop.

5

I see, I appreciate your help, but I’m more looking for a solution that works with the Bricks product archive template and the products element. I also want to display variations beside all other products and not display them alone. Thank you though.

1 Like
6

Hi Johannes, I was wondering if you ever figured how to display variations as single products in Bricks builder? Thanks

7

Hi MissAnne, unfortunately not, instead I am using a new product for each variant right now.