SHARE
TWEET

Clickable WooCommerce Variation Thumbnails

SimeonGriggs Mar 21st, 2017 256 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.     <?php
  2.         // My own code to create thumbnails of all variations
  3.         if( $product->is_type( 'variable' ) ){
  4.     ?>
  5.         <div class="row">
  6.             <div class="col-12">
  7.                 <h2>Available Colours</h2>
  8.             </div>
  9.             <?php
  10.                 $variations = $product->get_available_variations();
  11.  
  12.                 foreach ( $variations as $variation ) {
  13.                     echo '<div class="col-3 mb-2">';
  14.                     echo '<img class="selector_'. $variation['variation_id'] .'" src=' . $variation['image_src'] . '>';
  15.                     foreach($variation['attributes'] as $attributes) {
  16.                             echo $attributes;
  17.                         }
  18.                     echo '</div>';
  19.  
  20.                 // var_dump($variation);
  21.                 }
  22.             ?> 
  23.         </div>
  24.         <script type="text/javascript">
  25.         jQuery(function($){
  26.                 <?php foreach ( $variations as $variation ) { ?>
  27.                 <?php foreach($variation['attributes'] as $attributes) { ?>                
  28.                   $('.selector_<?php echo $variation['variation_id'] ?>').click(function(){
  29.                     $('select[name="attribute_colour"] option[value="<?php echo $attributes ?>"]').attr("selected","selected").trigger('change');
  30.                   });
  31.               <?php } ?>
  32.             <?php } ?>
  33.         });
  34.         </script>
  35.  
  36.         <h2>Product Gallery</h2>
  37.   <?php } ?>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top