El botón "Añadir al carrito" de WooCommerce no funciona: ¿Cómo solucionarlo?

El botón "Añadir al carrito" de WooCommerce es el elemento más importante de cualquier página de producto. Si deja de funcionar, tu tienda no podrá procesar pedidos. Cada visitante que accede a una página de producto con errores representa una venta perdida.

Un informe del Instituto Baymard reveló que el 17 % de los compradores en línea abandonan sus compras debido a errores en el sitio web. Un botón de "Agregar al carrito" roto o que falta entra de lleno en esta categoría y afecta al 100 % de los visitantes de la página de tu producto, no solo a una pequeña parte.

La solución depende del tipo específico de fallo. Un botón que no se ve tiene causas diferentes a uno que aparece pero no hace nada al pulsarlo, o a uno que añade artículos al carrito pero la página no se actualiza. Diagnosticar el fallo determinará qué solución aplicar primero.

Esta guía abarca todas las causas y todas las soluciones, ordenadas según los problemas que se deben descartar primero.

Primero, diagnostica tu tipo de fracaso

No todos los problemas con el botón "Añadir al carrito" son iguales. La solución depende del tipo de fallo que esté experimentando.

Tipo de fallo	Lo que ves	Causa más probable
El botón no se muestra	La página del producto se carga, pero no aparece ningún botón	Faltan datos del producto, configuración de productos agotados y problemas con el tema
Botón no clicable	El botón aparece, pero al hacer clic no sucede nada	Error de JavaScript, conflicto de tema, scripts que bloquean el plugin
El botón se agrega, pero la página no se actualiza	Aparece el indicador giratorio, luego se detiene, el número de carritos permanece sin cambios	AJAX está bloqueado por el almacenamiento en caché o un complemento de seguridad
El botón redirige incorrectamente	Al hacer clic, el cliente es redirigido a la página incorrecta	Configuración incorrecta del enlace permanente, página del carrito no asignada
El botón funciona en algunos productos, no en otros	El problema es específico del producto	Datos de producto incompletos, configuración incorrecta de producto variable

Identifique el tipo de falla utilizando esta tabla y luego comience con la solución que probablemente se aplique a su situación específica.

Tres tipos de fallos en el botón "Añadir al carrito" de WooCommerce

Aplicar la solución incorrecta supone una pérdida de tiempo y puede generar nuevos problemas. Identifique qué tipo de fallo coincide con lo que está observando antes de aplicar las soluciones que se describen a continuación.

El botón no aparece en absoluto

Cuando el botón "Añadir al carrito" no aparece en la página de un producto, WooCommerce lo oculta intencionadamente o bien el tema no lo muestra.

WooCommerce oculta automáticamente el botón "Añadir al carrito" en los siguientes casos:

• El producto no tiene precio establecido

• El producto está marcado como agotado y la configuración de la tienda para ocultar los productos agotados está habilitada

• Un producto variable no tiene variaciones configuradas o todas las variaciones están agotadas

• Un producto externo/afiliado no tiene configurada una URL externa

Antes de asumir que se trata de un problema técnico, compruebe estos ajustes del producto. Acceda a la página de edición del producto en WooCommerce y verifique que el panel de datos del producto muestre un precio introducido, que el estado del stock sea "En stock" o que la configuración de "Sin stock" sea la deseada y que, en el caso de productos variables, exista al menos una variación con stock disponible.

El botón se muestra pero no se puede hacer clic en él

Cuando el botón aparece pero no responde a los clics, un error de JavaScript impide que se active el controlador de clics. El botón se muestra en HTML, pero su funcionalidad está dañada debido a un conflicto o error de script.

Abre la consola para desarrolladores de tu navegador (F12 en Chrome, luego pestaña Consola) y recarga la página del producto. Haz clic en el botón Añadir al carrito y busca mensajes de error en rojo en la consola. Errores comunes de JavaScript que indican la causa específica:

• jQuery no está definido: jQuery no se carga o se carga fuera de orden. Esto suele deberse a que los complementos de optimización retrasan la carga de jQuery.

