Cómo cambiar el mensaje Agregar al carrito de WooCommerce

¿Busca formas de cambiar los mensajes cuando sus compradores agregan productos a sus carritos en su tienda en línea? Te tenemos cubierto. En esta guía, le mostraremos diferentes formas de cambiar el mensaje de agregar al carrito de WooCommerce .

Una de las razones por las que WooCommerce es una de las plataformas de comercio electrónico más populares es por sus inmensas opciones de personalización. No solo puede personalizar la página de la tienda, el pago y las páginas del producto, sino también los detalles más pequeños, como los mensajes para agregar al carrito. La mayoría de los propietarios de tiendas pasan por alto estos mensajes, pero la verdad es que pueden ayudarlo a optimizar su tienda y aumentar sus tasas de conversión.

Antes de ver cómo editar los mensajes Agregar al carrito, echemos un vistazo a los mensajes predeterminados.

¿Qué es el mensaje Agregado al carrito?

Los mensajes de agregar al carrito en WooCommerce son los mensajes que se muestran a los clientes tan pronto como agregan un producto al carrito . Se proporciona a los usuarios para confirmar que el producto se ha agregado a su carrito. Esto también es una indicación de que los compradores pueden proceder a pagar a través de la página del carrito si desean completar la compra.

De forma predeterminada, el mensaje agregado al carrito es " (product_name) ha sido agregado a su carrito ". Aquí, product_name es el nombre del artículo que el usuario ha agregado al carrito. Por ejemplo, si es "Auriculares", el mensaje de agregar al carrito será "Se agregaron auriculares a su carrito".

Ahora que tenemos una idea básica de lo que son, comprendamos mejor los beneficios de editar los mensajes de agregar al carrito.

¿Por qué editar el mensaje Agregar al carrito?

La mayoría de los administradores centran sus esfuerzos en personalizar sus tiendas, pero dejan los mensajes predeterminados. Esto significa que puedes destacar fácilmente simplemente haciendo algo diferente. Además de eso, el mensaje de agregar al carrito es uno de los mensajes más distintivos que proporciona a sus clientes antes de que confirmen su compra . Por eso debes asegurarte de que el mensaje sea apropiado y te ayude a hacer crecer tu negocio.

Por ejemplo, puede usar mensajes de agregar al carrito para agradecer a los clientes por comprar en su tienda, ofrecer descuentos o alentarlos a comprar más en su sitio web.

De manera predeterminada, no hay ninguna opción para cambiar el mensaje de agregar al carrito de WooCommerce . Pero en este tutorial, le mostraremos diferentes formas de editar los mensajes de agregar al carrito.

Cómo cambiar WooCommerce el mensaje Agregar al carrito

Puede cambiar fácilmente los mensajes de agregar al carrito de WooCommerce mediante programación usando solo unos pocos fragmentos de código . Antes de comenzar, asegúrese de haber configurado correctamente WooCommerce en su sitio web; de lo contrario, es posible que no pueda aprovechar al máximo este tutorial.

Además, tenga en cuenta que algunas páginas de WooCommerce, como la tienda, el carrito y el pago, varían según el tema que utilice. Usaremos el tema Divi para este tutorial, por lo que algunas de las páginas pueden verse diferentes de su sitio. Sin embargo, debería poder seguir todos los pasos sin ningún problema. Si está buscando temas para su sitio, consulte nuestra publicación sobre los mejores temas de WooCommerce.

NOTA : Como editaremos algunos archivos principales, le recomendamos que haga una copia de seguridad de su sitio web y cree un tema secundario antes de comenzar. Si necesita ayuda con esto, puede usar uno de los mejores complementos de temas para niños.

Ahora, sin más preámbulos, veamos cómo editar el mensaje de agregar al carrito en WooCommcerce.

¿Dónde agregar los fragmentos de código?

En la siguiente sección, veremos diferentes fragmentos de código que agregaremos al archivo functions.php del tema secundario. Los agregaremos usando el editor de temas, por lo que en su tablero de WordPress, tendrá que ir a Apariencia> Editor de temas y abrir la pestaña functions.php .

Aquí puede agregar los fragmentos de código que se adapten a sus necesidades al final del editor. No olvide Actualizar el archivo para aplicar los cambios.

NOTA: Dado que realizaremos todos los cambios mediante código, se recomienda que tenga conocimientos básicos de programación. De lo contrario, es posible que necesite la ayuda de alguien familiarizado con la programación y el código.

1. Cambiar el mensaje personalizado de Añadir al carrito de WooCommerce

Si simplemente desea agregar un mensaje agregado al carrito diferente para su tienda WooCommerce, puede usar el siguiente fragmento.

Simplemente agregará un mensaje para notificar que el producto se ha agregado al carrito y cualquier detalle necesario. Alternativamente, puede usarlo para agregar un mensaje simple a sus clientes cuando agregan un artículo al carrito.

