Tahák k tvorbě webů

WooCommerce

Zobrazit náhledy produktů bez ořezu

Viz responzivní galerie obrázků pomocí Bootstrap

PHP

<?php
function gog_product_thumbnail() {
	global $post, $woocommerce;
	$size = 'medium';

	$output = '<div class="image-square">';

	if (has_post_thumbnail()) {               
		$output .= get_the_post_thumbnail($post->ID, $size);
	} 
	else {
		$output .= wc_placeholder_img($size);
	}                       

	$output .= '</div>';
	echo $output;
}
remove_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action('woocommerce_before_shop_loop_item_title', 'gog_product_thumbnail', 10);

CSS

.woocommerce ul.products li .image-square {
	position:relative; 
	overflow:hidden; 
	padding-bottom:100%;	
}

.woocommerce ul.products li .image-square img {
	border: 0;
	position: absolute; 
	max-height: 100%; 
	max-width: 100%; 
	top: 50%; 
	left: 50%; 
	transform: translateX(-50%) translateY(-50%); 
	object-fit: contain;	
}