• No se puede leer la propiedad de undefined: Una función JavaScript de WooCommerce se está ejecutando antes de que su dependencia esté lista. Generalmente, esto se debe a un conflicto de plugins.

• URL de AJAX no definida / wc_add_to_cart_params no está definido: Los parámetros del carrito de WooCommerce no se muestran en la página. Esto suele deberse a que un plugin de caché sirve una versión en caché de la página sin el JavaScript de WooCommerce.

Anote el error específico antes de continuar. Le indicará exactamente qué solución aplicar.

Se pulsa el botón, pero el carrito no se actualiza

Cuando el botón parece funcionar (el clic se registra y puede aparecer un indicador de carga), pero el contador del carrito no se actualiza y el producto no se añade, la solicitud AJAX está fallando. WooCommerce utiliza AJAX para añadir productos al carrito sin recargar la página. Cuando AJAX se bloquea o falla, el clic parece no tener ningún efecto.

Esto suele deberse a que los complementos de almacenamiento en caché sirven respuestas almacenadas en caché a las solicitudes AJAX, a que los complementos de seguridad bloquean las llamadas AJAX que clasifican como sospechosas o a una configuración incorrecta de la URL AJAX en los ajustes de WooCommerce.

 

Solución 1: Actualizar WooCommerce, WordPress y todos los plugins

El software obsoleto es el problema más fácil de descartar y el que con mayor frecuencia se pasa por alto. Empiece por ahí antes de intentar cualquier otra solución, especialmente si el botón dejó de funcionar después de una actualización reciente.

¿Por qué el software obsoleto daña el botón "Agregar al carrito"?

WooCommerce, WordPress, los temas y los plugins se actualizan con frecuencia. Cuando un componente se actualiza y los demás no, surgen problemas de compatibilidad. El botón "Añadir al carrito" depende de una cadena de componentes que funcionan conjuntamente: el núcleo de WordPress, WooCommerce, el tema activo y cualquier plugin que modifique el comportamiento del producto o del carrito. Una discrepancia de versiones en cualquier punto de la cadena provoca su interrupción.

Esta es la causa principal más común de que el botón "Añadir al carrito" deje de funcionar inmediatamente después de una actualización. Si su botón funcionaba y dejó de funcionar tras una actualización reciente, es casi seguro que se deba a un problema de compatibilidad.

Cómo actualizar todo de forma segura

Antes de actualizar, haz una copia de seguridad. Ve a Escritorio > Actualizaciones en tu panel de administración de WordPress. Actualiza primero el núcleo de WordPress. Luego actualiza todos los plugins. Finalmente, actualiza tu tema.

En el caso específico de WooCommerce, las actualizaciones de versiones principales (de la 4.x a la 5.x y de la 5.x a la 6.x) a veces introducen cambios incompatibles. Siempre pruebe las actualizaciones importantes de WooCommerce en un entorno de prueba antes de aplicarlas a producción.

Tras la actualización, borra la caché de tu sitio web si utilizas un plugin de almacenamiento en caché. A continuación, prueba el botón "Añadir al carrito" en la página de un producto antes de dar por resuelto el problema.

Qué hacer si el botón deja de funcionar después de una actualización

Si el botón dejó de funcionar inmediatamente después de una actualización específica, es muy probable que esa actualización sea la causa. Revierte a la versión anterior usando el plugin WP Rollback o restaura tu copia de seguridad anterior a la actualización. Luego, revisa el registro de cambios del plugin y el foro de soporte para ver si hay informes del mismo problema antes de actualizar de nuevo.

Solución 2: Resolver conflictos entre plugins y temas

Los conflictos entre plugins y temas son la causa más común de que el botón "Añadir al carrito" no funcione. Sigue estos pasos en orden, probando después de cada uno antes de pasar a la siguiente solución.

Cómo identificar un conflicto de plugins

Los conflictos entre plugins son la causa más común de que el botón "Añadir al carrito" no funcione. La forma más rápida de identificar un conflicto es desactivar todos los plugins excepto WooCommerce y probar el botón.

