Por qué desaparece el botón «Añadir al carrito» en los productos de WooCommerce

Estaba configurando su tienda, añadió una docena de productos, pero cuando abre la página no hay nada donde debería estar el botón «Añadir al carrito». Los clientes no pueden comprar. Pánico. Pero el problema es más fácil de resolver de lo que parece a primera vista.

Hay exactamente cinco razones para la desaparición del botón: desde una ficha de producto incompleta hasta el mod_security del servidor. Dos de ellas se solucionan en dos clics. Dos más con un par de líneas de código. Y solo una requiere llamar a su proveedor de alojamiento. A continuación, un desglose paso a paso con código, capturas de pantalla y acciones concretas.

💡 Resumen rápido:

• Primero revise la ficha de producto: el precio y el estado del inventario son obligatorios
• Desactive todos los plugins a la vez y active solo WooCommerce: si aparece el botón, la culpa es de un conflicto
• Vaya al personalizador del tema: el botón podría estar simplemente oculto por un interruptor
• Corrija la plantilla del tema mediante el editor de código: sustituir tres líneas en single.php
• Abra la consola del navegador: error de JavaScript → llame a su proveedor de alojamiento, el problema es mod_security

1. Revise la ficha de producto: precio y estado del inventario

WooCommerce muestra el botón «Añadir al carrito» solo cuando el producto se puede comprar. Si no se puede comprar, no hay botón. Lógica simple.

Abra Productos → Todos los productos → seleccione el problemático → Editar. En el bloque «Datos del producto», compruebe tres campos:

• Precio: el precio normal es obligatorio, incluso si el producto está en oferta. El campo «Precio» no debe estar vacío.
• Estado del inventario: «En existencias» o «Disponible bajo pedido». El valor «Agotado» oculta el botón.
• Productos variables: cada variación debe tener su propio precio y estado de inventario.

Error común: creó un producto variable, añadió atributos (color, talla), pero no introdujo los precios de las variaciones concretas. En este caso, WooCommerce no sabe a qué precio vender y simplemente no muestra el botón.

Rellénelo → Actualizar → abra la página del producto en el sitio. En la mayoría de los casos sencillos, el problema ya está resuelto en este paso.

2. Encuentre el conflicto de plugins

WordPress ensambla código del tema activo y de todos los plugins activos. Si dos plugins usan nombres de función idénticos, se enganchan a los mismos hooks o simplemente son incompatibles, WooCommerce puede perder el botón.

Procedimiento de diagnóstico:

• Vaya a Plugins → Instalados. Seleccione todos (casilla superior), en el desplegable «Acciones en lote» elija «Desactivar» → Aplicar.
• Active solo WooCommerce. Abra la página del producto problemático.
• Apareció el botón: conflicto confirmado. Active los plugins uno a uno, comprobando la página del producto después de cada uno. El plugin tras cuya activación el botón vuelve a desaparecer es el culpable.
• Sustituya el plugin problemático por una alternativa o contacte con su desarrollador.

Un subtipo aparte de este problema es un conflicto con el filtro woocommerce_show_variation_price. Algunos temas y plugins devuelven false para este hook, y WooCommerce oculta el precio de la variación y pierde el botón. Si el botón está presente tras desactivar todos los plugins pero no hay un «culpable» visible, revise el archivo functions.php del tema activo en busca de líneas que contengan woocommerce_show_variation_price.

Puede forzar la visualización con este filtro:

1
add_filter('woocommerce_show_variation_price', function() {
2
    return true;
3
});

Inserte este código en el functions.php de su tema activo (o tema hijo) o mediante el plugin Code Snippets. Tras guardar, compruebe el producto.

3. Personalizador del tema: el interruptor invisible

Algunos temas añaden su propio interruptor de visibilidad del botón. La lógica de los desarrolladores: «demos flexibilidad a los usuarios». En la práctica, el interruptor viene por defecto en «ocultar» y el dueño de la tienda no lo sabe.

Vaya a Apariencia → Personalizar. Busque una sección:

• WooCommerce → Página de producto (o Contenido → WooCommerce, según el tema);
• Parámetro «Botón añadir al carrito» → Visible (o «Mostrar»).

Guarde la configuración y compruebe el producto. Esto funciona para temas que usan secciones del personalizador para WooCommerce además de la plantilla estándar. Es popular en temas de ThemeForest: Avada, Flatsome, WoodMart.

4. Corrija la plantilla del tema en el editor

Si los pasos anteriores no ayudaron, el problema es más profundo: el tema usa una plantilla de página de producto no estándar y no llama a la función de WooCommerce que muestra el botón.

Qué está pasando. WordPress carga la página de producto mediante el archivo del tema single.php (o index.php como alternativa). Dentro hay una llamada a get_template_part() que incluye el bloque de contenido. El tema debería ceder el control a WooCommerce llamando a wc_get_template_part('content', 'single-product'), pero algunos temas no lo hacen. Resultado: la maquetación del tema está presente, pero el botón no.

