Чтобы вывести дополнительное изображение при наведении на товар в WooCommerce, можно воспользоваться плагином (WC Secondary Product Thumbnail), или написать свой код. Я воспользовался таким кодом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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 ); |
Этот код нужно поставить в functions.php вашей темы.
Далее копируем файл /wp-content/plugins/woocommerce/templates/content-product.php в папку вашей темы / woocommerce / и редактируем.
Нужно добавить контейнер для фото товара. Как то так:
1 2 3 4 5 6 7 8 9 10 11 | <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> |
Это делается для того, чтобы фото были в контейнере. Далее просто нужно добавить css для привильного отображения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <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> |