Ve a Plugins > Plugins instalados. Selecciona todos los plugins excepto WooCommerce. Elige Desactivar en el menú desplegable de acciones masivas. Aplicar.

Prueba el botón "Añadir al carrito". Si ahora funciona, el problema se debía a un plugin desactivado. Reactiva los plugins uno por uno, probando el botón después de cada reactivación. Si el botón vuelve a fallar, el plugin que reactivaste más recientemente es el que causa el conflicto.

Si no puede desactivar todos los complementos en una tienda en producción, utilice un entorno de prueba para replicar este experimento.

Plugins comunes que entran en conflicto con el botón "Añadir al carrito"

Ciertas categorías de plugins son responsables de la mayoría de los conflictos con el botón "Añadir al carrito":

Plugins de almacenamiento en caché: WP Rocket, W3 Total Cache, WP Super Cache. Estos plugins pueden almacenar en caché el JavaScript de WooCommerce de forma que se interrumpa la funcionalidad AJAX. Solución: Excluir las páginas de WooCommerce del almacenamiento en caché. En WP Rocket, las páginas de WooCommerce (carrito, pago, mi cuenta) se excluyen automáticamente, pero verifique esto en WP Rocket > Ajustes > Caché > Nunca almacenar en caché estas URL.

Plugins de optimización: Autoptimize, Perfmatters, Asset CleanUp. Estos plugins minimizan y combinan archivos JavaScript. La combinación incorrecta de scripts de WooCommerce con otros scripts provoca errores de dependencia de jQuery. Solución: En Autoptimize, ve a Ajustes > Opciones de JavaScript y habilita ¿Forzar JavaScript al encabezado? Marca Excluir scripts de Autoptimize y añade woocommerce.js y add-to-cart.js a la lista de exclusión.

Plugins de seguridad: Wordfence, Sucuri, iThemes Security. Algunas configuraciones de seguridad bloquean las solicitudes AJAX de WooCommerce, clasificándolas como maliciosas. Solución: En Wordfence, vaya a Firewall > Opciones de Firewall y añada a la lista blanca el endpoint AJAX de WooCommerce (wp-admin/admin-ajax.php).

Constructores de páginas: Elementor, Divi, WPBakery. Algunos constructores de páginas sobrescriben las plantillas de WooCommerce o insertan scripts conflictivos en las páginas de productos. Solución: Pruebe cambiando temporalmente a la plantilla de producto predeterminada de WooCommerce.

Cómo identificar un conflicto temático

Tras descartar conflictos con los plugins, cambia al tema Storefront (el tema predeterminado oficial de WooCommerce) y prueba el botón. Storefront está diseñado específicamente para WooCommerce y no presenta problemas de compatibilidad.

Ve a Apariencia > Temas > Añadir nuevo y busca Storefront. Instálalo y actívalo. No modifiques ninguna otra configuración. Prueba el botón Añadir al carrito.

Si el botón funciona con Storefront, el problema reside en tu tema activo. Ponte en contacto con el desarrollador del tema e infórmale del problema. Si no funciona con Storefront, la causa no está relacionada con el tema.

Solución 3: Corregir errores de JavaScript y AJAX

Los fallos de JavaScript y AJAX provocan que el botón aparezca roto, incluso cuando todo lo demás está configurado correctamente. Antes de realizar cualquier cambio, consulta la consola del navegador para identificar qué script está fallando.

Cómo comprobar si hay errores de JavaScript en tu navegador

Abre tu sitio web en Chrome o Firefox. Pulsa F12 para abrir las Herramientas para desarrolladores. Haz clic en la pestaña Consola. Ve a la página de un producto donde el botón Añadir al carrito no funcione.

Busca mensajes de error en rojo. Estos son los fallos específicos de JavaScript que provocan el mal funcionamiento del botón. Copia el mensaje de error completo. Búscalo en los de soporte de WooCommerce y en el foro de soporte del plugin. La mayoría de los errores comunes tienen soluciones documentadas.