1.1. Mensaje sencillo

Use el siguiente fragmento para cambiar su mensaje de agregar al carrito de WooCommerce con texto simple. En este caso, informamos a los compradores que agregaron un producto al carrito y les agradecemos por comprar con nosotros.

 add_filter('wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message');
función quadlayers_custom_add_to_cart_message() {
   $mensaje = 'Su producto ha sido agregado al carrito. ¡Gracias por comprar con nosotros!' ;
   devolver $mensaje;
}

1.2. Mensaje de producto simple:

Si también desea especificar el nombre del producto , puede usar el siguiente fragmento.

 add_filter('wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2); 
 
función quadlayers_custom_wc_add_to_cart_message ($mensaje, $product_id) { 
    $mensaje = sprintf(esc_html__('%s ha sido agregado a su carrito. ¡Gracias por comprar!','tm-organik'), get_the_title( $product_id ) ); 
    devolver $mensaje; 
}

Tan pronto como el cliente agregue un producto al carrito, verá el siguiente mensaje con el nombre del producto:

2. Mensaje de producto personalizado Agregar al carrito con enlace al carrito

En los fragmentos anteriores, solo agregamos texto al mensaje. Pero, ¿y si queremos añadir algo? Por ejemplo, es posible que desee mostrar un botón " Ver carrito " para que los compradores puedan revisar lo que están comprando.

En este caso, deberá cambiar el mensaje de agregar al carrito de WooCommerce con un mensaje personalizado y agregar un enlace al carrito.

 /**
 * Cambiar el mensaje Añadir al carrito de WooCommerce con el enlace del carrito.
 */
función quadlayers_add_to_cart_message_html( $mensaje, $productos) {

$cuenta = 0;
$titulos = array();
foreach ($productos as $product_id => $cantidad) {
$títulos[] = ( $cantidad > 1 ? absint( $cantidad ) . ' × ' : '' ) . sprintf( _x( '“%s”', 'Nombre del elemento entre comillas', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
$recuento += $cantidad;
}

$títulos = array_filter ($títulos);
$texto_agregado = sprintf( _n(
'%s ha sido agregado a su carrito. ¡Gracias por comprar!', // Singular
'%s han sido agregados a su carrito. ¡Gracias por comprar!', // Plural
$count, // Número de productos agregados
'woocommerce' // Dominio de texto
), wc_format_list_of_items( $títulos ) );
$mensaje = sprintf( '<a href="%s" class="button wc-forward">%s</a> %s', esc_url( wc_get_page_permalink( 'cart' ) ), esc_html__( 'Ver carrito', 'woocommerce' ), esc_html( $added_text ) );

devolver $mensaje;
}
add_filter('wc_add_to_cart_message_html', 'quadlayers_add_to_cart_message_html', 10, 2);

Ahora, cuando revise su sitio desde el frente, verá el mensaje personalizado que acaba de personalizar.

El fragmento también considera varios artículos y productos agrupados cuando se agregan al carrito y ajusta el mensaje en consecuencia.

3. Mensaje de producto personalizado Agregar al carrito con enlace de pago

Ahora vamos a dar un paso más. Sabemos que la mayoría de los clientes prefieren pagos más cortos. Entonces, ¿qué pasaría si pudiera cambiar el mensaje de agregar al carrito de WooCommerce y agregar un enlace de pago en lugar de un enlace de carrito? De esa manera, eliminaría un paso y acortaría el proceso de pago.

En este caso, agregaremos un enlace al pago que dice "Proceder al pago".

 /**
 * Cambie el mensaje Agregar al carrito de WooCommerce con un enlace de pago.
 */
función quadlayers_add_to_cart_message_html( $mensaje, $productos) {

$cuenta = 0;
$titulos = array();
foreach ($productos as $product_id => $cantidad) {
$títulos[] = ( $cantidad > 1 ? absint( $cantidad ) . ' × ' : '' ) . sprintf( _x( '“%s”', 'Nombre del elemento entre comillas', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
$recuento += $cantidad;
}

$títulos = array_filter ($títulos);
$texto_agregado = sprintf( _n(
'%s ha sido agregado a su carrito. ¡Gracias por comprar!', // Singular
'%s han sido agregados a su carrito. ¡Gracias por comprar!', // Plural
$count, // Número de productos agregados
'woocommerce' // Dominio de texto
), wc_format_list_of_items( $títulos ) );
$mensaje = sprintf( '<a href="%s" class="button wc-forward">%s</a> %s', esc_url( wc_get_checkout_url() ), esc_html__( 'Proceder al pago', 'woocommerce ' ), esc_html( $texto_agregado ) );
devolver $mensaje;
}
add_filter('wc_add_to_cart_message_html', 'quadlayers_add_to_cart_message_html', 10, 2);

Si revisa la interfaz, tan pronto como los clientes agreguen un producto al carrito, verán una opción para Proceder al pago en lugar del botón Ver carrito. Si el cliente hace clic en él, será redirigido a la página de pago saltándose la página del carrito.

Para obtener más información al respecto, consulte nuestro tutorial para omitir la página del carrito en WooCommerce.

4. Eliminar el mensaje Agregar al carrito

Alternativamente, puede eliminar por completo el mensaje de agregar al carrito. Todo lo que necesita hacer es usar el siguiente fragmento de código:

 add_filter('wc_add_to_cart_message_html', '__return_null');

Bonificación: personalice el botón Agregar al carrito en WooCommerce

Acabamos de ver varias formas de cambiar los mensajes de agregar al carrito de WooCommerce. Si desea llevar su tienda al siguiente nivel, hay algo más que puede hacer. Personalizar el botón Agregar al carrito también puede ser útil para aumentar las tasas de conversión. Personalizar el botón que los clientes presionan para iniciar el proceso de compra puede tener un gran impacto en tus ventas y hacer que tu tienda se destaque por no usar los aburridos botones de agregar al carrito que usan el resto de los sitios.

En esta sección, le mostraremos cómo personalizar fácilmente los botones de agregar al carrito en WooCommerce usando fragmentos de código. Todo lo que tiene que hacer es copiarlos y pegarlos en el archivo functions.php . Para conocer otras opciones para personalizar el botón Agregar al carrito, consulte esta guía completa.

1. Cambiar el texto del botón Agregar al carrito

Similar al mensaje de agregar al carrito, puede cambiar el texto en el botón Agregar al carrito. Simplemente vaya a Apariencia > Editor de temas, abra el archivo functions.php y agregue el siguiente fragmento de código.

 add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');
función QL_customize_add_to_cart_button_woocommerce(){
return __('Comprar este artículo', 'woocommerce');
}

Podrá ver que el texto en el botón Agregar al carrito cambia una vez que obtenga una vista previa en su sitio web.

En este caso, estamos cambiando el texto del botón Agregar al carrito a "Comprar este artículo", pero puede personalizar el código y agregar el texto que desee. No olvide actualizar el archivo después de terminar los cambios.

2. Redirigir a la página del carrito desde el botón Agregar al carrito

Otra alternativa es redirigir a sus clientes a la página del carrito tan pronto como agreguen un producto a su carrito y muestren los mensajes de agregar al carrito.

Todo lo que necesita hacer es ir a WooCommerce> Configuración y abrir la pestaña Productos . Luego, marque la opción para Redirigir a la página del carrito después de una adición exitosa en la sección Comportamiento de Agregar al carrito . No olvides guardar los cambios .

Ahora, inicie sesión en su sitio web como cliente o en una ventana de incógnito y agregue un producto al carrito. Verá que es redirigido a la página del carrito tan pronto como agregue el artículo a su carrito.

Estos son solo algunos ejemplos para personalizar el botón Agregar al carrito, pero hay mucho más que puede hacer. Para obtener más información al respecto, consulte nuestra guía detallada para personalizar el botón Agregar al carrito en WooCommerce.

Conclusión

En general, editar los mensajes de agregar al carrito puede ser muy útil para brindar a sus clientes información adicional y alentarlos a comprar más productos en su tienda. La mayoría de las tiendas dejan los mensajes predeterminados, por lo que se destacará de sus competidores.

En este artículo, hemos aprendido diferentes métodos para cambiar el mensaje de agregar al carrito en WooCommerce usando fragmentos de código. Con suerte, esto lo ayudará a aumentar sus ventas y aumentar las tasas de conversión.

Los fragmentos de código que hemos usado son sencillos. Siéntase libre de tomarlos como base y personalizarlos para aplicarlos a su sitio. Simplemente puede cambiar el texto de los mensajes, agregar enlaces a diferentes partes de su sitio o incluso eliminar por completo los mensajes de agregar al carrito. Además de eso, hemos visto algunos ejemplos para personalizar el botón Agregar al carrito en su sitio.

Esperamos que este tutorial haya sido útil. Si disfrutó de la lectura, comparta esta publicación con sus amigos y ayúdelos a mejorar sus tiendas en línea.

Aquí tienes algunos artículos más que te pueden resultar interesantes:

• Cómo ocultar y eliminar el botón Agregar al carrito en WooCommerce
• Cómo personalizar la página del carrito de WooCommerce
• ¿El botón Agregar al carrito de WooCommerce no funciona? ¡Como arreglarlo!
• Cómo agregar el botón Agregar al carrito en las páginas de Divi Shop

¿Ha personalizado los mensajes de agregar al carrito en sus tiendas? ¿Qué hiciste? ¡Háganos saber en los comentarios a continuación!