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.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
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.
Gracias por el post, Enrique.
También se puede usar el plugin gratuito «WooCommerce Product Details Customiser», hace 3 años que no lo actualizan pero sigue funcionando.
Yo lo que no consigo y tampoco lo mencionas en este post, es eliminar en el carrito, la imagen placeholder.png y su enlace correspondiente.
Saludos
Gracias a ti Jesús por tu comentario y por el dato adicional. Eliminar la imagen en el carrito es sencillo con un poco de CSS (.woocommerce-cart td.product-thumbnail {display:none !important;}). Para quitar el enlace en el nombre del artículo habría que editar el archivo woocommerce/templates/cart/cart.php
Un saludo
Buenas tardes,
Se podría hacer con css o con un hook ?
Mándame un presupuesto para que me lo hagas tu.
Saludos
Claro, te contesto al email.
Un saludo.
Hola, muy buen aporte 🙂
Tal vez puedas indicar si puede hacerse esto pero en una categoría concreta. No de todo woocomerce.
Muchas gracias!!!
Gracias por tu comentario, Xavi.
Sí, claro que sí, cada categoría aplica su propia clase, así que puede hacerse por CSS sin ninguna dificultad.
Un saludo.
Muy contento por haberte leído, Enrique.
En mi caso, la necesidad es quitar la Descripción corta SOLO en la Shop Page. Me aparece por defecto, y me gustaría que solo apareciesen las imágenes, que fuera visual, sin ese texto.
En la página de detalles sí que me hace falta, pero no en el Inicio. He conseguido quitarla ahí dentro, pero lo que necesito es justo al revés.
Agradezco cualquier ayuda.
Un saludo.
Hola Alberto
En WordPress cada página tiene su propia class, así que es mediante CSS la forma más sencilla y rápida de hacerlo.
Un saludo.
Muchas gracias por tu respuesta, Enrique. Esa es una solución, cierto.
Mi solución (al menos ha funcionado por ahora) ha sido comentar esta línea en el tema de Flatsome: woocommerce/content-product.php
/** do_action( ‘flatsome_product_box_after’ ); */
Bueno, si Flatsome tiene su propio hook para ello, perfecto 🙂 Aunque, por el nombre del hook, asegúrate de que eso no te las elimine también en las páginas de categoría y etiquetas de productos, y en los resultados de búsqueda.
Un saludo.
Gracias por el aviso, Enrique. Todo en orden.
Y otra duda que me ha surgido, por si alguien puede iluminar. La Shop Page me ofrece por defecto productos «sueltos», ordenados en este caso por «más recientes». Pero, en mi caso, me convendría que mostrara la página de Categorías, que los agrupa por dichas categorías de producto. Supongo, a botepronto, que tendré que tocar algo en «woocommerce/content-product.php». Pero no sé el qué.
Gracias en cualquier caso.
Eso lo puedes configurar en WooCommerce > Ajustes > Productos > Mostrar, con la opción Visualización de la página de la tienda, seleccionando «Mostrar categorías»
Un saludo.
Buen dia Enrique, quisiera saber como puedo agregar una marca de agua a mis productos que no tienen stock? en vez de remover, quisiera agregar esa marca de agua, te lo agradezco mucho, saludos.
Hola Guillermo
La marca de agua se pone en la imagen, así que no puede depender del estado del producto a no ser que la vayas cambiando tú manualmente. Sí puedes añadir mensajes, badges o iconos personalizados sobre la imagen (no en la propia imagen), con un poco de CSS. También puedes personalizar el mensaje de fuera de stock con un plugin como éste.
Un saludo.
Hola buenas noches.
como podría hacer que solo se muestren los productos que tienen una imagen asignada.
es decir, que oculte pero no borre los productos sin imagen.
Hola Ana
No hay ningún plugin que haga eso (o no lo conozco, pero no es habitual); en realidad es posible hacerlo, pero no es sencillo, se requiere programación. Si no son muchos productos, puedes establecer su visibilidad a mano, ocultando aquellos que te interese, explico cómo se hace en este artículo: Visibilidad de los productos en WooCommerce.
Un saludo,
Hola Enrique
Tengo una duda… al pasar una serie de post a modo producto (wocommerce), en el campo de descripción me aparece la imagen y además la misma imagen como imagen destacada. Me gustaría saber si hay algún plugin o modo de eliminar esa imagen del campo de descripción para que no se repita. El caso es que tengo casi 4.000 productos y hacerlo manualmente sería muy muy tortuoso. Dentro de ese campo solamente quiero borrar la primera imagen.
Muchas gracias
Saludos.
Hola Joxhe
Sí, puedes ocultarla mediante CSS, busca información acerca de la directiva display.
Un saludo.
Hola Enrique,
Y si lo que quiero es quitar el slider pero que se miestren las imagenes, bien listadas o bien en mosaico, se podría hacer?
hola Enrique tremendo aporte, hay forma de que se puedan ocultar todos los productos cuya imagen sea la por defecto de woocomerce? pero en ciertas paginas
Hola Enrique , como puedo quitar la imagen que aparece en las categorias de producto . Un saludo
Hola Luismi
Puede hacerse con CSS
Un saludo
Hola Enrique, gracias por compartir tus conocimientos. Me queda una duda, puedo usar un Hook para hacerlo, en todas las imágenes de productos de una categoría en determinada? Sin afectar otras categorías?
Hola Carlos
Sí, si usas un condicional.
Un saludo
Disculpa la pregunta, pero me podrias ayudar con el codigo especifico para llegar y copiar.
No tengo mucho conocimiento del tema y estoy construyendo mi sitio web.
Muchas gracias!
Hola.
Se puede borrar la imagen del producto pero que sea por categoria?
Agradeceria mucho tu ayuda.
Justo, busco esto, poder eliminar las imágenes del producto pero de una categoría en concreto.
No funciona el CSS me aparece en rojo .product .summary, no entiendo por qué. Logre quitar las imagenes mediante el hook, pero no logro el full widght, debido a que ningun css me funciona.