Mientras la consola esté abierta, compruebe también la pestaña Red. Haga clic en el botón Añadir al carrito y observe las solicitudes. Una solicitud AJAX fallida aparecerá en rojo con un código de estado. Un estado 403 indica que un complemento de seguridad está bloqueando la solicitud. Un estado 500 indica un error del servidor en el controlador AJAX.

Solucionar la configuración de añadir al carrito mediante AJAX en WooCommerce

Ve a WooCommerce > Ajustes > Productos. Busca la sección Comportamiento del carrito. Verifica que la opción Habilitar botones de añadir al carrito AJAX en archivos esté marcada. Esta configuración controla si la funcionalidad del carrito AJAX está activa en las páginas de la tienda y de las categorías.

Además, verifica que las páginas del carrito y del pago estén asignadas correctamente. Ve a WooCommerce > Ajustes > Avanzado > Configuración de página. Confirma que las páginas del carrito y del pago estén configuradas en las páginas correctas de tu sitio. Si alguna está en blanco o configurada en la página incorrecta, los clics en el botón del carrito fallarán sin mostrar ningún mensaje de error.

Solucionar problemas con los plugins de optimización que dañan los scripts de WooCommerce

Si un plugin de optimización está minimizando o combinando JavaScript y provocando fallos en WooCommerce, añada los siguientes scripts a la lista de exclusión del plugin:

Scripts que se deben excluir de la minificación:

• woocommerce/assets/js/frontend/woocommerce.min.js

• woocommerce/assets/js/frontend/add-to-cart.min.js

• woocommerce/assets/js/frontend/add-to-cart-variation.min.js

• jquery.js o jquery.min.js

Además, excluya las páginas de WooCommerce de la optimización de JavaScript: carrito (/cart/), pago (/checkout/), mi cuenta (/my-account/) y todas las páginas de productos (/product/).

En WP Rocket: Ve a Optimización de archivos > Archivos JavaScript. Agrega las exclusiones anteriores al campo Archivos JavaScript excluidos.

En Autoptimize: Ve a Opciones de JavaScript > Excluir scripts de Autoptimize y agrega las rutas de los scripts de WooCommerce.

Solución 4: Verifique y complete la información de su producto

WooCommerce desactiva silenciosamente el botón "Añadir al carrito" cuando faltan datos del producto. Si el botón no aparece en algunos productos, pero sí en otros, empieza por aquí.

Campos obligatorios que activan el botón faltante

WooCommerce requiere datos específicos del producto para mostrar el botón "Añadir al carrito". Si falta alguno de los campos obligatorios, WooCommerce desactiva el botón silenciosamente sin mostrar ningún mensaje de error.

Comprueba en todos los productos a los que les falte el botón:

• Precio: Todos los productos deben tener un precio fijo. Si un producto no tiene precio, no se mostrará el botón "Añadir al carrito". Vaya a Producto > Datos del producto > General y verifique que el campo "Precio fijo" contenga un valor.

• Nombre del producto: El producto debe tener un título. Si bien rara vez falta, conviene confirmarlo en los borradores recién creados.

• Visibilidad: Asegúrese de que la visibilidad del producto en el catálogo esté configurada en "Tienda y resultados de búsqueda" o "Tienda". Los productos configurados como "Oculto" no muestran el botón en las páginas de archivo.

• Estado del producto: Confirme que el producto está publicado, no en borrador ni pendiente de revisión.

Configuración de producto variable para añadir al carrito

Los productos variables se comportan de manera diferente a los productos simples. En las páginas de la tienda o del archivo, los productos variables muestran un botón "Seleccionar opciones" en lugar de un botón "Añadir al carrito". En la página de cada producto, el botón "Añadir al carrito" solo aparece después de que el cliente haya seleccionado todos los atributos necesarios.

Si el botón "Agregar al carrito" no aparece en absoluto en la página de un producto variable (no solo se muestran las opciones "Seleccionar" en la página de la tienda), compruebe lo siguiente:

• Existe al menos una variante del producto (Datos del producto > Variantes > Agregar variante)

• Al menos una variante está marcada como En stock con stock disponible

