Show WooCommerce Variable Product Options

3 comments

1. Woocommerce by default comes with the variable product option. FOr this you will first have to create attributes. You can create global if all products have same attributes or can create attributes for each product individually.

   Here is a screenshot of a website i am working for. We have 4 different packages. So my attribute is “packages”, and we have 4 packages in it.
   

   Once the attributes are saved goto the next tab called ‘variations’. Choose packages attribute and it will automatically load all the variations. Here is another screenshot. You will have to choose a default variation.
   

   Once all the above changes are made you can then click on any variation and change the product parameters like price, image etc.
   

   Variations can be used on products like shirts, where you can have different colored shirts and although the price will be same for the shirts but you can give user the ability to choose colors and see how the shirt looks like in that color.

   Although woocommerce have setup everything by default but if you are changing the default wordpress template, then the best way to do is to copy the templates folder from woocommerce and place this folder in your active theme under the name of woocommerce, so it would be something like, wp-content/themes/theme-name/woocommerce. And inside these you need all the files and folders that were in the templates folder of the woocommerce. Woocommerce will automatically pick all these files and will serve it. This method is recommended by woocommerce as making direct changes to the plugins will loose all your customizations on the next plugin update.

   EDIT For your situation : Sorry i think i got carried away :p. Anyways it depends on the situtation you are in and the file that you are using to get these values but, the code below will output all the product variations and all the attributes within that variation. I haven’t tested it out, might need minor adjustments. **

   global $product, $post;
   $variations = $product->get_available_variations();
   foreach ($variations as $key => $value) {
       echo 'variation ID'.$value['variation_id'];
       foreach ($value['attributes'] as $attr_key => $attr_value) {
          echo $attr_key.': '.$attr_value;
       }
   }
   

   Log in to Reply

2. Low and behold.. The solution was so simple.
   All I had to have inside the loop was:

       wc_get_template_part( 'content', 'single-product' );
   

   Now my loop looks like this

       <?php
           $args = array(
               'post_type' => 'product',
               'posts_per_page' => 12,
               // Indicate the product category - in this case "Training"
               'product_cat' => 'training'
           );
           $loop = new WP_Query( $args );
           if ( $loop->have_posts() ) {
               while ( $loop->have_posts() ) : $loop->the_post();
   
                   wc_get_template_part( 'content', 'single-product' );
   
               endwhile;
           }
           wp_reset_postdata();
       ?>
   

   Works fine, and to style the product info I simply created child version of:
   – content-single-product.php
   – product-images.php
   – variable.php
   – meta.php
   – product-thumbnails.php
   and edited til’ my heart was content.

   Log in to Reply

3. I used some of Omer Farooq’s code. Thank you Omer! This will give you a full dropdown menu of the attribute of your choice. In this case, I am using pa_color. I have also removed duplicates so that it will only return the set of colors. This should be used inside of a product loop. In my case, I am using WP_Query to query products.

   <?php   
    /* Check if this is a variable product */                   
    if ($product->is_type( 'variable' )) { ?>
      <select name="pa_color"><?php 
   
    global $product, $post;
   
    $variations = $product->get_available_variations();
   
    $allcolors = array();
   
    foreach ($variations as $key => $value) {
   
       foreach ($value['attributes'] as $attr_key => $attr_value) {
   
      /* Get Name (Label) from Attribute Slug */
      $taxonomy = 'pa_color'; /* Change to whatever you want */
      $meta = get_post_meta($value['variation_id'], 'attribute_'.$taxonomy, true);
      $term = get_term_by('slug', $meta, $taxonomy);
   
       /* Only Return pa_color attributes - Change to whatever you want */
      if ($attr_key == 'attribute_pa_color') {
   
          $color = $attr_value; 
   
          /* Checking for duplicates and removing them */
          if( ! in_array( $color, $allcolors ) ) {
   
            echo '<option value="' . $attr_value . '">' . $term->name . '</option>';
   
            $allcolors[] = $attr_value; /* Array value to use to check for duplicates */
          }
   
      } 
    } 
   } 
   ?>
   </select>
   <?php } ?>
   

   Log in to Reply