Cómo personalizar el botón Agregar al carrito de WooCommerce

WooCommerce creará su carrito y otras páginas necesarias automáticamente. ¿Qué pasa si desea hacer cambios, entonces? ¿Quieres personalizar tu propio botón Añadir al carrito de WooCommerce ?

Si ha estado usando WooCommerce durante algún tiempo, es posible que sepa que WooCommerce no ofrece muchas posibilidades de personalización. Cualquier diseño de página de WooCommerce se puede modificar cambiando de tema. Aún así, no tiene acceso a todas las funciones de edición disponibles. ¿Entonces que? Edición del proceso de pago de WooCommerce

Aquí, aprenderá cómo personalizar el botón Agregar al carrito de WooCommerce para que se adapte mejor a sus necesidades y genere más negocios en su tienda en línea.

¿Personalizar el botón Agregar al carrito de WooCommerce es lo mejor para su negocio?

Si posee un sitio de WordPress y desea vender productos en línea, debe usar WooCommerce. Si bien hace un excelente trabajo desde el primer momento, realmente puede hacer que su tienda en línea brille jugando con las opciones.

Agilizar y simplificar el procedimiento de compra es una estrategia comprobada para atraer a más compradores.

Hemos visto una variedad de opciones de optimización y personalización de la página de pago, todo para aumentar las tasas de conversión y disminuir las tasas de abandono. Sin embargo, el paso anterior en el embudo de ventas también es crucial.

Si el consumidor típico de su negocio compra muchos artículos, o si desea que exploren su tienda y agreguen y eliminen artículos antes de pagar, el botón "Agregar al carrito" es imprescindible.

Por el contrario, varias tiendas en línea eligen un procedimiento de compra más simplificado, pasando por alto la pantalla "Agregar al carrito" para enviar a los clientes directamente a la caja.

Es perfecto para tiendas de un solo artículo cuando los clientes saben que solo se irán con un artículo. Aunque los ciclos de compra más cortos a veces brindan mejores resultados, no siempre es así, dependiendo de los bienes y servicios ofrecidos.

¿Cómo personalizar el botón Agregar al carrito de WooCommerce?

Puede usar varios métodos para crear un botón único "Agregar al carrito" en WooCommerce. Además, tiene control total sobre la personalización de la apariencia del botón "agregar al carrito" para que coincida con su tienda en línea y sus productos. Para modificar el botón Agregar al carrito en WooCommerce, es posible que deba estar familiarizado con la codificación o usar un complemento o tema de terceros.

Buenas noticias para usted, porque le mostraremos las dos formas de personalizar el botón Agregar al carrito.

Pero primero, analicemos el proceso de personalización sin usar ningún complemento.

Personalice el botón Agregar al carrito de WooCommerce sin complemento

El botón "añadir al carrito" se puede personalizar modificando la visualización del texto. Por ejemplo, es posible personalizar el texto del botón "Agregar al carrito" para que se adapte mejor al tono y propósito de su tienda en línea. Asimismo, puede personalizar el texto de los botones del carrito de compras de WooCommerce para que se adapte a sus necesidades.

Cómo cambiar el texto del botón Agregar al carrito

Use las instrucciones a continuación para personalizar el texto del botón "Agregar al carrito" de su carrito de compras.

• Vaya al panel de control de WordPress y vaya a Apariencia → Editor de temas.
• Abra el archivo Theme Functions (functions.php) para su tema.
• Al final del archivo function.php, agregue los siguientes códigos.

Para cambiar el texto de agregar al carrito en la página de la tienda:

 add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_custom_product_add_to_cart_text' ); function woocommerce_custom_product_add_to_cart_text() { return __( 'Buy Now', 'woocommerce' ); }

Así es como se verá después de ingresar el código:

Para cambiar el texto de agregar al carrito en la página de un solo producto:

 add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_custom_single_add_to_cart_text' ); function woocommerce_custom_single_add_to_cart_text() { return __( 'Buy Now', 'woocommerce' ); }

Así es como se verá después de ingresar el código:

Personalizar Agregar al carrito Tipografía

Seleccione CSS adicional para incluir su código personalizado para personalizar la fuente, el color y el tamaño.

Cambiar la tipografía Agregar al carrito en la página de un solo producto:

• Vaya a la página de su producto individual, luego haga clic en personalizar.
• Seleccione CSS adicional.
• Luego escriba el siguiente código:

 .single-product .product .single_add_to_cart_button.button:not(:hover):not(:active):not(.has-background) { background-color: #008000; color: white; font-size: 16px; font-weight: bold; font-style: italic; }

Cambiar la tipografía Agregar al carrito en la página de la tienda:

• Vaya a la página de su tienda, luego haga clic en personalizar.
• Seleccione CSS adicional.
• Luego escriba el siguiente código:

 .woocommerce .product .add_to_cart_button.button { background-color: #008000; color: white; font-size: 16px; font-weight: bold; font-style: italic; }

Personalice el botón Agregar al carrito de WooCommerce con complemento

Ahora le mostraremos cómo personalizar el botón Agregar al carrito de WooCommerce usando un increíble complemento llamado ProductX.

Instalación de ProductX

Para usar ProductX, primero debe instalarlo. Para instalar ProductX, necesita:

• Vaya a la sección Complementos desde su panel de WordPress.
• Escriba el nombre del complemento "ProductX" en la barra de búsqueda.
• Instale y active el complemento ProductX.

Activar el complemento WooCommerce Builder

WooCommerce Builder es una extensión para ProductX. Puede usar estos diseños prefabricados como punto de partida para la página de inicio de su tienda en línea, las páginas de categorías, las páginas de archivo y las páginas de detalles del producto y del carrito de compras. Necesitamos activar el constructor antes de que podamos empezar a trabajar con él. Para hacer eso:

• Vaya a la sección ProductX.
• Haga clic en "Complementos" para ir a la sección Todos los complementos.
• A continuación, active Complemento de constructor.

Personalizar el botón Agregar al carrito en la página de la tienda

Para personalizar el botón Agregar al carrito en la página de la tienda, primero deberá crear una plantilla. No te molestaremos diciéndote todos los pasos que debes seguir para crear una plantilla. En su lugar, puede consultar este artículo que proporciona un proceso completo para crear una plantilla de página de tienda.

Después de crear una plantilla y agregar bloques para crear su página de tienda, puede pasar al proceso de personalización.

Cuando seleccione una lista/cuadrícula de productos, verá la opción de configuración en la barra lateral derecha. Desde la configuración, habilite el carrito y aparecerá el texto Agregar al carrito. Además, esta configuración del carrito en sí es un menú desplegable. Y cuando haga clic en él, verá un montón de opciones de personalización.

Puede personalizar todo, desde el texto y el color del texto hasta el tamaño, el borde, el espaciado y todo lo demás. Además, ProductX ha agregado una configuración de tipografía en la opción de arrastrar hacia abajo del carrito.

Puede usarlo para seleccionar el estilo de fuente, el tamaño, la altura, el peso, el espaciado y también decoraciones como herencia, subrayado, sobrerayado y línea.

También tiene una opción de configuración de color que puede usar para cambiar el color del botón Agregar al carrito, los textos, el color del borde, el color de fondo y mucho más.

Personalizar el botón Agregar al carrito en la página de un solo producto

Al igual que antes, deberá crear una plantilla antes de poder cambiar el aspecto del botón "agregar al carrito" en las páginas de un solo producto. No perderemos su tiempo describiendo todo lo que debe hacer para hacer una plantilla. En su lugar, consulte este artículo para conocer un procedimiento paso a paso para crear una plantilla de página de un solo producto.

Entonces, cuando crea una sola página de producto, agrega bloques de "Producto Agregar al carrito". Y este bloque en sí proporciona el botón Agregar al carrito junto con toda la personalización necesaria.

Luego, puede cambiar los textos, los colores y todas las personalizaciones tipográficas que mencionamos anteriormente, tal como lo hace en la página de una tienda.

ProductX le brinda el control completo para personalizar su botón Agregar al carrito sin usar códigos.

Conclusión

ProductX tiene que ver con la flexibilidad y la personalización, por lo que le brinda acceso a todas las opciones que necesita para personalizar la apariencia y el funcionamiento de los botones para agregar al carrito de WooCommerce. Sin embargo, hemos compartido ambos procesos de personalización de los botones Agregar al carrito con y sin códigos, para que sepa qué flexibilidad de personalización desea. ¡La mejor de las suertes!

Puede consultar los tutoriales en vídeo de WordPress en nuestro canal de YouTube. ¡También, encuéntrenos en Facebook y Twitter para actualizaciones periódicas!