• Todos los atributos utilizados en las variaciones se definen en Datos del producto > Atributos antes de crear variaciones

• La pestaña de variaciones no muestra ningún error de configuración

Un producto variable sin variaciones creadas, o con todas las variaciones agotadas, no mostrará el botón "Añadir al carrito".

Configuración de estado de existencias y falta de existencias

Ve a WooCommerce > Ajustes > Productos > Inventario. Comprueba si la opción "Ocultar artículos agotados del catálogo" está activada. Si lo está, ningún producto marcado como agotado aparecerá en las páginas de la tienda ni mostrará el botón "Añadir al carrito".

Además, compruebe el estado del stock de cada producto: Producto > Datos del producto > Inventario > Estado del stock. Confirme que esté configurado como En stock. Un producto configurado manualmente como Agotado no mostrará el botón Añadir al carrito, independientemente de la configuración a nivel de catálogo.

Solución 5: Compruebe la configuración de páginas y enlaces permanentes de WooCommerce

Una página de carrito mal configurada o una estructura de enlaces permanentes obsoleta provocan fallos silenciosos que ningún plugin podrá solucionar. Estas tres comprobaciones tardan menos de 5 minutos y resuelven más problemas de los que la mayoría de los propietarios de tiendas esperan.

Verificar la asignación de la página del carrito y del proceso de pago

WooCommerce requiere que ciertas páginas existan y estén asignadas correctamente para que la funcionalidad del carrito funcione. Si la página del carrito o la página de pago se elimina, se despublica o se reasigna a una página incorrecta, los clics en el botón "Añadir al carrito" fallarán silenciosamente o redirigirán a la página incorrecta.

Ve a WooCommerce > Ajustes > Avanzado > Configuración de página. Verifica:

• Carrito: asignado a una página publicada que contiene el shortcode [woocommerce_cart] o el bloque WooCommerce Cart

• Pago: asignado a una página publicada que contiene el código corto [woocommerce_checkout] o el bloque de pago de WooCommerce

• Mi cuenta: asignada a una página publicada que contiene el bloque o código corto de Mi cuenta

Si falta alguna o está asignada incorrectamente, reasígnala. Si faltan las páginas, crea nuevas páginas con los códigos cortos correctos y asígnalas aquí.

Vacía tu estructura de enlaces permanentes

WordPress utiliza reglas de enlaces permanentes para enrutar las solicitudes correctamente. Si estas reglas se corrompen, las solicitudes AJAX de WooCommerce pueden fallar incluso cuando el resto de la configuración es correcta. Al borrar la estructura de enlaces permanentes, estas reglas se regeneran.

Ve a Ajustes > Enlaces permanentes en tu panel de WordPress. No modifiques ninguna configuración. Haz clic en Guardar cambios. Esto regenera el archivo .htaccess con nuevas reglas de enlaces permanentes y resuelve los problemas de enrutamiento que provocan fallos en el botón del carrito.

Esto solo toma menos de 10 segundos y no afecta tu contenido. Vale la pena hacerlo al inicio de cualquier proceso de solución de problemas, ya que no cuesta nada y corrige una cantidad significativa de fallos en el carrito de compra.

Comprueba la página de estado de WooCommerce para ver si hay errores

Ve a WooCommerce > Estado. Esta página muestra una descripción general completa de tu instalación de WooCommerce. Las filas resaltadas en rojo indican errores de configuración.

Errores comunes que aparecen en la página de estado y que afectan al botón "Añadir al carrito":

• Base de datos desactualizada: Las tablas de la base de datos de WooCommerce necesitan actualizarse. Haga clic en el botón Actualizar base de datos.

• WooCommerce.js: el archivo no existe o es inaccesible. Esto impide directamente que funcione el botón "Añadir al carrito".

• Sobrescritura de plantillas: tu tema ha sobrescrito archivos de plantilla de WooCommerce. Si las sobrescrituras provienen de una versión antigua de WooCommerce, es posible que carezcan de nuevas funcionalidades. Actualiza tu tema o elimina las sobrescrituras obsoletas.

