krystian
¿Hay alguna forma (quizás a través de functions.php) de cambiar la imagen del producto en las tiendas de woocommerce (página de archivo) al pasar el mouse con la primera imagen de la galería adjunta del producto? No puedo encontrar cómo apuntar a ambos. Supongo que debe ser algo como esto:
add_action( 'woocommerce_shop_loop_item', 'change_image_on_hover', 10 );
function change_image_on_hover() {
$product->get_gallery_image_ids();
print 'woocommerce_gallery_image';
}
Lo que creo que querrá hacer, suponiendo que su instalación sea una instalación WooC algo estándar, es utilizar el enlace de acción del elemento de bucle para agregar la imagen deseada al pasar el mouse.
add_action( 'woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image' ) ;
function add_on_hover_shop_loop_image() {
$image_id = wc_get_product()->get_gallery_image_ids()[1] ;
if ( $image_id ) {
echo wp_get_attachment_image( $image_id ) ;
} else { //assuming not all products have galleries set
echo wp_get_attachment_image( wc_get_product()->get_image_id() ) ;
}
}
CSS preliminar:
/* CUSTOM ON-HOVER IMAGE */
.woocommerce ul.products li.product a img {
/* FORMAT ALL IMAGES TO FILL EQUIVALENT SPACE,
to remove jitter on replacement */
height: 150px;
width: 150px;
object-fit: cover;
padding: 0;
margin: 0 auto;
}
.woocommerce ul.products li.product a img:nth-of-type(2) {
display: none;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(2) {
display: block
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
display: none;
}
Lo anterior obtendrá lo que desea para un tipo de pantalla de archivo de la tienda, para lograr un reemplazo simple, pero habrá numerosos detalles que puede necesitar o desea personalizar para su sitio. 150x150px puede no ser el tamaño adecuado para su tema, por ejemplo. O puede decidir que necesita reemplazar la imagen predeterminada por completo con un conjunto diferente, y que para obtener un efecto de transición particular, o para obtener coherencia con otros efectos en uso en su sitio, necesitará un enfoque diferente para CSS y posiblemente a javascript.
-
Impresionante, esto está funcionando, muchas gracias. Desafortunadamente, imprime la versión de 150x150px de la imagen de la galería. ¿Sabes cómo obtener una imagen de mejor calidad con 600x600px? CSS no es la solución.
– Kristian
5 de junio de 2020 a las 7:28
-
Seguro – wp_get_attachment_image() por defecto es ‘miniatura’. Si su tema ya tiene 600×600 registrados como un tamaño de imagen (¿’mediano’, ‘grande’), simplemente agréguelo como segundo parámetro. o intente ‘array(‘600’, ‘600’) (y ajuste CSS apropiadamente) – Más con ejemplos en desarrollador.wordpress.org/reference/functions/…
– CK MacLeod
5 de junio de 2020 a las 7:35
-
(“mediano” y “grande” probablemente se establecerían en Configuración/Medios de instalación)
– CK MacLeod
5 de junio de 2020 a las 7:42
-
Para obtener la primera imagen de la galería, creo que debería ser: get_gallery_image_ids()[0]
– Alejandro
8 de febrero de 2021 a las 12:07
-
los [0] La imagen es, creo, la imagen destacada… pero ha pasado un tiempo desde que respondí esto. Verificaré dos veces más tarde si aún no lo ha hecho.
– CK MacLeod
8 de febrero de 2021 a las 22:57
Puede usar el complemento si no ha eliminado la acción y el filtro predeterminados de WooCommerce.
Aquí está el complemento Enlace
-
muchas gracias, en general, este complemento funciona, pero si mantiene el mouse sobre la imagen, retrocede y avanza en un bucle sin fin en lugar de retroceder solo si aleja el mouse.
– Kristian
1 de junio de 2020 a las 8:42
CSS puede detectar cuando el usuario se desplaza sobre una imagen. ¿Es posible que cargue ambas imágenes y luego simplemente apague y encienda una cuando se detecte el desplazamiento?
El código para eso se vería así:
HTML:
<a id="home">
<img class="image_on" src="https://stackoverflow.com/questions/62088615/images/productImage.png"" />
<img class="image_off" src="images/galleryImage.png" />
</a>
CSS:
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
Si esto no funciona, consulte este hilo para encontrar otra solución usando js/jquery
¿Es esto lo que estás buscando?
Cambiador de imágenes de productos de WooCommerce
Sin embargo, parece que no se ha probado con las últimas 3 versiones principales de WordPress. Todavía puedes probarlo y ver.
Este hilo también parece explicar lo que necesitas.
Utilice este código funciona perfectamente | Woocomerce Última versión Cambie la imagen del producto al pasar el mouse sobre la página de archivo de WooCommerce
add_action( 'woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image' ) ;
function add_on_hover_shop_loop_image() {
$image_id = wc_get_product()->get_gallery_image_ids()[0] ;
if ( $image_id ) {
echo wp_get_attachment_image( $image_id ) ;
} else { //assuming not all products have galleries set
echo wp_get_attachment_image( wc_get_product()->get_image_id() ) ;
}
}
Ankit Tiwari
Use esto para obtener la imagen de tamaño completo del producto
add_action(‘woocommerce_before_shop_loop_item_title’, ‘add_on_hover_shop_loop_image’);
función add_on_hover_shop_loop_image() {
$image_id = wc_get_product()->get_gallery_image_ids()[1] ;
$img_size = wc_get_image_size( $image_id, 'full' );
if ( $image_id ) {
echo wp_get_attachment_image( $image_id, 'full' ) ;
} else { //assuming not all products have galleries set
echo wp_get_attachment_image( wc_get_product()->get_image_id() ) ;
}
}