Add woocommerce product feature taxonomy picture to product archives

Add the following code to your child functions.php file. May be it eas already written here earlier but this works perfectly to add product feature images/ icons to product archives.

// taxonomy product feature images into woocommerce product archives
add_action('woocommerce_before_shop_loop_item', 'special_images_woocommerce');
function special_images_woocommerce() {
    // Check if the 'taxonomy-images' plugin is active
    if (is_plugin_active('taxonomy-images/taxonomy-images.php')) {
       global $product;
	$filter_out = apply_filters( 'taxonomy-images-queried-term-image', '', ['image_size' => 'medium', 'attr' => ['class' => 'tax-image-custom']] );
	if ($filter_out) {
		// Wrap the output in a container
		echo '<div class="tax-image-custom-container">' . $filter_out . '</div>';
	}
	else {
		$image_counter = 0; // Initialize image counter
	    foreach( $product->get_attributes() as $taxonomy => $product_attribute ) {
	        foreach( $product_attribute->get_terms() as $term ) {
				$term = get_term($term, $taxonomy);
				$tit = new Taxonomy_Images_Term($term);
				$image_id = $tit->get_image_id();
				if ($image_id > 0) {
					// Wrap the output in a container and increment the image counter
					echo '<div class="tax-image-custom-container tax-image-custom-container-' . $image_counter . '">' . wp_get_attachment_image($image_id, 'thumbnail', false, ['class' => 'tax-image-custom']) . '</div>';
					$image_counter++; // Increment image counter
				}
	        }
	    }
	}
}

    else {
        return; // Plugin is not active, so we exit the function
    }
}

css child theme code

/* image feature taxonomy */
.tax-image-custom {padding: 2px 5px; max-width: 40px;}

.tax-image-custom-container {
    position: absolute;}

.tax-image-custom-container-0 {
    top: 10px;    left: 0;}

.tax-image-custom-container-1 {
    top: 50px;    left: 0px;}

.tax-image-custom-container-2 {
    top: 90px;    left: 0px;}

.tax-image-custom-container-3 {
    top: 130px;    left: 0px;}

• This topic was modified 1 year, 4 months ago by motmat.