Solución 6: Borra la caché

Un plugin de caché que sirve una versión obsoleta de la página de tu producto puede provocar que el botón "Añadir al carrito" no responda, incluso después de haber aplicado todas las demás soluciones. Borra siempre la caché como primer paso para solucionar problemas y como último paso tras realizar cualquier cambio.

Borrar caché en WP Rocket: Haz clic en el icono de WP Rocket en tu barra de administración > Borrar caché.

Borrar la caché en W3 Total Cache: Rendimiento > Borrar todas las cachés.

Borra la caché de WP Super Cache: Ajustes > WP Super Cache > Borrar caché.

Borrar caché en LiteSpeed ​​Cache: LiteSpeed ​​Cache > Borrar todo.

Borrar la caché de Cloudflare: Panel de control de Cloudflare > Almacenamiento en caché > Configuración > Borrar todo.

Borra la caché de tu navegador: pulsa Ctrl+Mayús+Supr en Chrome o Firefox. Borra las imágenes y archivos almacenados en caché. Recarga la página del producto en una ventana privada/de incógnito para comprobar que la solución funciona, lo que garantiza que no se utilice la caché del navegador.

Tras borrar la caché, prueba el botón "Añadir al carrito" en la página del producto afectado. Realiza la prueba en una ventana de incógnito para descartar que el problema se deba a la caché del navegador.

Lista de verificación para la resolución de problemas: El orden correcto

Siga estos pasos en orden. Deténgase cuando el botón funcione.

• Realice una copia de seguridad completa del sitio y de la base de datos

• Identifique el tipo de error (no se muestra / no se puede hacer clic / se puede hacer clic pero no se actualiza)

• Comprueba la consola del navegador en busca de errores de JavaScript y anota cualquier error específico

• Ve a Configuración > Enlaces permanentes y haz clic en Guardar cambios (no es necesario cambiar ninguna configuración)

• Comprueba WooCommerce > Estado para ver si hay errores en rojo y soluciónalos

• Verificar datos del producto: precio establecido, estado del stock: En stock, variaciones configuradas

• Actualiza WordPress, WooCommerce, todos los plugins y tu tema

• Borrar todas las cachés: plugin de almacenamiento en caché + Cloudflare + navegador

• Desactive todos los plugins excepto WooCommerce y haga una prueba

• Si el botón funciona con los complementos desactivados, reactívelos uno por uno para identificar el conflicto

• Cambia al tema Storefront y prueba

• Si el botón funciona con Storefront, el tema activo es la causa

• Consulta WooCommerce > Ajustes > Avanzado > Configuración de página para la asignación de páginas de carrito y pago

• Agrega los scripts de WooCommerce a la lista de exclusión de tu plugin de optimización

Consideraciones finales sobre la solución del problema del botón "Añadir al carrito" de WooCommerce

La mayoría de los fallos del botón "Añadir al carrito" de WooCommerce se deben a conflictos de plugins, problemas de caché o datos de producto incompletos. Los tres problemas tienen diagnósticos claros y soluciones específicas que no requieren desarrollo personalizado.

Comience con la tabla de diagnóstico para identificar el tipo de fallo. Revise la página de estado y actualice los enlaces permanentes primero; esto no tiene costo y soluciona una cantidad considerable de problemas. Actualice todo antes de realizar cualquier otro cambio. Luego, siga el proceso de resolución de conflictos entre plugins y temas.

Si has aplicado todas las soluciones de esta lista y el botón sigue sin funcionar, es probable que el problema se deba a un conflicto de código personalizado o a un problema de configuración del servidor. En ese caso, un desarrollador de WordPress con experiencia en WooCommerce debería revisar los errores de la consola del navegador, el registro de errores del servidor y el registro de depuración de WooCommerce.

El equipo de desarrollo de WooCommerce de Seahawk resuelve los problemas con el botón "Añadir al carrito" como parte de su servicio de soporte de emergencia y mantenimiento continuo.

Preguntas frecuentes sobre el problema con el botón "Añadir al carrito" de WooCommerce