Varias veces he hecho hincapié en la importancia de las imágenes de producto en un ecommerce, dado que el cliente no puede ver y tocar el producto «en vivo» y estas imágenes son las únicas referencias que tiene de él. Pero resulta que no siempre se venden productos, y aún así no en todos los casos son necesarias las imágenes de producto.
¿Qué ocurre si vendemos servicios? ¿Ponemos una imagen de relleno para que no quede el placeholder a la vista, con el mal efecto que hace? ¿Y si queremos crear un producto no para la tienda, sino para insertarlo en una página de ventas? En este artículo te voy a explicar cómo puedes eliminar la imagen de la página de producto en WooCommerce de forma que, si estas en uno de estos casos, todo quede más limpio.
Tabla de contenidos
Ficha de producto sin imágenes en WooCommerce
Es obvio el caso en que en lugar de vender productos vendemos servicios: ahí no hace falta imagen, y poner una es totalmente innecesario. Es más, en dispositivos móviles (en España ya son la fuente de tráfico número uno, por delante de los ordenadores) la imagen ocupa un espacio precioso. Cuando ésta es importante, es espacio bien aprovechado, pero si es superflua… ¡sobra!
Dos formas de hacerlo: quitar la imagen u ocultarla
Pero dejémonos de consideraciones teóricas 🙂 y vamos al turrón: queremos eliminar la imagen de la ficha de producto. Bien, llegados a este punto hay dos formas de hacerlo: eliminando el hook que hace que se cree o bien ocultándola mediante CSS.
A mi modo de ver es mejor la primera forma. Al fin y al cabo es mucho más eficiente «retirar» el código que hace que la galería se imprima en pantalla, que dejar que ese código se ejecute y después ocultar el resultado. Pero como necesidades hay para todos los gustos, ahí van las dos formas.
Eliminar la galería de producto mediante un hook
En este caso lo que hacemos es eliminar (los desarrolladores y programadores tendemos a decir «desregistrar», pero de momento eso no está aceptado por la RAE) el hook que hace que WooCommerce cree la galería usando la función remove_action. En concreto el código sería:
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
¿Dónde tienes que incluir ese código? Pues tienes varias opciones, que ya he explicado otras veces, aquí y aquí.
Ocultar la galería de producto mediante CSS
La otra opción es utilizar CSS. Como te decía más arriba considero la opción anterior mejor en términos de eficiencia y economía de código, pero entiendo que hay gente a la que el código le da miedo, así que aquí está la alternativa, más sencilla si cabe.
Para ocultar la galería mediante CSS sólo tendrías que ir a Apariencia > CSS personalizado e incluir lo siguiente:
.product .images {display:none;}
Y listo.
Adaptar la ficha de producto
Es cierto que hemos hecho desaparecer la galería de imágenes, pero sólo hemos recorrido la mitad del camino. Lo que tenemos conseguido de momento es esto, que no parece un avance muy significativo:
Es cierto que la galería de imágenes no aparece ya, pero ahí está el espacio, en blanco. Casi peor. Pues nada, esto hay que solucionarlo.
Y la solución es sencillísima, se trata solamente de «dar permiso» a la descripción corta del producto, que antes estaba restringida a la mitad derecha de la pantalla, para ocupar todo el ancho que quiera. Para eso basta un poco de CSS que va, igualmente, en Apariencia > CSS adicional:
.product .summary {width:100% !important;}
Ahora sí, el resultado está mejor conseguido:
Eliminar la imagen de producto de las páginas de archivo
Podemos ir un poco más allá, aunque no siempre será necesario. La imagen (la galería, en realidad) ya está eliminada de la ficha de producto, pero quizá tampoco queramos que aparezca en las páginas de archivo (tienda, categoría, etiqueta, resultados de búsqueda…).
Esto ya es menos habitual, pero nunca se sabe. Así que, por si acaso, ahí van un par de soluciones:
A. Mediante un hook:
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
B. Mediante CSS:
ul.products li.product img {display:none;}
Al igual que antes, y por los mismos motivos, usa preferiblemente la primera forma, pero ahí quedan las dos. Como siempre, para cualquier duda o consulta me tienes a tu disposición en el formulario de contacto.