Resumen:
Hay tres formas de gestionar un botón personalizado de añadir al carrito de WooCommerce, y la correcta depende de si deseas un constructor visual, un fragmento de código gratuito o las opciones nativas limitadas de los bloques.
- Método SeedProd: Edita el texto, el color y el icono del botón visualmente en el Theme Builder (necesita el plan Élite para WooCommerce).
- Método de bloques de WooCommerce: Los bloques nativos colocan el botón y establecen el estilo del selector de cantidad, pero no cambiarán su texto, color o tipografía en la página de producto individual.
- Método de código (gratuito): Usa pequeños fragmentos para cambiar el texto y el color del botón en las páginas individuales y de tienda.
- Lo que puedes cambiar: La etiqueta (como "Comprar ahora"), el color y un icono.
- Si el texto no se actualiza: Borra la caché de tu página y de objetos, ya que el filtro solo afecta a las representaciones nuevas.
Configuras tu tienda de WooCommerce, pero el botón predeterminado "Añadir al carrito" es gris liso y se mezcla con la página. Quieres que diga algo más claro, que coincida con el color de tu marca o que lleve un icono que atraiga la vista.
He creado páginas de tienda de WooCommerce con SeedProd y he modificado el texto del botón con WPCode, así que te mostraré las opciones de botón personalizado de añadir al carrito de WooCommerce que realmente utilizo. Para un rediseño visual completo uso SeedProd, para un cambio nativo gratuito uso los bloques de WooCommerce y para un cambio rápido de texto o color inserto un fragmento de código.
¿Qué método deberías usar?
Elige el método que se ajuste a la cantidad de control que necesitas y por lo que estás dispuesto a pagar.
- SeedProd (visual, sin código): Lo mejor cuando estás diseñando tus páginas de tienda y de producto y quieres control total sobre el texto, el color, el icono y los estilos al pasar el ratón. El diseño de WooCommerce necesita el plan Élite.
- Bloques de WooCommerce (gratuito, nativo): Adecuado para colocar el botón y establecer el estilo del selector de cantidad, pero no cambiará el texto, el color o la tipografía del botón en la página de producto individual.
- Fragmento de código (ajuste rápido): Lo mejor para un cambio rápido de texto o color en páginas individuales y de tienda cuando te sientes cómodo pegando un fragmento en WPCode.
Algo que vale la pena decir de antemano es que las etiquetas más claras y orientadas a la acción, como "Comprar ahora" o "Añadir al carrito", tienden a reducir la vacilación de los visitantes primerizos, porque les dicen exactamente lo que sucederá a continuación. Ese pequeño cambio de redacción suele ser la victoria más fácil aquí.
- Personaliza el botón personalizado de añadir al carrito de WooCommerce con SeedProd
- Personaliza el botón Añadir al carrito con bloques de WooCommerce (gratuito)
- Añade un botón personalizado de añadir al carrito de WooCommerce con código
- Preguntas frecuentes sobre el botón personalizado de añadir al carrito de WooCommerce
Personaliza el botón personalizado de añadir al carrito de WooCommerce con SeedProd
Para el primer método, usaré SeedProd, porque te permite editar el texto, el color y el icono del botón visualmente mientras ves cómo se produce el cambio.
SeedProd es un constructor de sitios web de arrastrar y soltar que te permite personalizar cualquier parte de tu tienda sin código. Como incluye soporte para WooCommerce, puedes diseñar tus páginas de tienda y de producto, incluido el botón de añadir al carrito, con solo hacer clic.
Una nota sincera antes de empezar: las funciones de diseño de WooCommerce de SeedProd requieren el plan Élite. Si prefieres una opción gratuita, salta al método de Bloques de WooCommerce más abajo.
Paso 1. Instalar y Activar SeedProd
Ve a la página de precios de SeedProd y elige el plan Elite para desbloquear las funciones de WooCommerce. Luego, instala y activa el plugin.
A continuación, ve a SeedProd » Ajustes, pega tu clave de licencia y haz clic en Verificar clave.
Paso 2. Elige un Kit de Sitio Web
A continuación, ve a SeedProd » Theme Builder y haz clic en el botón Temas. Aquí verás una biblioteca de Kits de Sitio Web que puedes importar con un solo clic.
Busca los kits marcados como "WooCommerce", ya que están diseñados para tiendas online.
Elige un diseño que te guste y SeedProd lo cargará en tu Theme Builder para que puedas empezar a personalizar de inmediato.
Paso 3. Personaliza tu botón "Añadir al carrito"
Ahora editemos el botón "Añadir al carrito" donde más importa: tus páginas de Tienda y de Producto.
Personaliza el botón "Añadir al carrito" en la página de Tienda
En SeedProd » Theme Builder, abre tu Página de Tienda y haz clic en Editar diseño.
Selecciona el bloque Cuadrícula de Productos y luego abre los ajustes de Botones.
- Estilo: Elige Plano, 2D, Vintage, Fantasma o Enlace.
- Texto: Cambia la etiqueta por algo más claro como "Comprar ahora".
- Diseño: Ajusta el color, el tamaño, el radio del borde y los efectos al pasar el ratón en Avanzado.
Haz clic en Guardar cuando estés satisfecho con el estilo del botón.
Personaliza el botón "Añadir al carrito" en la página de Producto
A continuación, abra la plantilla de la Página de Producto y haga clic en Editar Diseño. Seleccione el botón Añadir al carrito en el área de detalles del producto para editar su configuración.
- Texto y Alineación: Actualice el texto y la posición de la CTA.
- Icono: Añada un icono de carrito o de verificación antes/después del texto con Font Awesome.
- Avanzado: Ajuste colores, tipografía, espaciado y estilos al pasar el ratón.
También puedes colocar el bloque Añadir al carrito en otras plantillas, como una entrada de blog, e introducir un ID de producto para que el botón enlace directamente a ese artículo. Yo lo hago cuando quiero promocionar un solo producto dentro de un artículo.
Paso 4. Guardar y publicar sus cambios
Cuando estés satisfecho con el aspecto de tus páginas de WooCommerce, estarás listo para lanzar tu tienda. Para ello, vuelve al Theme Builder y, en la esquina superior derecha, activa el interruptor Habilitar tema SeedProd a la posición "Activado".
Echemos un vistazo a algunas de las páginas que he personalizado, empezando por la página de la tienda.
Aquí está la página del producto con el nuevo botón.
Y aquí está la página de archivo de productos.
También puedes usar el mismo bloque Añadir al carrito en una página de blog.
¿Listo para diseñar la tuya?
Estiliza toda tu tienda de WooCommerce, no solo un botón
El constructor visual de SeedProd te permite cambiar el texto, el color y el icono del botón Añadir al carrito mientras lo ves actualizarse en tiempo real, y luego diseñar el resto de tu tienda de la misma manera.
Quiero diseñar mi tiendaPersonaliza el botón Añadir al carrito con bloques de WooCommerce (gratuito)
Si tu tema es un tema de bloques, puedes abrir el botón Añadir al carrito en el Editor del Sitio en Apariencia » Editor y editar tu plantilla de producto individual.
Luego selecciona el bloque Añadir al carrito.
Aquí está el límite honesto que encontré: el bloque nativo de producto individual no te permite cambiar el texto, el color o la tipografía del botón. Su opción principal es el estilo del selector de cantidad, que puedes cambiar entre un campo de entrada simple y un selector de más/menos.
En las cuadrículas de tienda y archivo, el bloque Botón de producto expone ajustes de color y tipografía, pero la etiqueta todavía proviene de WooCommerce, por lo que tampoco puedes reescribirla allí. Para cambiar el texto del botón de forma gratuita, usa el método de fragmento de código más abajo.
Para un control total sobre el texto, el color, los iconos y los estilos de desplazamiento en un solo lugar, el constructor visual de arriba te ofrece lo máximo, y puedes personalizar la página de la tienda de WooCommerce en el mismo editor.
Añade un botón personalizado de añadir al carrito de WooCommerce con código
¿Prefiere el código? Puede cambiar el texto y el color del botón con pequeños fragmentos. Por seguridad, añada estos utilizando un plugin como WPCode en lugar de editar los archivos del tema directamente.
¿Cómo cambio el texto del botón Añadir al carrito en WooCommerce?
Cambias el texto del botón con un pequeño filtro PHP. WooCommerce utiliza un filtro para las páginas de productos individuales y otro separado para las páginas de tienda y archivo, así que cubre ambos si quieres la nueva etiqueta en todas partes.
Este primer fragmento cambia la etiqueta en las páginas de productos individuales. Crea un nuevo fragmento PHP en WPCode y pégalo.
add_filter('woocommerce_product_single_add_to_cart_text', 'SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce() {
return __('Buy this item', 'woocommerce');
}Este segundo fragmento cambia la etiqueta en las páginas de tienda y archivo de productos, donde los productos se muestran en una cuadrícula. Añádelo como su propio fragmento junto al primero.
add_filter('woocommerce_product_add_to_cart_text', 'SP_customize_archive_add_to_cart_button_woocommerce');
function SP_customize_archive_add_to_cart_button_woocommerce() {
return __('Buy this item', 'woocommerce');
}
Guarda los fragmentos y luego visita un producto individual para ver el nuevo texto de tu botón.
¿Cómo cambio el color del botón Añadir al carrito en WooCommerce?
Cambias el color del botón con CSS. Esta primera regla apunta al botón en las páginas de productos individuales.
Ve a Apariencia » Personalizar » CSS adicional y añade este CSS.
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
Esta segunda regla da estilo a los botones en los archivos de productos y la cuadrícula de la tienda, de modo que el color coincida también en la página de categoría de producto (archivo).
.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
Enlaza un botón de "Añadir al carrito" desde cualquier lugar con URLs de "Añadir al carrito"
Si deseas un botón que añada un producto al carrito desde una página de destino, tabla de precios o publicación de blog, utiliza una URL de "añadir al carrito". Enlaza a ?add-to-cart=ID&quantity=N, sustituyendo ID por el ID del producto y N por la cantidad.
Por ejemplo, https://tutienda.com/?add-to-cart=99&quantity=1 añade una unidad del producto 99 al carrito al hacer clic. Es una forma limpia de enviar a la gente directamente a la página de pago sin un paso adicional.
Más Formas de Personalizar WooCommerce
La personalización del botón añadir al carrito es solo una de las muchas formas de ajustar su tienda. Para más personalizaciones de WooCommerce, consulte las siguientes guías:
- Cómo Personalizar la Pestaña de Información Adicional de WooCommerce
- Cómo Añadir el Botón Ver Carrito en WooCommerce
- Cómo Cambiar el Título de la Página de Tienda en WooCommerce
- Cómo ocultar productos sin stock en WooCommerce
Preguntas frecuentes sobre el botón personalizado de añadir al carrito de WooCommerce
¿Cómo cambio el texto del botón "Añadir al carrito" en las páginas de la tienda y de archivo, no solo en los productos individuales?
Las páginas de productos individuales y las páginas de tienda/archivo utilizan filtros diferentes. Usa woocommerce_product_single_add_to_cart_text para la página de producto individual y woocommerce_product_add_to_cart_text para las cuadrículas de tienda y archivo.
Añade ambos fragmentos en WPCode para obtener la nueva etiqueta en todas partes. Si prefieres no tocar el código, cambia el texto visualmente en SeedProd.
¿Necesito un plugin para personalizar el botón "Añadir al carrito" de WooCommerce, o puedo hacerlo gratis?
Puedes hacerlo gratis con un fragmento de código. La versión gratuita de WPCode te permite cambiar el texto y el color del botón sin comprar nada.
El diseño visual de WooCommerce de SeedProd necesita el plan Élite, pero te da el máximo control sobre el texto, el color, los iconos y los estilos al pasar el ratón en un solo lugar.
¿Cómo personalizo el botón "Añadir al carrito" usando los bloques de WooCommerce o el Editor del Sitio?
Abre Apariencia » Editor en un tema de bloques, edita tu plantilla de producto individual y selecciona el bloque "Añadir al carrito". El bloque nativo es limitado: en la página de producto individual, su opción principal es el estilo del selector de cantidad, un campo de entrada simple o un control deslizante de más/menos.
No cambiará el texto, el color o la tipografía del botón allí. Para eso, usa un fragmento de código o el constructor visual de SeedProd en su lugar.
¿Por qué no se muestra el texto personalizado de mi botón "Añadir al carrito"?
La causa más común es la caché. Un plugin de caché, caché de objetos o CDN puede servir una versión antigua de la página, por lo que el filtro solo cambia la etiqueta en las renderizaciones nuevas.
Borra la caché de tu página y la caché de objetos, luego recarga. También comprueba que has añadido el filtro correcto para el tipo de página, ya que las páginas individuales y de archivo usan unos separados.
Personaliza tu botón "Añadir al carrito" de WooCommerce hoy mismo
Ese botón gris simple es ahora una llamada a la acción clara y acorde a tu marca que indica a los compradores exactamente qué hacer a continuación. Elige el método que se adapte a tu tienda, ya sea la opción gratuita de Bloques de WooCommerce, un fragmento de código rápido o SeedProd para un rediseño visual completo.
También te puede interesar esta publicación: Cómo editar un menú en WordPress para navegación personalizada.
Empieza hoy mismo con SeedProd
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
