Tutorial WordPress: Botón “Añadir al carrito” a ancho completo en móvil con CSS

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo convertir el botón “Añadir al carrito” en una versión de ancho completo en móvil para instalaciones de WordPress que usen WooCommerce o botones de carrito parecidos. Verás varias estrategias: CSS simple para que el botón ocupe todo el ancho dentro del contenedor, y una opción avanzada para fijar el botón en la parte inferior de la pantalla (sticky/fixed) para mejorar la conversión en móviles. También incluyo variantes para botones en lista/loop, recomendaciones de accesibilidad y cómo aplicar el CSS en tu tema.

¿Por qué hacerlo?

Mejora de usabilidad: en móviles un botón grande y ancho es más fácil de tocar.
Incremento de conversión: mayor visibilidad y accesibilidad suele aumentar las ventas.
Consistencia visual: alinear el CTA con el ancho de pantalla ofrece una experiencia más moderna.

Antes de empezar: identificar selectores

Cada tema y versión de WooCommerce puede usar clases diferentes. Las clases más comunes son:

Ubicación	Selector típico
Página de producto (botón principal)	.single_add_to_cart_button, .single-product .single_add_to_cart_button
Loop / tienda (añadir al carrito desde listados)	.add_to_cart_button, .ajax_add_to_cart
Variaciones	.single-product .variations_form .single_add_to_cart_button
Botones generados por plugins	comprueba con Inspeccionar elemento (DevTools) para la clase exacta

Primer paso: abre la página en el navegador, botón derecho → Inspeccionar y localiza la clase exacta del botón en tu tema. Usa esa clase en el CSS que te muestro a continuación.

Estrategia 1 — CSS simple: botón ancho dentro de su contenedor

Si quieres que el botón ocupe todo el ancho del contenedor (por ejemplo, la columna de la descripción del producto) en móviles, este es el método más seguro y compatible.

/ Botón ancho en pantallas pequeñas /
@media (max-width: 767px) {
  / Selector más común en WooCommerce /
  .single-product .single_add_to_cart_button,
  .single-product .variations_form .single_add_to_cart_button {
    display: block
    width: 100%
    box-sizing: border-box / importante para que padding no rompa el ancho /
    margin: 0 0 12px 0
    padding: 14px 18px / tamaño cómodo para touch /
    border-radius: 6px
    text-align: center
  }

  / Si el tema aplica display:flex al padre y estrecha el botón, fuerza el bloque /
  .single-product .entry-summary .single_add_to_cart_button {
    flex: none
  }
}

Cómo aplicarlo: copia el bloque CSS y pégalo en Apariencia → Personalizar → CSS adicional, o en el CSS de tu child theme.

Notas prácticas

Si no funciona, aumenta la especificidad del selector (ej. .single-product .summary .single_add_to_cart_button) o añade !important como último recurso.
Para el loop de productos (página de tienda), sustituye el selector por .add_to_cart_button o .product .button según tu tema.

Estrategia 2 — Botón fijo / sticky en la parte inferior del móvil (más visible)

Un botón fijo en la parte inferior de la pantalla asegura que el CTA esté siempre accesible. Aquí tienes una solución CSS ajustes pequeños en el espaciado del contenido para evitar que el botón tape información importante.

/ Sticky bottom add-to-cart para móviles /
@media (max-width: 767px) {
  .single-product .single_add_to_cart_button {
    position: fixed
    left: 0
    right: 0
    bottom: 0
    width: 100%
    z-index: 9999
    margin: 0
    border-radius: 0
    padding: 16px
    box-shadow: 0 -2px 8px rgba(0,0,0,0.12)
  }

  / Evita que el contenido quede tapado por el botón fijo /
  .single-product .site-main,
  .single-product .entry-summary,
  .single-product .content-area {
    padding-bottom: 76px / ajusta según la altura del botón /
  }

  / Alternativa: si tu tema tiene un contenedor principal con otra clase, añade padding-bottom a esa clase /
}

Importante: al usar position:fixed, asegúrate de que el botón conserve funcionalidades como añadir al carrito y que el formulario de variaciones pueda abrirse/seleccionarse si existieran opciones. En algunos temas deberás probar la interacción con variaciones y el proceso AJAX.

Variantes según tema

Si el botón no responde al clic cuando está fixed, puede deberse a overlays o z-index. Aumenta z-index del botón y baja el z-index de overlays.
Si tu tema usa un contenedor con margen negativo o transform, elementos con transform crean nuevo contexto de apilamiento mueve el botón fuera de ese contenedor o ajusta el CSS del tema.

