Opt In Image
DESCARGA GRATIS
1.- Guía para crear una tienda online de éxito
2.- Guía SEO para Prestashop
  • Recibe todos los domingos las últimas entradas del blog.
  • Recibe contenidos exclusivos.

Te puedes dar de baja en cualquier momento. Nada de spam

 

En este post vamos a ver como modificar el texto que aparece en el botón de “añadir al carrito” en Woocommerce.

También veremos cómo cambiar el color de fondo y color del texto de los botones que aparecen en Woocommerce.

Esto es muy interesante si utilizas la plantilla Divi (mi favorita) ya que desde las opciones de personalización es complicado personalizar el diseño de los botones que aparecen en Woocommerce, ya sea el botón de “añadir al carrito” como otros.

 

DESCUENTOS PLANTILLA DIVI

 

 

 

1.- Plugin Woo Button Text para cambiar texto y color del botón de “añadir al carrito” de Woocommerce

 

Vamos a usar el plugin gratuito Woo Button Text para personalizar el conjunto de botones que aparecen en Woocommerce.

IR AL PLUGIN

 

 

1.2.- Configuración del plugin Woo Button Text

 

Una vez instalado el plugin gratuito Woo Button Text procederemos a la configuración del mismo.

Para la configuración iremos al menú lateral a “Exclutips Settings > Woo Button Text”.

Verás que tenemos dos pestañas: “General Settings” y “Advanced Settings”.

 

a.- Pestaña General settings

En esta pestaña tenemos las siguientes opciones:

i.- Button Text On Archive/Shop Page: aquí estableceremos el texto del botón de “añadir al carrito” en Woocommerce cuando estamos viendo una lista de productos. Por ejemplo, al visualizar la página “tienda” de Woocommerce o una categoría.

En el caso de la plantilla Divi, que como sabes es mi plantilla favorita, como la plantilla no muestra el botón de “añadir al carrito” en las listas de productos esta opción no tendrá efectos en un principio. Ya veremos más adelante, en el último apartado del post, como podemos añadir el botón de “añadir al carrito” a la plantilla Divi con Woocommerce (En ese caso si nos afectará esta opción)

ii.- Button Text Product Page: esta opción sirve para cambiar el texto del botón de “añadir al carrito” en Woocommerce que aparece en la página de producto.

 

Modificar el texto del botón de añadir al carrito de woocommerce

Cambiar texto del botón de Añadir al carrito de Woocommerce

 

iii.- Button Text < 2.1 Version: Esto sería igual que la opción anterior pero para versiones anteriores a Woocommerce 2.1. Si usas una versión posterior de Woocommerce puedes dejar esta opción en blanco.

iv.- Place order text: Este será el texto que aparecerá en el botón que hay al final de la página de registro o checkout en Woocommerce.

Este botón aparecerá justo debajo de las opciones de pago.

El texto afectará al botón cuando está seleccionado el pago por transferencia bancaria, TPV Virtual Redsys o contra reembolso.

Si el cliente selecciona la forma de pago por PayPal el texto que aparecerá en el botón de Woocommerce será el predefinido por paypal que es: “Ir a Paypal”

 

cambiar texto boton e pagar woocommerce

cambiar texto botón de finalizar checkout woocommerce

 

Después de configurar, recuerda hacer clic en el botón “upadate” para guardar

 

b.- Pestaña Advanced Settings

 

i.- Button Background color: desde aquí seleccionaremos el color de fondo del botón de “Añadir al carrito” de Woocommerce y resto de botones generados por Woocommerce. Este color no solo afectará al botón de “Añadir al carrito” de productos en Woocommerce sino a muchos otros generados por el plugin de Woocommerce y que mencionaremos en el apartado 1.3

ii.- Button Color Text: desde aquí personalizaremos el color del texto del botón de “Añadir al carrito” de Woocommerce y a todos los generados por Woocommerce.

iii.- Button border radius: desde aquí personalizaremos el radio de las esquinas de los botones. Es decir, a mayor número más curvos serán los botone en sus esquinas.

Un poco más abajo tenemos otros dos campos: “Proceed to Checkout Text” y “Proceed To PayPal text”. En teoría el primero debería ser el texto que debería aparecer en el botón de proceder al checkout o pago, y el segundo el texto del botón que debería aparecer si se selecciona PayPal como forma de pago, pero lo cierto es que a mí no me ha funcionado, y los textos que pongo en estos campos no me aparecen en la web.

Si a ti si te aparecen estos textos deja constancia en los comentarios del post, gracias

Recuerda hacer clic en el botón “Update” para guardar los cambios que hayas establecido.

 

 

 

1.3.- A qué botones de Woocommerce afectan los cambios de diseño

 

La personalización que hemos realizado en el plugin Woo Button text va a afectar no solo al botón de añadir al carrito de los productos de Woocommerce, sino que va a afectar a otros muchos.

 

