Cómo cambiar el mensaje No hay productos en el carrito

No es ningún secreto que la personalización de su tienda en línea le permite destacarse de sus competidores. Hay algunas cosas obvias que puede editar, como las páginas de productos, la página de la tienda, la página del carrito o las páginas de pago. Sin embargo, a menudo se pasan por alto otras cosas que tienen un gran impacto en su sitio. En esta guía, le mostraremos diferentes formas de cambiar el mensaje "No hay productos en el carrito" .

Anteriormente hemos visto cómo puedes personalizar algunos elementos de tu tienda en línea que no son tan obvios. Por ejemplo, hemos visto cómo puede cambiar los mensajes de error al finalizar la compra o mostrar categorías en la página de la tienda. Lo mismo sucede con el mensaje “No hay productos en el carrito”. La mayoría de las tiendas dejan las opciones predeterminadas, por lo que al optimizarlas se destacará y obtendrá una ventaja sobre sus competidores.

Antes de ver cómo cambiar ese mensaje, echemos un vistazo a cuál es ese mensaje y por qué debería cambiarlo.

¿Qué es el mensaje "No hay productos en el carrito"?

Cuando abra una tienda de comercio electrónico por primera vez, su carrito estará vacío ya que aún no ha agregado ningún artículo al carrito. Del mismo modo, también estará vacío si agrega algunos artículos al carrito, pero luego los elimina o los compra.

En estos casos, de forma predeterminada, recibirá el siguiente mensaje cuando abra la página del carrito: "Su carrito está actualmente vacío". Esto generalmente se llama el mensaje "No hay productos en el carrito".

Además de ver esa alerta en la página del carrito, también puede encontrarla en el mini carrito si ha agregado el widget del carrito a cualquier área de widgets de su tienda como un mini carrito.

¿Por qué cambiar el mensaje “No hay productos en el carrito”?

Puede haber varias razones por las que desee cambiar este mensaje. Primero, puede personalizar el texto para que sea más acogedor para sus clientes. Un texto que diga “ ¡Tu carrito está vacío! ¡Por favor considere revisar nuestros productos destacados! ” por ejemplo, tiene un tono más cálido que el predeterminado. De esta manera, estás invitando a tus visitantes a visitar otras páginas de tu tienda. Solo unas pocas tiendas en línea hacen esto, por lo que también se destacará de sus competidores.

Además, puede traducir toda su tienda a un idioma en particular, pero es posible que su complemento de traducción no traduzca ese mensaje correctamente. En este caso, personalizar manualmente el mensaje "No hay productos en el carrito" le brinda un mejor control.

Aunque tiene muchas opciones de personalización, WooCommerce no te permite personalizar este mensaje por defecto. Sin embargo, en esta guía, le mostraremos cómo puede personalizar el mensaje "No hay productos en el carrito".

Cómo cambiar el mensaje "No hay productos en el carrito"

Hay 3 formas principales de editar este mensaje:

1. Programáticamente
   1. Editando el archivo function.php
   2. Editando el archivo mini-cart.php
2. con un complemento

En las siguientes secciones, veremos todos los pasos que debe seguir para cambiar el mensaje "No hay productos en el carrito". Estos métodos implican configurar sus archivos de WordPress/WooCommerce, por lo que recomendamos crear una copia de seguridad completa antes de comenzar.

1.1) Personaliza el mensaje "No hay productos en el carrito" editando el archivo functions.php

Para el primer método, usaremos un gancho de WooCommerce en su archivo functions.php . Este proceso simplemente requiere que abra su editor de archivos de temas y agregue algunas líneas de código a su archivo function.php .

Antes de continuar, le recomendamos que cree un tema secundario de WordPress si aún no tiene uno. Los temas secundarios son una excelente manera de agregar ganchos y secuencias de comandos personalizados a sus archivos de temas mientras se asegura de que puede revertir los cambios en cualquier momento. Estos cambios persisten incluso si actualiza su tema o los archivos del tema original. Si no desea crear uno manualmente, también puede usar cualquiera de estos complementos de temas secundarios.

Comencemos abriendo su Panel de administración de WordPress y yendo a Apariencia> Editor de temas. Luego, haga clic en el archivo functions.php en la barra lateral derecha de Archivos de temas como se muestra a continuación.

Usando el editor en el medio, puede agregar el siguiente script a su archivo functions.php :

 remove_action('woocommerce_cart_is_empty', 'wc_empty_cart_message', 10);
