Štítek v přehledu produktů

U jednoho e-shopu jsem měla požadavek o zobrazení štítku (obrázku) přes obrázek produktu na stránce obchodu.

Protože bylo takových specialit na e-shopu více, aby bylo jejich přiřazování produktům jednoduché, zvolili jsme použití štítků. Majitelka obchodu tedy přiřadí produktu štítek a o zbytek se postará kód v child theme.

Ukázka (samozřejme je třeba použít správné ID štítku a URL k obrázku):

// show custom tag image  ----------------------------------------------------------------------------------
// https://vyladeny-web.cz/zobrazit-vlastni-parametr-v-produktu/
add_action( 'woocommerce_before_shop_loop_item', 'bbloomer_show_product_dimensions_loop', 20 );
  
function bbloomer_show_product_dimensions_loop() {
    global $product;   

	//produkt na prani
	if( in_array(167, $product->tag_ids)) {		
		echo '<img src="https://your-domain.com/wp-content/uploads/2022/09/Produkt-na-prani6.png" class="customizable-product">'; 
	}	
	
	//vyber z velikostí
	if( in_array(175, $product->tag_ids)) {
		echo '<img src="https://your-domain.com/wp-content/uploads/2022/09/Produkt-na-prani5.png" class="size-choice-product">'; 
	}	
}

A pak je třeba obrázek nastylovat, např. 

img.size-choice-product{
    z-index: 100 !important;    
    max-width: 50%;
    position: absolute;
    top: -2%;
    right: -5%;
}

img.customizable-product {
    z-index: 100 !important;    
    max-width: 50%;
    position: absolute;
    top: -2%;
    right: -5%;
}