WooCommerce

Cambiar texto del botón ‘Añadir al carrito’ en WooCommerce

Jefferson Maldonado
Por Jefferson Maldonado 27 Abr 2022 7 min de lectura 2 comentarios

En este tutorial te enseñamos cómo cambiar el texto de «añadir a carrito» en WooCommerce de forma manual y también con plugins. Será una guía práctica y sencilla sobre cómo personalizar ese botón en tu tienda online con WooCommerce, ya sea en la página de producto, en el listado de la tienda o con condiciones específicas por tipo de producto.

Cambiar el texto «añadir a carrito» manualmente

Se puede cambiar el texto de añadir a carrito de forma manual a través de código. Para ello necesitarás añadir el código en el archivo functions.php dentro de un tema hijo que tengas creado.

🖐 A tomar en cuenta: asegúrate de tener mucho cuidado al agregar fragmentos de código adicionales a los archivos de temas. Si agregas el código incorrectamente, puedes romper tu sitio. Si no tienes un tema hijo activo, usa el plugin Code Snippets para insertar el código de forma segura.

Para cambiar el botón «añadir al carrito» en la página de producto

Con este código cambiarás el texto únicamente en la página individual de producto:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );
function woo_custom_cart_button_text() {
    return __( 'texto personalizado botón', 'woocommerce' );
}

Cambiar el botón «añadir al carrito» en el archivo de productos

Para cambiar el texto en las páginas de archivos (tienda, categorías o cualquier lugar donde tengas el módulo de Woo Products de Divi) deberás añadir este otro código:

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );
function woo_archive_custom_cart_button_text() {
    return __( 'texto personalizado botón', 'woocommerce' );
}

Cambiar el texto por tipo de producto

Si necesitas un texto diferente según el tipo de producto (simple, variable, descargable), este snippet más completo te da ese control:

add_filter( 'woocommerce_product_add_to_cart_text', 'custom_woocommerce_product_add_to_cart_text' );
function custom_woocommerce_product_add_to_cart_text() {
    global $product;
    $product_type = $product->get_type();
    switch ( $product_type ) {
        case 'external':
            return __( 'Comprar producto', 'woocommerce' );
        case 'grouped':
            return __( 'Ver productos', 'woocommerce' );
        case 'simple':
            return __( 'Añadir al carrito', 'woocommerce' );
        case 'variable':
            return __( 'Seleccionar opciones', 'woocommerce' );
        default:
            return __( 'Leer más', 'woocommerce' );
    }
}

Cambiar el texto según disponibilidad de stock

Una personalización muy útil es mostrar un texto diferente cuando el producto está agotado. Esto mejora la experiencia del usuario al dejarle claro de inmediato que no puede agregar el producto al carrito:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'texto_boton_segun_stock' );
function texto_boton_segun_stock() {
    global $product;
    if ( ! $product->is_in_stock() ) {
        return __( 'Agotado - Avísame cuando esté disponible', 'woocommerce' );
    }
    return __( 'Añadir al carrito', 'woocommerce' );
}

Puedes combinarlo con un plugin de notificación de reposición de stock para que el botón lleve al formulario de aviso automáticamente.

Cambiar el texto «añadir a carrito» con Plugins

Puedes usar el plugin Add to Cart Button Custom Text de Enrique J. Ros, que hace el trabajo de cambiar el botón «Añadir a carrito» muy fácil. Aquí no debes complicarte con códigos ni usar plugins para insertar snippets personalizados, solo instala el plugin (que es gratuito) en tu sitio y cambia los textos desde las casillas de configuración.

Add to Cart Button Custom Text en WordPress.org
Plugin para cambiar el texto de 'añadir a carrito' en WooCommerce

El plugin ya viene preparado para que puedas cambiar el texto en las páginas de archivos también, así que cubre todo el sitio con una sola configuración.

Personalizar el botón también con CSS

Además del texto, muchas veces querrás cambiar la apariencia visual del botón. Puedes hacerlo con CSS desde Apariencia > Personalizar > CSS adicional, o desde la integración CSS de Divi. El selector principal del botón de WooCommerce es:

.single_add_to_cart_button,
.add_to_cart_button {
    background-color: #tu-color !important;
    color: #blanco !important;
    border-radius: 4px;
    padding: 12px 24px;
    font-weight: 600;
}

Si usas Divi, también puedes hacer estos cambios desde el personalizador de temas de Divi en la sección de botones globales, sin necesidad de CSS manual. Puedes complementar esto con el tutorial de cómo agregar el botón añadir al carrito en la tienda de Divi, que explica cómo activar el botón en la vista de catálogo.

Solución de problemas frecuentes

  • El texto no cambia después de agregar el código: verifica que el código esté correctamente colocado dentro de una función de WordPress (envuelto en el filter correcto) y que no haya errores de sintaxis PHP. Revisa el log de errores del servidor si el sitio quedó en blanco.
  • El texto cambia en la tienda pero no en la página de producto: los filtros woocommerce_product_add_to_cart_text y woocommerce_product_single_add_to_cart_text son distintos. Debes añadir ambos si quieres cambiar el texto en los dos contextos.
  • El plugin no aplica cambios: algunos temas o plugins de optimización cachean los textos. Limpia el caché de tu plugin de caché (LiteSpeed Cache, WP Rocket, etc.) después de hacer el cambio.