add_action('woocommerce_cart_is_empty', 'custom_empty_cart_message', 10);

función custom_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="carrito-vacío">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Insertar mensaje de carrito vacío aquí', 'woocommerce' ) ) );
eco $html. '</p></div>';
}

[Fragmento de código tomado de aquí.]

Este fragmento eliminará el texto predeterminado del carrito vacío de WooCommerce y usará otra función para agregar un texto personalizado en su lugar. Simplemente reemplace " Insertar mensaje de carrito vacío aquí " con el texto que desee para su mensaje "No hay productos en el carrito".

Por ejemplo, si desea que el mensaje diga " Su carrito está actualmente vacío, ¡le recomendamos que consulte nuestros productos destacados!", Puede usar este código:

 remove_action('woocommerce_cart_is_empty', 'wc_empty_cart_message', 10);
add_action('woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10);

función quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="carrito-vacío">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Tu carrito está actualmente vacío, te recomendamos revisar nuestros productos destacados!', 'woocommerce' ) ) );
eco $html. '</p></div>';
} 

Recuerde actualizar el archivo y debería ver este resultado en la parte delantera:

Vimos que en el mini carrito también puede aparecer el mensaje “No hay productos en el carrito”. Veamos cómo cambiarlo.

1.2) Cambie el texto "No hay productos en el carrito" editando el archivo mini-cart.php

También puedes optar por personalizar el mensaje “No hay productos en el carrito” que aparece en el mini carrito . En lugar de usar una función para esto, simplemente puede reemplazar el texto del mini carrito vacío en sus archivos de plantilla de WooCommerce .

Para hacer esto, debe configurar sus archivos de plantilla de WooCommerce yendo a Complementos> Editor de complementos en su Panel de administración de WP.

Luego, use la opción Seleccionar complemento para editar para seleccionar WooCommerce y presione Seleccionar . Después de eso, haga clic en Plantillas> Carrito> mini-cart.php en Archivos de complemento.

De forma predeterminada, en la parte inferior del carrito debería ver las siguientes líneas de código:

 <?php más: ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( 'No hay productos en el carrito', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?>

Simplemente puede editar este código reemplazando el texto " No hay productos en el carrito " con un texto personalizado. Por ejemplo, para cambiar el texto a ' Considere agregar nuevos productos ', debe usar este código:

 <?php más: ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e('Considere agregar nuevos productos', 'woocommerce'); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?> 

Recuerde guardar los cambios y luego debería ver los cambios en la parte delantera.

2. Cómo cambiar el mensaje "No hay productos en el carrito" con un complemento

Anteriormente mencionamos que a veces traduces tu tienda a un idioma en particular, pero el mensaje "No hay productos en el carrito" no se traduce. Veamos cómo puedes cambiar ese texto con un complemento de traducción.

Hay muchos complementos para habilitar traducciones para cadenas personalizadas. Para esta demostración, usaremos el complemento Loco Translate . Es uno de los mejores complementos de traducción para WordPress y tiene un editor de traducción incorporado en el tablero. Esto puede ser muy conveniente al personalizar el mensaje "No hay productos en el carrito" en su tienda.

1. Instalar y activar el complemento

Primero, instale el complemento, yendo a Complementos> Agregar nuevo. Ingrese las palabras clave para el complemento, instálelo y actívelo.

Alternativamente, puede instalarlo manualmente. Si no está familiarizado con ese proceso, consulte nuestra guía sobre cómo instalar manualmente un complemento de WordPress.

Una vez que haya activado el complemento, continúe con el siguiente paso.

2. Traduce el mensaje "Tu carrito está actualmente vacío"

Ahora es el momento de traducir algunas cadenas. Primero, dirígete a Loco Translate > Complementos en tu panel de administración de WP. Haga clic en WooCommerce en la lista de complementos para mostrar todas las cadenas disponibles para traducir y elija el idioma al que traducirá.

También puede agregar el idioma requerido para el mensaje de su carrito desde aquí. Simplemente haga clic en Nuevo idioma y agregue el idioma deseado.

Luego, use la opción Filtrar traducciones para buscar la cadena correcta que desea traducir. Para cambiar el texto "No hay productos en el carrito", simplemente escriba " Su carrito está actualmente vacío" . Luego, haga clic en el Texto de origen en los resultados de búsqueda y agregue su cadena personalizada a la sección de traducción.

Por ejemplo, configuremos una traducción personalizada para español para nuestro sitio web de prueba:

Una vez que termine la traducción, presione Guardar. Ahora ve al front-end, cambia el idioma de tu sitio y verás el nuevo mensaje traducido.

3. Traduce el mensaje "No hay productos en el carrito"

Usando el mismo método, puede traducir cualquier cadena simplemente buscando el texto que desea cambiar. En esta sección, nos centraremos en la cadena "No hay productos en el carrito" , pero puede establecer una traducción personalizada para el texto del minicarrito o cualquier mensaje que desee.

Como vimos antes, ve a Loco Translate > Plugins > WooCommerce y elige el idioma al que quieres traducir la cadena. Luego, busque "No hay productos en el carrito", seleccione la cadena y agregue la traducción deseada.

Recuerde guardar sus cambios, y debería ver el resultado en la parte delantera:

Si desea obtener más información sobre cómo cambiar el idioma de su sitio, consulte nuestra guía completa sobre cómo cambiar los idiomas de WordPress.

Bonificación: Cómo cambiar el texto Proceder al pago

Además de personalizar el mensaje "No hay productos en el carrito", hay muchos otros textos que puedes cambiar para aprovechar al máximo cada punto de contacto que los clientes tienen en tu tienda. Por ejemplo, puede editar textos adicionales como Proceder al pago, mensajes Agregar al carrito y muchos otros. En la sección, nos centraremos en cómo cambiar el texto Proceder to Checkout usando una función simple de WooCommerce.

NOTA : Como editaremos algunos archivos principales, recomendamos crear una copia de seguridad completa de su sitio y usar un tema secundario.

Para personalizar el texto Proceed to Checkout, agregaremos algunas líneas de código al archivo functions.php . Para hacerlo, ve a Apariencia > Editor de temas y haz clic en functions.php en la barra lateral de archivos de temas.

Ahora pegue el siguiente código mientras simplemente cambia la sección " Insertar-texto-de-pago-aquí " con su mensaje personalizado.

 función quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="botón de pago button alt wc-forward">
<?php esc_html_e( 'Insertar-Checkout-Text-Here', 'woocommerce' ); ?>
</a>
<?php
}

