Главная / Блог / Как вывести дополнительное изображение при наведении на товар в WooCommerce

Блог

Как вывести дополнительное изображение при наведении на товар в WooCommerce

Чтобы вывести дополнительное изображение при наведении на товар в WooCommerce, можно воспользоваться плагином (WC Secondary Product Thumbnail), или написать свой код. Я воспользовался таким кодом:

function vchuy_second_thumb_product(){
	
$product = new WC_Product( get_the_ID() );
$attachment_ids = $product->get_gallery_image_ids();

if ( is_array( $attachment_ids ) && !empty($attachment_ids) ) {
    $first_image_url = wp_get_attachment_url( $attachment_ids[0] ); 
	  ?> 
	<img class="second-img-product" src="<?php echo $first_image_url; ?>" >
  <?php 
} else { ?>		
 <?php  
}	
}

add_action('woocommerce_before_shop_loop_item_title', 'vchuy_second_thumb_produc', 20 );

function vchuy_second_thumb_product(){

$product = new WC_Product( get_the_ID() );

$attachment_ids = $product->get_gallery_image_ids();

if ( is_array( $attachment_ids ) && !empty($attachment_ids) ) {

$first_image_url = wp_get_attachment_url( $attachment_ids[0] );

<?php

} else { ?>

<?php

}

add_action('woocommerce_before_shop_loop_item_title', 'vchuy_second_thumb_produc', 20 );

Этот код нужно поставить в functions.php вашей темы.

Далее копируем файл /wp-content/plugins/woocommerce/templates/content-product.php в папку вашей темы / woocommerce / и редактируем.

Нужно добавить контейнер для фото товара. Как то так:

 <div class="ps-product__thumbnail">
					<?php	/**
	 * Hook: woocommerce_before_shop_loop_item_title.
	 *
	 * @hooked woocommerce_show_product_loop_sale_flash - 10
	 * @hooked woocommerce_template_loop_product_thumbnail - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item_title' ); 
 
?>			
					    </div>

<?php /**

* Hook: woocommerce_before_shop_loop_item_title.

* @hooked woocommerce_show_product_loop_sale_flash - 10

* @hooked woocommerce_template_loop_product_thumbnail - 10

do_action( 'woocommerce_before_shop_loop_item_title' );

</div>

Это делается для того, чтобы фото были в контейнере. Далее просто нужно добавить css для привильного отображения.

<style>
.ps-product__thumbnail {
    position: relative;
    overflow: hidden;
    z-index: 10;
}
.product .ps-product__thumbnail img {
    opacity: 1;
}
.product .ps-product__thumbnail img {
    width: 100%;
    -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    height: auto;
}
.product .ps-product__thumbnail img.second-img-product {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}
.product:hover img {
    visibility: hidden;
    opacity: 0;
}
.product:hover .ps-product__thumbnail img.second-img-product {
    opacity: 1;
	visibility: visible;
}
</style>

<style>

.ps-product__thumbnail {

position: relative;

overflow: hidden;

z-index: 10;

}

.product .ps-product__thumbnail img {

opacity: 1;

}

.product .ps-product__thumbnail img {

width: 100%;

-webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);

-o-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);

transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);

height: auto;

}

.product .ps-product__thumbnail img.second-img-product {

position: absolute;

top: 0;

left: 0;

width: 100%;

opacity: 0;

}

.product:hover img {

visibility: hidden;

opacity: 0;

}

.product:hover .ps-product__thumbnail img.second-img-product {

opacity: 1;

visibility: visible;

}

</style>

Post Views: 2 530

+359-87-701-35-06

vchuy.develop@gmail.com