a.- Modificar texto y color del botón de añadir al carrito de productos de Woocommerce: en la configuración personalizaremos el texto del botón, el color del fondo y el color del texto (configuración global) del botón de “añadir al carrito” que aparece en la ficha de producto.

b.- Modificar texto y color del botón de añadir al carrito de categorías y tienda en Woocommerce: desde el plugin woo button text personalizaremos el texto del botón de “añadir al carrito” que aparece en la página de “tienda” y en las páginas de categorías. También personalizaremos el color de fondo y color de texto (esta configuración es global).

c.- Modificar color botones widgets de woocommerce: el color de fondo y de texto que hemos configurado en el plugin afectará a los widgets específicos de Woocommerce que incluyan botón, como por ejemplo el widget de carrito y el widget de filtro por precio que puedes ver en la siguiente imagen.

 

personalizar botones de widgets de woocommerce

Botones widgets específicos de Woocommerce

 

d.- Botón de ver Carrito: el color de fondo y texto que hayamos configurado también afectará al botón de “ver carrito” que aparece cuando se añade un producto al carrito, para proceder al checkout o pago del pedido.

e.- Botones de Actualizar carrito y finalizar compra de Woocommerce: el color de fondo y texto elegidos también afectarán a los botones de “actualizar carrito” y “finalizar compra” que aparecen en la página del carrito.

 

cambiar color botones finalizar compra woocommerce

Personalizar botones de actualizar carrito y finalizar compra woocommerce

 

f.- botones de pago: en la parte final del proceso de checkout aparece un botón que cambia según la forma de pago elegida.

El color de fondo y color del texto del botón que hayamos establecido afectará al botón sea cual sea la opción de pago elegida. Pero el texto en PayPal será el establecido por éstos en vez del texto que nosotros pusimos en la opción de configuración.

 

 

2.- Cómo poner el botón de añadir al carrito en Divi

 

Como ya sabes mi plantilla favorita para WordPress y Woocommerce y que utilizo en todos los proyectos es Divi.

En la plantilla Divi tanto cuando se visualizan las categorías como cuando se utiliza el módulo tienda para Woocommerce no aparece el botón de “añadir al carrito” (add to cart) bajo los productos.

En una tienda woocommerce realizada con Divi al poner el ratón sobre los productos aparece una capa superpuesta y la opción de hacer clic para ir al producto, pero no un botón de añadir al carrito.

 

Aprende más sobre el módulo tienda de Divi en este post

 

Seguramente te estará haciendo dos preguntas:

 

a.- ¿cómo se añade el botón de añadir al carrito a las categorías de woocommerce con Divi y al módulo tienda de divi?

b.- ¿el plugin que hemos estado viendo en el apartado anterior afectará al diseño de este botón de “añadir al carrito” que queremos añadir a Divi?

 

La respuesta a la segunda pregunta es “SI”. Es decir, que al personalizar el plugin Woo Button Text que hemos estado viendo en el apartado anterior modificaremos el diseño y contenido del botón de “añadir al carrito” que mostremos en el módulo tienda de Divi y en las categorías de Woocommerce

 

 

Para responder a la primera pregunta y conseguir que se muestre bajo cada producto un botón de “añadir al carrito” con la plantilla Divi, tanto en las categorías de Woocommerce como en el módulo tienda tendremos que añadir el siguiente código al archivo functions.php

Lo suyo es trabajar con un archivo functions.php en el tema hijo de Divi para no tener que volver a hacer cambios cada vez que se actualice la plantilla. Pero si no dispones de tema hijo, puedes poner el código al final del archivo functions.php de Divi.

Recuerda hacer las copias de seguridad pertinentes antes de hacer este tipo de modificaciones en el código.

// register add to cart action

function dac_add_cart_button () {

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );

}

add_action( 'after_setup_theme', 'dac_add_cart_button' );

 

 

poner botón de add to cart con divi y woocommerce

Incluir botón de añadir al carrito con Divi y Woocommerce

 

Aprende a realizar diferentes diseños con el módulo tienda de Divi en este post

 

2.1.- Acciones del botón de añadir al carrito en Divi

 

Verás que cuando se hace clic sobre el botón de añadir al carrito situado bajo un producto con la plantilla Divi y Woocommerce pueden suceder dos cosas:

a.- si el producto tiene atributos: si el producto tiene atributos, como el visitante no ha seleccionado los valores que quiere el botón le llevará a la página de producto para que seleccione valores de atributos y así poder comprar.

b.- si el producto no tiene atributos: si el producto no tiene atributos, al hacer clic en el botón el producto se añadirá directamente al carrito y nos aparecerá un enlace por si queremos acceder al carrito.

 

Bloguer especializado en Woocommerce / WordPress, Divi y Prestashop. Me dedico a impatir formación y a la creación de páginas web, blogs y tiendas online.

Mi otro blog, especializado en WordPress y Divi: horizonweb.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información Aquí,plugin cookies

ACEPTAR
Aviso de cookies