Por ejemplo, si desea que el mensaje diga " Por favor, muévase a la caja aquí ", use el siguiente fragmento:

 función quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="botón de pago button alt wc-forward">
<?php esc_html_e( 'Por favor, muévase al pago aquí', 'woocommerce' ); ?>
</a>
<?php
} 

Esto debería darte este resultado en la parte delantera:

Este es un ejemplo, pero hay mucho más que puede hacer para personalizar este texto. Para obtener más información, consulta nuestro tutorial sobre cómo cambiar el texto Proceder to Checkout . Esta guía explica por qué debería considerar cambiar ese texto, así como las diferentes formas de hacerlo.

Hay muchas más personalizaciones que puedes realizar en tu tienda. Si eso es algo que le interesa, eche un vistazo a algunas de nuestras guías para optimizar el pago de WooCommerce, crear un pago de una página e incluso personalizar la página de pago de WooCommerce. Del mismo modo, puede usar complementos como WooCommerce Direct Checkout y WooCommerce Checkout Manager para ayudarlo a mejorar el proceso de pago.

Conclusión

En general, personalizar el mensaje "No hay productos en el carrito" le permite personalizar el viaje de su cliente y brindar una mejor experiencia de compra. La mayoría de los propietarios de tiendas suelen pasar esto por alto, por lo que puede ayudarlo a destacarse de sus competidores y aumentar sus ventas.

En esta guía, le mostramos diferentes formas de cambiar el mensaje "No hay productos en el carrito" en WooCommerce:

• Personalizando el archivo function.php
• Editando el archivo mini-cart.php
• con un complemento

Ahora debería poder editar el mensaje y también ajustar las traducciones que faltaban.

¿Has editado el texto "No hay productos en el carrito"? ¿Tuviste algún problema siguiendo esta guía? Háganos saber en los comentarios a continuación.

Por último, si quieres saber más sobre cómo personalizar más elementos de tu tienda WooCommerce, consulta algunos de estos artículos:

• Cómo eliminar la pestaña Información adicional en WooCommerce
• 3 métodos para personalizar la página del carrito de WooCommerce
• Cambio de moneda en WooCommerce: la guía completa
• Cómo personalizar la página de la tienda de WooCommerce