neilgee
7/27/2016 - 4:24 AM

Show WooCommerce Product Categories image and heading

Show WooCommerce Product Categories image and heading

<div class="shopfeature">
<?php
/*
I used this code block to display 3 particular WooCommerce Product Categories on the home page in a row, they use a custom defined image size and the image used is the one uploaded for the category in the dashboard.
*/
    $i=1; //used only to set specific class on div
    $prod_cats = get_terms( 'product_cat', array(
        'orderby' => 'include', // Order by the the Cat IDs included below
        'include' => array(337,339, 469),  // set the Cat IDs
    ));
    foreach( $prod_cats as $prod_cat ) :
        $cat_term_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
        $cat_img_url = wp_get_attachment_image_src( $cat_term_id, 'thirdchapter-archive', false ); // Set the custom image size required
        $term_link   = get_term_link( $prod_cat, 'product_cat' );

    if($i==1)  {
    ?>
      <div class="first one-third">
      <a href="<?php echo $term_link; ?>"><img src="<?php echo $cat_img_url[0]; ?>" alt="<?php echo $prod_cat->name; ?>" />
      <h3><?php echo $prod_cat->name; ?></h3></a>
      </div>
      <?php
    }
    else {
    ?>
      <div class="one-third">
      <a href="<?php echo $term_link; ?>"><img src="<?php echo $cat_img_url[0]; ?>" alt="<?php echo $prod_cat->name; ?>" />
      <h3><?php echo $prod_cat->name; ?></h3></a>
      </div>
      <?php
    }

  $i++; //counter increment
  
  endforeach; wp_reset_query(); // reset the query
  
?>
</div>