Si tienes una tienda WooCommerce, el botón predeterminado "Añadir al carrito" puede parecer simple 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 llamar la atención.
Personalizar tu botón de 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 guiaré a través de formas sencillas de personalizar el botón de añadir al carrito en WooCommerce para que se adapte a tu tienda y ayude a aumentar los clics.
Pasos para personalizar el botón de añadir al carrito de WooCommerce:
- Paso 1. Instalar y activar SeedProd Instale y active SeedProd
- Segundo paso Elija un kit de sitio web
- Paso 3 Personalice el botón Añadir al carro
- Paso 4. Guarde y publique los cambios
Personalizar WooCommerce botón Añadir al carro con SeedProd
Para el primer método, utilizaremos SeedProd, el mejor creador de sitios web para WordPress.
Este potente plugin incluye un constructor de páginas de arrastrar y soltar que le permite personalizar cualquier parte de su sitio web sin código. Puede crear temas de WordPress personalizados, crear páginas de destino de alta conversión y personalizar cualquier diseño con apuntar y hacer clic.
Debido a que SeedProd incluye soporte para WooCommerce, puede utilizarlo para diseñar y lanzar sitios enteros de WooCommerce sin un desarrollador. Siga los pasos a continuación para utilizar SeedProd para añadir un botón personalizado de añadir al carrito a su sitio WooCommerce.
Paso 1. Instalar y activar SeedProd Instale y active SeedProd
Vaya a la página de precios de SeedProd y elija el plan Elite para desbloquear las funciones de WooCommerce. A continuación, instala y activa el plugin.
A continuación, vaya a SeedProd " Configuración, pegue su clave de licencia y haga clic en Verificar clave.
Segundo paso Elija un kit de sitio web
A continuación, vaya a SeedProd " Theme Builder y haga clic en el botón Temas. Aquí verás una biblioteca de Website Kits 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 personalizarlo de inmediato.
Paso 3 Personalice el botón Añadir al carro
Ahora vamos a editar el botón de añadir al carrito donde más importa: sus páginas Tienda y Producto.
Personalizar el botón Añadir al carro en la página de la tienda
En SeedProd " Theme Builder, abra su Página de Tienda y haga clic en Editar Diseño.
Seleccione el bloque Rejilla de productos y, a continuación, abra la configuración de Botones.
- Estilo: Elige Plano, 2D, Vintage, Fantasma o Enlace.
- Texto: Cambia la etiqueta por algo más claro como "Comprar ahora".
- Diseño: Ajuste el color, el tamaño, el radio del borde y los efectos hover en Avanzado.
Haga clic en Guardar cuando esté satisfecho con el estilo del botón.
Personalizar el botón Añadir al carro en la página de producto
A continuación, abra la plantilla Página de producto y haga clic en Editar diseño. Seleccione el botón de 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 del CTA.
- Icono: Añade un icono de carrito o cheque antes/después del texto con Font Awesome.
- Avanzado: Modifique los colores, la tipografía, el espaciado y los estilos hover.
Consejo extra: Añadir un botón Añadir al carrito a las entradas del blog
Si quieres promocionar productos en el contenido de tu blog, abre la plantilla Página de blog, añade una sección de dos columnas con una imagen y los detalles del producto y, a continuación, arrastra el bloque Botón Añadir al carrito. Introduce el ID del producto para que el botón enlace directamente con el artículo.
Paso 4. Guarde y publique los cambios
Cuando estés satisfecho con el aspecto de tus páginas de WooCommerce, estarás listo para activar tu tienda. Para ello, vuelva al Theme Builder, y en la esquina superior derecha, gire el interruptor Enable SeedProd Theme a la posición 'On'.
Veamos algunas de las páginas que hemos personalizado:
Página de la tienda
Página del producto
Página de archivo
Página del blog
Añadir un botón personalizado de WooCommerce Añadir al carro con código
¿Prefiere el código? Puedes cambiar el texto y el color de los botones con pequeños fragmentos. Por seguridad, añádelos usando un plugin como WPCode en lugar de editar directamente los archivos del tema.
Cómo cambiar el texto del botón Añadir al carrito en WooCommerce
Crea un nuevo fragmento PHP en WPCode y pega este código para reemplazar "Añadir al carrito" por tu 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, a continuación, visualice un solo producto para ver el nuevo texto del botón.
Cómo cambiar el color del botón Añadir al carrito en WooCommerce
Ir a Apariencia " Personalizar " CSS adicional y añadir 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 dar estilo a los botones en los 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
Personalizar el botón de añadir al carrito es sólo una de las muchas maneras de ajustar tu tienda. Para más personalizaciones de WooCommerce, consulta 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 la tienda en WooCommerce
- Cómo ocultar productos agotados en WooCommerce
WooCommerce Botón Añadir al carro FAQs
display: none;. Algunos plugins también permiten desactivarlo para productos específicos.border-radius para esquinas redondeadas.Espero que este artículo te haya ayudado a aprender cómo añadir un botón personalizado de añadir al carrito en WooCommerce.
También te puede gustar este post: Cómo editar un menú en WordPress para la navegación personalizada.
¿Listo para personalizar los botones de añadir al carrito de WooCommerce?
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