Cambiar el texto por categorías de producto

Si tu tienda tiene diferentes tipos de productos (ropa, electrónica, servicios, descargables), puede tener sentido mostrar un texto de botón distinto por categoría. Por ejemplo: «Añadir al guardarropa» para ropa o «Descargar ahora» para productos digitales. El siguiente snippet extiende la personalización al nivel de categoría:

add_filter( 'woocommerce_product_add_to_cart_text', 'texto_boton_por_categoria' );
function texto_boton_por_categoria() {
    global $product;
    if ( has_term( 'ropa', 'product_cat', $product->get_id() ) ) {
        return 'Añadir al guardarropa';
    }
    if ( has_term( 'descargables', 'product_cat', $product->get_id() ) ) {
        return 'Descargar ahora';
    }
    return 'Añadir al carrito';
}

Sustituye 'ropa' y 'descargables' por el slug real de tus categorías (el slug se ve en WooCommerce > Productos > Categorías). Puedes encadenar tantas condiciones if como categorías necesites.

Consideraciones de rendimiento y caché

Un punto que muchos tutoriales omiten: si tu sitio tiene un plugin de caché activo (LiteSpeed Cache, WP Rocket, W3 Total Cache), los textos de los botones pueden quedar cacheados con el valor anterior después de hacer el cambio. Antes de concluir que el snippet no funciona, haz siempre:

  • Limpiar la caché del plugin de caché desde el panel de WordPress.
  • Limpiar la caché del navegador (Ctrl+Shift+R o Cmd+Shift+R) para asegurarte de que no estás viendo una versión vieja de la página.
  • Si usas Divi, también ve a Divi > Opciones del tema > Generador y limpia los archivos CSS/JS estáticos.

Si después de limpiar la caché el cambio sigue sin aparecer, revisa el log de PHP para confirmar que el snippet no está generando un error silencioso que impide que el filter se ejecute. También puedes consultar cómo probar cambios en un sitio de staging con Duplicator antes de aplicarlos en producción.

¿Quieres llevar tu tienda más allá? Nuestro plan premium de UXDivi incluye tutoriales avanzados de WooCommerce con Divi donde cubrimos personalización profunda del flujo de compra, incluyendo checkout one-page, carrito lateral y más.

Preguntas frecuentes

¿Puedo cambiar el texto del botón solo para ciertos productos?

Sí. Con código puedes hacer esa condición verificando el ID del producto dentro de la función del filter. Por ejemplo: if ( $product->get_id() === 123 ) { return 'Texto especial'; }. Esto te permite personalizar el botón por producto, por categoría o por cualquier condición que necesites.

¿El cambio de texto afecta la funcionalidad del carrito?

No. Solo estás cambiando la etiqueta visible del botón, no su comportamiento. El botón seguirá añadiendo el producto al carrito con normalidad, independientemente del texto que muestre.

¿Funciona con WooCommerce en español?

Sí, aunque si tu WooCommerce está en español es posible que algunas cadenas de texto ya estén traducidas y el filter en inglés no aplique. En ese caso, asegúrate de que el filter esté correctamente enlazado con el hook de WooCommerce y que el texto de retorno esté en español.

Conclusiones

Cambiar el texto de añadir a carrito es especialmente útil si vendes productos individuales o si tu tienda online vende productos donde quieres que el comportamiento del usuario tenga alguna particularidad.

En cualquier caso, no es algo difícil de hacer y hay múltiples formas de lograrlo: la más técnica con código, y la más fácil y preferida por muchos, con un plugin gratuito que funciona bastante bien y es superligero. Si quieres llevar la personalización de tu tienda más lejos, te recomendamos también ver cómo crear URLs directas para añadir al carrito en WooCommerce.

¿Te ha servido este tutorial? ¡Déjanos tus comentarios!

// ¿Te sirvió este tutorial?

Imagina lo que aprenderás
con los cursos completos

En UXDivi llevamos los tutoriales del blog al siguiente nivel: proyectos reales de principio a fin, recursos descargables y soporte directo conmigo. Todo por menos del costo de un curso individual en otra plataforma.

+44 cursos +1116 alumnos 4.7 en Trustpilot Garantía 7 días
Jefferson Maldonado
// Escrito por

Jefferson Maldonado

UX Director · Founder UXDivi, MUX Studio y UXDivi Templates

UX Director | fundador de UXDivi y MUX Studio

Comentarios

2 comentarios

Para dejar un comentario, accede a tu cuenta de UXDivi.

Acceder a mi cuenta
senen Hace 3 años

Hola, tengo mi web http://www.elgustoesnuestro.es en woocomerce, no sé como quitar delante de los precios el desde, he metido muchos códigos, descargado plugins etc , pero parece que no hace caso, como si esta opción de mi web fuese lago diferente me podrías ayudar??? en el apartado cursos lo verás fácilmente, desde 65, desde 65…..

Jefferson M Autor Hace 3 años

Por supuesto, estaremos encantados de ayudarte con este problema desde nuestra pestaña de soporte premium. Puedes encontrar más información y solicitar asistencia en el siguiente enlace: https://uxdivi.com/soporte-premium