Un popup del carrito de WooCommerce debe confirmar que el producto realmente se ha añadido. Debe mostrar el artículo y la cantidad, y permitir seguir comprando o llegar al checkout. Abrir un panel solo porque se ha pulsado un botón no confirma el resultado: la operación puede haber fallado.
Este ejemplo utiliza HookSpark Side Cart Premium y el ajuste Open after a successful addition. Seleccionamos Presentation → Modal para mostrar el carrito en un popup centrado en escritorio. Drawer es otra presentación que abre el carrito en un lateral; ninguna de las dos es una vista rápida del producto ni una promoción de salida. Probaremos dos tazas de 40 dólares, con un subtotal de artículos de 80 dólares antes de impuestos y envío, y una adición rechazada.
Qué necesitas antes de activar el popup
Empieza en staging con Side Cart Premium activo, un producto simple disponible y ningún otro popup del carrito activado. Asegúrate de tener dos unidades en stock. Comprueba primero los controles de compra normales de WooCommerce.
Revisa el ajuste WooCommerce que redirige al carrito después de añadir un producto. Enviar al comprador a la página del carrito es distinto de mantenerlo en el producto con un popup centrado del carrito. Decide el recorrido y pruébalo: esta opción no garantiza sustituir todos los redirects ni implementaciones personalizadas del tema.
1. Selecciona Modal y activa la apertura automática
Abre los ajustes HookSpark Side Cart y despliega Cart behaviour. Activa Enable Side Cart y Open after a successful addition. Puedes activar también Show floating cart button para que el cliente pueda volver a abrirlo.
En Layout and template, selecciona Modal en Presentation. La presentación predeterminada Drawer abre un carrito lateral. Revisa Visibility and entry points y las páginas excluidas. El carrito y el checkout siempre quedan excluidos de la superficie Side Cart. Prueba la apertura en una página de producto o tienda elegible.
Pulsa Publish para aplicar la configuración al escaparate. Save draft guarda un borrador y no cambia lo que ven los clientes. Abre el producto en una nueva sesión de prueba. Las etiquetas citadas corresponden a la interfaz inglesa.
2. Comprueba una adición correcta
Empieza con un carrito de prueba vacío. Elige cantidad 2 y pulsa Añadir al carrito una sola vez. Tras completarse la operación, comprueba nombre, variación cuando corresponda, cantidad y subtotal en el popup centrado. En este ejemplo sin descuentos deben aparecer dos tazas y 80 dólares; impuestos y envío pueden cambiar el total a pagar.
Cierra el panel y comprueba que puedes utilizar la página de producto. Vuelve a abrirlo con el botón flotante, si está activo, y confirma que siguen las dos tazas. Prueba las entradas reales de tu tienda: un botón AJAX del catálogo y el formulario del producto son recorridos distintos. Una adición personalizada por el tema requiere su propia comprobación.
En Visibility of System Status (Nielsen Norman Group, 2018), el principio de usabilidad es ofrecer una respuesta oportuna sobre el resultado de una acción. Aquí significa confirmar el carrito después de añadir correctamente, no demostrar un aumento de conversión en todas las tiendas.
3. Prueba un rechazo y su corrección
En staging intenta añadir un producto no disponible o una cantidad no permitida y lee la respuesta WooCommerce. El carrito no debe contener el artículo rechazado y la interfaz no debe presentarlo como añadido. Restablece una selección válida, añádela una vez y comprueba la actualización. No cambies el stock de producción para realizar esta prueba.
¿Por qué no se abre el popup?
Comprueba configuración publicada, activación del plugin, Presentation en Modal, apertura automática y página elegible. Si el carrito aparece en un lateral, comprueba si Presentation sigue en Drawer. Después confirma que la adición se completó: stock, variaciones obligatorias u otras reglas pueden impedirla. Revisa redirects, errores del navegador y otras herramientas de carrito. Si ya hay otra modal abierta, el plugin evita abrir automáticamente un segundo overlay; cierra la otra modal y repite la prueba. Desactiva comportamientos en conflicto solo en staging y prueba un recorrido cada vez.
¿Qué ocurre en móvil?
Con una anchura de pantalla de 600 píxeles o menos, el carrito ocupa toda la pantalla, también con Presentation en Modal. Las ilustraciones del popup centrado en escritorio no representan la vista móvil. Prueba el cierre, la cantidad y el botón de pago en una pantalla del tamaño de un teléfono.
¿Sustituye el panel al checkout?
No. Es una superficie cómoda para el carrito; el comprador todavía debe finalizar el checkout. Añadir un artículo no confirma un pago ni un pedido. Conserva la ruta habitual del carrito y prueba el checkout por separado con un método de pago de prueba.
¿Puedo mostrar el progreso de envío gratuito?
Es otro ajuste y depende del destino y los métodos de envío. La apertura automática no crea una oferta de envío gratuito.
Consulta la documentación Side Cart y comprueba una adición correcta, un rechazo y la vuelta a las compras antes de publicar.