Cómo solucionarlo:

• Apariencia → Editor de archivos del tema. Confirme la advertencia de WordPress.
• En la columna derecha encuentre los archivos single.php e index.php:

• Abra single.php (si existe). Si no, index.php.
• Encuentre la línea con get_template_part. Sustituya todo el bloque de salida de contenido por:

1
if (is_singular('product')) {
2
    wc_get_template_part('content', 'single-product');
3
} else {
4
    wc_get_template_part('content', get_post_format());
5
}

• Guarde el archivo.

Antes de editar, haga una copia de seguridad del archivo del tema. Copie el contenido a un editor de texto o use un tema hijo: editar directamente el tema padre se restablecerá en la próxima actualización.

Tras guardar, abra la página del producto. El botón debería aparecer.

5. Problema del servidor: mod_security bloquea los scripts

Si ha llegado hasta aquí y el botón sigue sin aparecer, la causa está muy probablemente del lado del servidor. El módulo mod_security (cortafuegos de Apache/LiteSpeed) bloquea la carga de los archivos JavaScript de WooCommerce. Sin JavaScript, el carrito no funciona.

Diagnóstico:

• Abra la página del producto problemático.
• Pulse F12 → pestaña Consola.
• Busque un error de carga de un script de WooCommerce, normalmente cart.min.js, add-to-cart.min.js o jquery.blockUI.min.js con el código 403 Forbidden.
• Si lo ve, el problema es mod_security.

Solución: contacte con su proveedor de alojamiento y solicite que añadan una excepción para la ruta URL /wp-content/plugins/woocommerce/ en las reglas de mod_security. El soporte lo gestiona en pocos minutos.

Alternativamente, desactive mod_security para el dominio mediante .htaccess (si su proveedor de alojamiento lo permite):

1
<IfModule mod_security.c>
2
    SecFilterEngine Off
3
    SecFilterScanPOST Off
4
</IfModule>

Pero es mejor coordinarlo con su proveedor: en alojamiento compartido, mod_security protege todo el servidor y desactivarlo crea un riesgo de seguridad.

Tabla resumen: qué comprobar

Guía detallada en vídeo que cubre los cinco pasos: desde la ficha de producto hasta la edición de plantillas y el diagnóstico del servidor.

⁉️🤔 Preguntas frecuentes

El botón desapareció solo para los productos variables. ¿Qué está pasando?

Es casi seguro que los precios de las variaciones no están rellenados. Abra el producto, pestaña «Variaciones», expanda cada una: el campo «Precio» debe estar rellenado. Un precio de variación vacío significa que WooCommerce considera el producto «no apto para la venta» y elimina el botón. Para 50 variaciones o más, use la importación CSV: Productos → Importar.

El botón desapareció tras una actualización del tema. ¿Qué debo hacer?

La actualización del tema sobrescribió single.php. Restaure la edición del paso 4. Para evitar repetir esto con cada actualización, mueva la plantilla a un tema hijo: cree una carpeta /woocommerce/ en el tema hijo y copie allí el single-product.php corregido.

¿Puedo restaurar el botón sin editar código?

Sí, en la mitad de los casos: revise la ficha de producto (paso 1) y el personalizador del tema (paso 3). El código solo es necesario cuando el tema muestra la plantilla de producto de forma no estándar o cuando un plugin o tema suprime el hook woocommerce_show_variation_price.

El botón está presente pero no funciona. ¿Hace clic y no pasa nada?

Esto es un error de JavaScript. Abra la consola del navegador (F12) y vea qué scripts están fallando. Lo más frecuente es un conflicto de versión de jQuery (el tema carga un jQuery antiguo sobre el estándar de WordPress) o JS minificado en caché que no se ha refrescado. Limpie la caché de su plugin de caché y regenere los scripts minificados.

¿Necesito desactivar el añadir al carrito por AJAX?

Solo para diagnóstico. Vaya a WooCommerce → Ajustes → Productos y desmarque «Activar botones de añadir al carrito con AJAX». Si el botón aparece después de esto, el problema está en el manejador AJAX de su tema específico. Deje AJAX desactivado o sustituya el tema.

Qué hacer si el botón sigue sin aparecer

Los cinco pasos anteriores cubren la gran mayoría de los casos en los que el botón «Añadir al carrito» desaparece. Si ninguno funcionó, el problema es más profundo y requiere depuración manual.

Lista rápida de verificación de último recurso:

• Cambie el tema a Storefront, el tema oficial de WooCommerce. ¿Apareció el botón? El problema está en su tema.
• Revise WooCommerce → Estado → Acciones programadas por si hay tareas cron atascadas.
• Vaya a WooCommerce → Estado → Registros y busque fatal-errors de los últimos días.

¿Sigue sin funcionar? Describa su situación en los comentarios: versión de WooCommerce, nombre del tema, lista de plugins activos. Encontraremos la causa.