Si tienes una tienda WooCommerce, el botón predeterminado "Añadir al carrito" puede parecer soso y fácil de pasar por alto. Al personalizarlo, puedes cambiar el texto por algo más persuasivo como "Comprar ahora", cambiar su color para que coincida con tu marca o incluso añadir un icono para captar la atención.
Personalizar el botón "Añadir al carrito" de WooCommerce lo hace más relevante para tus productos y marca, lo que ayuda a aumentar los clics y las ventas.
En esta guía, te mostraré formas sencillas de personalizar el botón "Añadir al carrito" en WooCommerce para que se ajuste a tu tienda y ayude a aumentar los clics.
Pasos para personalizar el botón "Añadir al carrito" de WooCommerce:
Personaliza el botón "Añadir al carrito" de WooCommerce con SeedProd
Para el primer método, usaremos SeedProd, el mejor creador de sitios web para WordPress.
Este potente plugin incluye un constructor de páginas de arrastrar y soltar que te permite personalizar cualquier parte de tu sitio web sin código. Puedes crear temas personalizados de WordPress, crear páginas de destino de alta conversión y personalizar cualquier diseño con solo hacer clic.
Dado que SeedProd incluye soporte para WooCommerce, puedes usarlo para diseñar y lanzar sitios completos de WooCommerce sin un desarrollador. Sigue los pasos a continuación para usar SeedProd y añadir un botón "Añadir al carrito" personalizado a tu sitio WooCommerce.
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.
Consejo extra: Añadir un botón de Añadir al carrito a las entradas del blog
Si desea promocionar productos en el contenido de su blog, abra la plantilla de la Página del Blog, añada una sección de dos columnas con una imagen y detalles del producto, y luego arrastre el bloque Botón Añadir al carrito. Introduzca el ID del producto para que el botón enlace directamente al artículo.
Paso 4. Guardar y publicar sus cambios
Cuando esté satisfecho con el aspecto de sus páginas de WooCommerce, estará listo para lanzar su tienda. Para ello, vuelva al Theme Builder y, en la esquina superior derecha, active el interruptor Habilitar tema SeedProd en la posición 'Activado'.
Echemos un vistazo a algunas de las páginas que hemos personalizado:
Página de Tienda
Página de Producto
Página de Archivo
Página del Blog
Añadir 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 cambiar el texto del botón Añadir al carrito en WooCommerce
Cree un nuevo fragmento de PHP en WPCode y pegue este código para reemplazar "Añadir al carrito" por su propio texto.
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');
}
Guarde el fragmento y luego vea un producto individual para ver el texto de su nuevo botón.
Cómo cambiar el color del botón Añadir al carrito en WooCommerce
Vaya a Apariencia » Personalizar » CSS adicional y añada este CSS para cambiar el color del botón en las páginas de productos individuales.
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}Para estilizar botones en archivos de productos o en la cuadrícula de la tienda, utilice este selector:
.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
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 Añadir al carrito de WooCommerce
display: none;. Algunos plugins también te permiten deshabilitarlo para productos específicos.border-radius para esquinas redondeadas.Espero que este artículo le haya ayudado a aprender cómo añadir un botón personalizado de añadir al carrito en WooCommerce.
También podría interesarle esta publicación: Cómo editar un menú en WordPress para navegación personalizada.
¿Listo para personalizar sus botones de añadir al carrito de WooCommerce?
¡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.
