Help with WooCommerce product page?

[Liv]

Hi PHPFreaks!

 

The company I work for had their Wordpress-based website designed by a local agency a year or two ago, but we've managed it ourselves ever since. It's built with Woocommerce and I'm currently trying to replicate something he did on the product pages, but in the process I'm realizing it's just... dirty. I'm at a point where I actually could accomplish what I want in the same way he did, but I just feel like there HAS to be a cleaner way to do it, so before moving forward I wanted to ask, since the PHP is where I start to get fuzzy.

 

So I'm going to use this product page as my example: http://topixpharm.com/product/sheer-physical-sunscreen-cream-spf-50/

 

We're going to focus on the section between the SKU and the social media icons. The Skin Conditions, Skin Type, and Regimen sections were created for us. I'm now trying to add the "As Seen In" section, following the same format, which is to utilize WooCommerce categories and their corresponding thumbnails.

 

This is the code use for the existing sections, found in functions.php ("Skin Condition" section used as example):

add_action('woocommerce_product_meta_end', 'skin_condition');





function skin_condition() {



echo '<div class="skin-icons">';



echo '<div class="skin-condition-title"><h4>Skin Condition</h4></div>';



 if ( is_product() ){



	 $terms = get_the_terms( $post->ID, 'product_cat' );



foreach ( $terms as $term ){



  $category_name = $term->name;



  $category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);



  $image = wp_get_attachment_url($category_thumbnail); 



  echo '<div class="skin-condition">';  



  echo '<img class="'.$term->slug.'" title="'.$category_name.'" src="'.$image.'">';



  echo '</div>';



}



}



echo '</div>';



}

So I'm not sure exactly how to read this, but from how it works, I think it's pulling thumbnails from ALL categories, and not just the "Skin Condition" category. Then, to avoid showing them all on the product page, CSS is used to hide EVERYTHING that isn't a part of that category:

.skin-condition img.glycolic, .skin-condition img.citrix, .skin-condition img.replenix, .skin-condition img.glycolix, .skin-condition img.srs, .skin-condition img.solvere, .skin-condition img.resurfix, .skin-condition img.rebrightalyze, .skin-condition img.benzaderm, .skin-condition img.acne-regimen, .skin-condition img.cleansetone, .skin-condition img.hydrate, .skin-condition img.prevent, .skin-condition img.protect, .skin-condition img.repair, .skin-condition img.antioxidants, .skin-condition img.body-care, .skin-condition img.cleansers, .skin-condition img.exfoliators, .skin-condition img.eye, .skin-condition img.glycolic, .skin-condition img.kits-systems, .skin-condition img.masques-peels, .skin-condition img.masques-peels-specialty, .skin-condition img.moisturizers, .skin-condition img.retinols, .skin-condition img.sunscreens, .skin-condition img.toners, .skin-condition img.new, .skin-condition img.dry, .skin-condition img.normal, .skin-condition img.oily, .skin-condition img.sensitive, .skin-condition img.dermatopix, .skin-condition .gly-sal, .skin-condition .elite, .skin-condition .peels-specialty, .skin-condition .glycolix-elite, .skin-condition .best-sellers, .skin-condition .replenix-acne-solutions, .skin-condition .press-mentions  {
	display: none;
}

So if I want to replicate what he did, all I have to do now is add each "As Seen In" image class to these display: none groups. However, we have MANY magazines that various products have been featured in, and this would just add lines and lines of CSS.

 

I figure that in the functions.php there has to be a way to specifically call upon ONE category at a time? So that in the "Skin Condition" section it will ONLY pull images from the "Skin Condition" category. Is this possible?

 

Thanks!