// pro zobrazení použijte shortcode [woo_products_by_tags]
// můžete použít doplňující info v shortcode [woo_products_by_tags image_size="shop_thumbnail" title="Další varianty"]

function woo_products_by_tags_shortcode( $atts, $content = null ) {
	extract(shortcode_atts(array(
		"image_size"       => 'thumbnail',  // zde si nastavte, jaký obrázek se má zobrazit, pokud nemáte nastavenou velikost v shortcode
		"title" => 'Další barevné varianty obrazu'  // nadpis, který se zobrazí nad sekcí, pokud jsou nalezeny další varianty, pokud jej nemáte nastaven v shortcode
	), $atts));
	ob_start();
	$current_post_ID = get_the_ID();
	// Define Query Arguments
	$args = array( 
				'post_type' 	 => 'product', 
				'posts_per_page' => 10,   // počet produktů na řádek (vždy se zobrazí jeden řádek i kdyby bylo nalezeno více produktů)
				'product_tag' 	 => get_product_tags( $current_post_ID )
				);
	// Create the new query
	$loop = new WP_Query( $args );
	// Get products number
	$product_count = $loop->post_count;
	// If results
	if ( $product_count > 1 ) {
		echo '<h3 class="odstup-nadpisu">'.$title.'</h3>';
		echo '<ul class="products">';
			// Start the loop
			while ( $loop->have_posts() ) : $loop->the_post(); global $product;	
				global $post;
				if($post->ID !== $current_post_ID) {
					if (has_post_thumbnail( $loop->post->ID )) {
						echo '<div class="zoom-obrazku"><a href="'.get_permalink($post->ID).'">';
						echo  get_the_post_thumbnail($loop->post->ID, $image_size, [ 'alt' => esc_html ( get_the_title() ) ]);
						echo '</a></div>'; 
					}	
				}
			endwhile;
		echo '</ul><!--/.products-->';
	}
	return ob_get_clean();
}
function get_product_tags( $id ) {
	$output = array();
	$terms  = get_the_terms( $id, 'product_tag' );
	if ( $terms !== false ) {
		foreach ( $terms as &$term ) {
			$output[] = $term->name;
		}
		return implode( ',', $output );
	}
	return $output;
}
add_shortcode("woo_products_by_tags", "woo_products_by_tags_shortcode");

// bonus
/*
.odstup-nadpisu {
    padding-bottom: 30px;
    text-align: center;
}

.zoom-obrazku {
  padding-bottom: 0px;
  transition: transform 0.5s; // časová délka animace - tuto poznámku odstraňte!
  width: 150px;
  height: 150px;
  margin: 0 auto;
  display: inline-block;
}

.zoom-obrazku:hover {
  transform: scale(1.1); // 110% zoom - pokud chcete obrázek zvětšit třeba na 150% zadejte 1.5)  - tuto poznámku odstraňte!
}
*/