Woocommerce show individual variations on a page

Question

My woocommerce store sells books for which there are often several variations - ebook, audiobook, paperback...

I have these set up as variable products. But I would like to add pages where people can see just a single variation - so, all the audiobooks or all the ebooks. This would be linked from a menu.

Is this possible? Or should I just give up and do each one as a simple product? I know there are paid plugins out there, but my turnover is super small and I don't want to make a loss on my store.

I've picked up some understanding of code, but programming is not my thing. If you are kind enough to post something, I will need a teensy bit of hand-holding. So saying that I need to target the shop loop (or something) will leave me floundering. But saying, here is some code, just change X for your variation name and add the css or post in functions.php will be set me on the right path.

Thank you in advance.

Answer 1

1. Create new template in your active theme. In my case i named it template-audiobook-products.php - Read more about templates here - https://developer.wordpress.org/themes/template-files-section/page-template-files/

2. Inside the template add the follwoing code

/* Template Name: Audio books */

get_header('shop');
$args = array(
    'post_type' => 'product',
    'tax_query' => array(
        'relation' => 'AND', 
         array(
             'taxonomy' => 'product_type',
             'field'    => 'slug',
             'terms'    => 'variable', 
         ),
         array(
            'taxonomy' => 'pa_color', //Change to proper attribute
            'field'    => 'slug',
            'terms'    => 'blue', //Change to proper value
        ),

     ),
     'fields' => 'ids'

);
$get_all_variable_products = get_posts($args);

$product_ids_list = array();
foreach($get_all_variable_products as $parent_variation_id):
    $_product = wc_get_product($parent_variation_id);
    $variable_product_ids = $_product->get_children();
    foreach($variable_product_ids as $variable_product_id):
        $_variable_product = wc_get_product($variable_product_id);
        $_variable_product_attributes = $_variable_product->get_attributes();
        if($_variable_product_attributes['pa_color'] == 'blue'):
            $product_ids_list[] = array( 'parent_id'=> $parent_variation_id, 'variation_id' => $variable_product_id);
        endif;
    endforeach;
endforeach;
woocommerce_product_loop_start();
foreach($product_ids_list as $_product_id):
    //Since $product is obj we can pass it and use our default content-product template.
    $product = wc_get_product($_product_id['variation_id']);
    //Keep in mind this template by default doesnt support ajax (use css to hide button or use woo hook/filters)
    wc_get_template_part( 'content', 'product');
  
    //In case we want custom design or ajax button uncomment following.
    // echo '<a href="?add-to-cart='.$product['variation_id'].'" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="'.$product['variation_id'].'" rel="nofollow">Add to cart</a>';
endforeach;
woocommerce_product_loop_end();
get_footer('shop');

3. Create new page and select this template

To work properly the standart woocommerce template we need to include the classes and other html tags that we may need in our template. Add this function in your active theme functions.php file.

function my_custom_body_class($classes) {
    if(is_page_template('template-audiobook-products.php')) {
    $classes[] = 'woocommerce';
    }
    return $classes;
}
add_filter('body_class','my_custom_body_class');