Jump to content

Help with WooCommerce product page?

Recommended Posts

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?



Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.