Ejemplo completo listo para pegar (mobile full-width sticky)

/ Full width inside container para móvil /
@media (max-width: 767px) {
  .single-product .single_add_to_cart_button,
  .single-product .variations_form .single_add_to_cart_button {
    display: block
    width: 100%
    box-sizing: border-box
    margin: 0
    padding: 14px 18px
    border-radius: 6px
  }

  / Sticky bottom /
  .single-product .single_add_to_cart_button.sticky-add-to-cart {
    position: fixed
    left: 0
    right: 0
    bottom: 0
    width: 100%
    z-index: 9999
    margin: 0
    padding: 16px
    border-radius: 0
    box-shadow: 0 -2px 10px rgba(0,0,0,0.14)
  }

  / Ajuste de contenido para que no lo tape el botón /
  .single-product .site-main,
  .single-product .entry-summary {
    padding-bottom: 84px / 84px si el botón mide ~56-64px ajusta según tu padding /
  }
}

Opcional: añadir clase sticky-add-to-cart con PHP (si prefieres no tocar HTML manualmente)

Si necesitas añadir una clase al botón desde functions.php para aplicar la versión sticky sólo en móviles, puedes engancharte al filtro que genera el HTML del botón. Ejemplo simple:

/ Añadir clase al botón de añadir al carrito en single product /
add_filter( woocommerce_product_single_add_to_cart_text, mi_clase_add_to_cart )
/ NOTA: el filtro anterior es sólo ejemplo para texto. Para añadir clase sobre el botón, es mejor filtrar el HTML del botón: /
add_filter( woocommerce_loop_add_to_cart_args, mi_clase_add_args, 10, 2 )
function mi_clase_add_args( args, product ) {
    if ( is_single()  is_product() ) {
        if ( isset( args[class] ) ) {
            args[class] .=  sticky-add-to-cart
        } else {
            args[class] = sticky-add-to-cart
        }
    }
    return args
}

Este ejemplo añade la clase sticky-add-to-cart donde WooCommerce usa argumentos para generar el botón. Dependiendo de tu versión y tema puede que necesites otro hook usa Inspeccionar elemento para probar.

Accesibilidad y buenas prácticas

Tamaño táctil: sigue las guías: altura mínima 44–48px para zonas táctiles.
Contraste: asegúrate de contraste suficiente entre fondo y texto del botón.
Lectores de pantalla: comprueba que el botón mantenga aria-label y texto legible. Evita ocultar text con display:none.
Evita solapar formularios: si hay selectores de variaciones, asegúrate de que no queden fuera de la vista cuando el botón esté fijo.

Depuración y pruebas

Inspecciona la página en DevTools en modo móvil y juega con el CSS (temporales) para probar tamaños y padding.
Si no ves cambios, limpia la caché del sitio (plugins de cache) y la caché del navegador.
Comprueba que no haya reglas CSS con mayor especificidad que anulen tu estilo en último caso usa !important.
Prueba la interacción (añadir al carrito, variantes, mensajes emergentes) con el botón fijo activado.

Problemas comunes y soluciones rápidas

El botón no hace clic cuando está fixed: aumentar z-index del botón y verificar overlays remover pointer-events:none en elementos superpuestos.
El botón queda cortado por elementos del tema: añade bottom padding al contenido principal o ajusta z-index.
CSS no se aplica: revisa que el selector sea el correcto usa el inspector para ver la clase exacta.
El botón se duplica o aparece otra versión: algunos temas ya tienen un CTA móvil oculta la versión duplicada con display:none en móvil o adapta para usar la del tema.

Implementación recomendada (resumen)

Inspecciona el botón y anota la clase exacta.
Pega el CSS de “Full width” en Apariencia → Personalizar → CSS adicional y ajusta selectores y paddings.
Si quieres sticky, añade la regla de position:fixed y el padding-bottom en el contenedor principal.
Prueba en varios móviles y navegadores, limpia caché, y ajusta colores/tamaños.

Conclusión

Con pocas líneas de CSS puedes mejorar mucho la experiencia móvil: un botón de ancho completo facilita el acceso y la interacción. Si necesitas mayor control (duplicar el botón, lógica condicional o animaciones), se pueden añadir pequeñas modificaciones en PHP/JS, pero la mayoría de los casos se resuelven con CSS y ajustes de espaciado. Aplica las reglas en un child theme o en el CSS adicional del personalizador y prueba exhaustivamente en dispositivos reales y emulados.

SushiHost