Añadir cartel novedad en Woocommerce. Códigos y tutorial

Añadir la etiqueta o cartel Novedad en los productos de WooCommerce [Tutorial]

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 

Para tus usuarios es muy importante saber cuáles son los productos más recientes en tu tienda online. De esta manera puedes mejorar el nivel de visitantes recurrentes a tu sitio web, aumentando su fidelidad. Vamos a enseñarte como añadir de una forma fácil y sencilla la etiqueta Nuevo dentro del catálogo productos de WooCommerce, de este modo tus visitantes podrán distinguir en tu tienda online los nuevos productos que hayas añadido a la tienda. No vas a necesitar instalar ningún plugin que ralentice tu WordPress.

 

Tabla de contenidos

  1. Añadir la etiqueta Nuevo en tus productos mediante functions.php
  2. Personalizar el estilo de la etiqueta Nuevo con CSS
  3. Controlar la antigüedad de los productos que son etiquetados como Nuevos

Añadir la etiqueta Nuevo en tus productos mediante functions.php

Para añadir la etiqueta Nuevo o Novedad en WooCommerce debes encontrar tu archivo functions.php de tu tema activo. Debes editarlo añadiendo el siguiente código al completo.

/*
 * Añade una etiqueta de nuevo en el catálogo de producto de WooCommerce
 */
add_action( 'woocommerce_before_shop_loop_item_title', function() {
	$postdate      = get_the_time( 'Y-m-d' ); // Post date
	$postdatestamp = strtotime( $postdate );  // Timestamped post date
	$newness       = 30;                      // Newness in days
	if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $postdatestamp ) {
		echo '<div class="etiqueta-nuevo">' . esc_html__( 'Novedad', 'total' ) . '</div>';
	}
}, 20 );

 Así debe quedar el código en tu archivo functions.php:

Personalizar el estilo de la etiqueta o cartel Nuevo en WooCommerce con CSS

Para cambiar el estilo debes añadir unas líneas de CSS a tu tema. Para ello dirígete a Apariencia y Personalizar dentro de tu menú de administración de WordPress. Verás un apartado llamado CSS Adicional. Aquí podrás añadir las líneas de código CSS que necesitarás para dar el aspecto que quieres a la etiqueta de Nuevo. Por defecto debe salirte así tras añadir el código:

Añadir la etiqueta novedad en WooCommerce sin plugins y personalizarla.

  • Añade un borde al cartel Novedad

Con el siguiente código CSS podras enmarcar la etiqueta Nuevo:

 

.etiqueta-nuevo {padding: 2px 9px;
    color: #ff7171;
    border: 1px solid #ff7171;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 9px;
}

 

Puedes cambiar el valor de #ff7171 y poner el color que desees (para saber el código hexadecimal puedes utilizar esta herramienta de Abobe):

Añadir la etiqueta novedad en WooCommerce sin plugins y personalizarla.

  • Añade un color de fondo al cartel Novedad

También puedes añadir la etiqueta con un color de fondo, para ello debes añadir el código CSS en el Personalizador:

 

.etiqueta-nuevo {
    padding: 2px 9px;
    color: #fff;
    border: 1px solid #ff7171;
    background: #ff7171;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 9px;}

 

Al igual que en el caso anterior, puedes modificar los colores por los que desees:

Color: es el color del texto.

Background: el color del fondo.

Boder: el color del borde.

Añadir la etiqueta novedad en WooCommerce sin plugins y personalizarla.

 

Controlar la antigüedad de los productos que son etiquetados como Nuevos

Una de las grandes ventajas del código que te hemos proporcionado, es que puedes determinar la antigüedad de los productos que consideraremos como nuevo y a los cuales se les añadirá el cartel Novedad. Por tanto no tendrás que estar activando ni desactivando casillas como ocurre con algunas plantillas que incluyen esta funcionalidad ya que todo está automatizado. Para ello debes cambiar la variable $newness. En lugar de 30 (días) coloca la antigüedad que consideres. Si tu tienda online se actualiza poco quizás con 60 días sea suficiente, si la actualizas todas las semanas puedes poner 7, de esta manera todos los productos con una antiguedad de al menos 7 días se mostrarán como nuevos en el catálogo. 

 

¿Tienes alguna duda con tu WooCommerce? consulta sin compromiso con nuestro servicio de soporte técnico para WordPress y te ayudaremos. 

Sobre el Autor
Author: Álvaro
WooCommerce & WordPress Manager
Álvaro forma parte del equipo de Rombo, especializado en el desarrollo de aplicaciones web en WordPress y WooCommerce, aunque su pasión ha sido Joomla! desde 2008 ¡Le encanta compartir sus conocimientos! Así que... ¡pregunta!

5 1 1 1 1 1 1 1 1 1 1 Valoracion 5.00 (2 Votos)

PATROCINADO

Agencia de Marketing Digital en Cádiz y Chiclana de la Forntera
Somos una Agencia de marketing digital 100% online orientada a resultados.