¿Te gustaría ocultar las imágenes de los productos en el carrito de compras de tu tienda WooCommerce?
Tal vez te parezca innecesario que aparezcan, o simplemente estás buscando un diseño más minimalista y funcional.
Sea cual sea tu motivo, estás en el lugar correcto. 👇
En este artículo vas a aprender cómo quitar las imágenes del carrito de WooCommerce sin romper nada y de forma totalmente personalizable.
Vamos a entrar en terreno técnico, pero no te preocupes: lo explicaremos todo paso a paso, como si estuviéramos contigo frente al ordenador.
¿Por qué quitar las imágenes del carrito en WooCommerce? 🤔
Eliminar las miniaturas de los productos del carrito puede tener más ventajas de las que imaginas.
En primer lugar, si tu diseño es muy ajustado o necesitas que el carrito sea más liviano visualmente, quitar las imágenes puede dar una apariencia más limpia y profesional.
Además, algunos usuarios consideran que repetir la imagen del producto en el carrito es redundante, ya que el nombre, el precio y la cantidad ya proporcionan suficiente información.
Y si trabajas con productos virtuales o descargables, la imagen puede resultar incluso irrelevante.
Por tanto, prescindir de las imágenes puede mejorar la experiencia de usuario (UX) en determinados contextos.
Método 1: Quitar las imágenes del carrito con CSS 🎯
Esta es la forma más sencilla, rápida y sin riesgos de eliminar las imágenes del carrito.
No necesitas plugins ni tocar archivos del tema hijo.
Solo vas a ocultar visualmente las imágenes usando unas pocas líneas de código CSS.
👇 Paso a paso:
- Ve a tu panel de WordPress.
- Dirígete a Apariencia > Personalizar > CSS adicional.
- Copia y pega este código:
.woocommerce-cart .product-thumbnail {
display: none !important;
}
- Guarda y revisa tu carrito.
¡Listo! 🎉
Las miniaturas de los productos ya no se mostrarán en la tabla del carrito.
Nota importante: Este método solo las oculta visualmente. Las imágenes siguen cargándose en segundo plano, por lo que si estás buscando mejorar el rendimiento, sigue leyendo.
Método 2: Eliminar las imágenes del carrito desde PHP 🧠
Este método requiere un poco más de precisión, ya que modificaremos el comportamiento de WooCommerce desde el código.
La ventaja es que las imágenes no solo se ocultan, sino que realmente se eliminan del marcado HTML, lo cual puede mejorar el rendimiento y simplificar la estructura del carrito.
Ideal si estás optimizando para velocidad ⚡.
📌 Instrucciones:
- Accede al archivo
functions.phpde tu tema hijo o utiliza un plugin como Code Snippets si prefieres no tocar archivos. - Añade este fragmento de código:
remove_filter( 'woocommerce_cart_item_thumbnail', 'woocommerce_cart_item_thumbnail', 10 );
add_filter( 'woocommerce_cart_item_thumbnail', '__return_false', 10 );
Con esto le decimos a WooCommerce que no devuelva ninguna miniatura para los productos del carrito.
Recarga tu carrito y… ¡voilà! 🧙♂️
¿Y si usas una plantilla personalizada? 🧩
En algunas tiendas WooCommerce, sobre todo si se ha trabajado con temas muy personalizados o constructores como Elementor, es posible que las plantillas del carrito hayan sido sobreescritas.
En ese caso, el CSS o el código anterior puede no surtir efecto del todo.
🔍 ¿Cómo saber si ese es tu caso?
- En tu carpeta de tema hijo, verifica si existe
/woocommerce/cart/cart.php. - Si ese archivo está presente, estás usando una plantilla personalizada del carrito.
🛠 ¿Qué hacer?
Abre ese archivo y busca una línea parecida a esta:
echo $cart_item['data']->get_image();
O algo similar, dependiendo del desarrollador del tema.
Simplemente elimina o comenta esa línea:
// echo $cart_item['data']->get_image();
Guarda los cambios y comprueba que el carrito se vea correctamente.
¡Y asunto resuelto! ✅
¿Cómo afecta esto al diseño responsive? 📱
Una duda habitual es si al quitar las imágenes se puede romper el diseño en dispositivos móviles.
La respuesta corta es: depende.
Si tu tema fue bien construido, el diseño se adaptará sin problemas.
Sin embargo, si al eliminar las miniaturas queda demasiado espacio vacío o columnas desalineadas, puedes usar este CSS adicional para ajustar la presentación:
.woocommerce-cart table.shop_table th.product-thumbnail,
.woocommerce-cart table.shop_table td.product-thumbnail {
display: none !important;
}
Esto asegura que tanto los encabezados como las celdas de la columna de imagen desaparezcan completamente.
Consideraciones adicionales 🧾
Antes de cerrar el tema, conviene que tengas en cuenta algunos detalles importantes:
🔸 Si usas plugins de terceros que modifican el carrito (como carritos flotantes o ajax), puede que necesites ajustar también sus configuraciones.
🔸 Si haces pruebas con caché activada (ya sea del navegador o plugins como W3 Total Cache o LiteSpeed), limpia la caché después de hacer los cambios para ver resultados reales.
🔸 Guarda una copia de seguridad antes de modificar archivos PHP, especialmente si no usas tema hijo.
¿Se puede hacer con un plugin? ⚙️
Sí, hay plugins como WooCommerce Blocks o Customize My Account for WooCommerce que permiten cierto grado de personalización del carrito.
Sin embargo, para este cambio tan específico —quitar solo las imágenes—, realmente no necesitas un plugin.
Usar un plugin solo para esto podría ser innecesario y hasta contraproducente.
Menos plugins, menos problemas. 🧘♀️
Conclusión 🧭
Quitar las imágenes del carrito en WooCommerce es una modificación simple pero poderosa.
Ya sea que busques un diseño más limpio, mejorar la velocidad o simplemente darle un toque personal a tu tienda, tienes varias formas de hacerlo:
🔹 Con CSS: rápido y reversible.
🔹 Con PHP: más técnico, pero definitivo.
🔹 Desde la plantilla del tema: en caso de personalizaciones previas.
La decisión está en tus manos. 🖐
Pero recuerda, cada ajuste que haces en tu tienda es una oportunidad para mejorar la experiencia de compra de tus clientes.
Y eso, al final, se traduce en más ventas. 💰
