Cómo Agregar Insignias de Producto en WooCommerce (Rápido y Fácil)

Cada tienda en línea exitosa tiene algo en común: facilitan que los clientes encuentren sus mejores productos.

Pero aquí está el desafío: cuando todos tus productos se ven iguales, ¿cómo saben los compradores cuáles están en oferta, se agregaron recientemente o son tus principales recomendaciones? Las insignias de producto son la respuesta.

Estos pequeños elementos visuales comunican instantáneamente qué tiene de especial cada producto. Una simple insignia de 'Nuevo' puede generar curiosidad, mientras que una etiqueta de '50% de descuento' crea urgencia.

Según nuestra experiencia ayudando a los propietarios de tiendas a optimizar sus sitios de WooCommerce, las insignias de producto son uno de esos pequeños cambios que brindan grandes resultados.

Hemos probado varios enfoques y encontramos 2 métodos que funcionan perfectamente tanto para principiantes como para usuarios experimentados. Sumerjámonos en las formas más fáciles de empezar.

¿Qué son las insignias de producto de WooCommerce?

¿Alguna vez has notado esas pequeñas etiquetas de 'Oferta' o 'Nuevo' que aparecen en los productos mientras compras en línea?

Esas son insignias de producto, y son increíblemente útiles para hacer que ciertos artículos destaquen en tu tienda en línea.

Piénsalos como calcomanías virtuales que atraen la atención de tus clientes a detalles importantes del producto como ofertas, novedades o promociones por tiempo limitado.

Hemos visto a dueños de tiendas usar insignias de producto de maneras muy creativas para mostrar ofertas especiales, destacar los más vendidos o marcar artículos que se están agotando.

Ahora, si ya estás usando WooCommerce, es posible que hayas notado que viene con una función básica de insignia de oferta que aparece automáticamente cuando reduces el precio de un producto.

Si bien la insignia de oferta de WooCommerce funciona bien para necesidades simples, seamos honestos: es bastante limitada en cuanto a lo que puedes hacer con ella.

No puedes cambiar fácilmente el aspecto de la insignia, agregar nuevos tipos de insignias o controlar exactamente dónde aparecen en tus imágenes de producto.

Mientras tanto, las insignias de producto personalizadas te permiten mostrar más la personalidad de tu marca. Lo más importante, sin embargo, es que las insignias originales pueden atraer la atención de manera más efectiva a productos especiales.

De esa manera, puedes generar más ventas en tu tienda en línea. 💰

En esta guía, te mostraremos 2 métodos probados para agregar y personalizar insignias de producto en WooCommerce. Ambos enfoques te darán control total sobre cómo se ven y funcionan.

Puedes usar los enlaces rápidos a continuación para saltar a tu método preferido:

• Método 1: Usa YITH WooCommerce Badge Management (Más personalizable)
• Método 2: Usa código personalizado (Gratis y simple)
• Descubre más consejos y trucos para WooCommerce
• Preguntas frecuentes: Insignias de producto en WooCommerce

Método 1: Usa YITH WooCommerce Badge Management (Más personalizable)

Empecemos con nuestra herramienta favorita para agregar insignias de producto personalizadas a tu tienda WooCommerce.

Recomendamos usar YITH WooCommerce Badge Management porque hace que sea súper fácil agregar y personalizar insignias de productos en tu tienda en línea.

Además, hemos probado muchos plugins de YITH a lo largo de los años, como los de agregar suscripciones y videos de productos, y siempre funcionan muy bien para nuestros usuarios.

¿Quieres mostrar una insignia especial durante las fiestas decembrinas? ¿O tal vez mostrar cuánto dinero ahorrarán los clientes? Este plugin puede hacer todo eso. Incluso puedes configurar insignias para que aparezcan en ciertos momentos y luego ocultarlas.

Puedes empezar con la versión gratuita o premium del plugin. El plan gratuito es perfecto si solo quieres agregar texto simple o insignias de imagen a tus productos.

En esta guía, te mostraremos cómo usar la versión premium, pero la mayoría de los pasos funcionarán igual para ambas. Solo recuerda que algunas funciones geniales, como las insignias que muestran automáticamente los montos de descuento, solo vienen con la versión premium.

¿Listo para empezar? Primero, deberás comprar el plugin en el sitio web de YITH.

Luego, inicia sesión en tu cuenta de YITH, ve a la pestaña 'Licencias y Descargas' y haz clic en el botón 'Descargar Plugin' para descargar el archivo.

Aquí tienes un consejo: no cierres esta página después de descargarla porque necesitarás la clave de licencia que se muestra allí.

A continuación, ve a tu panel de WordPress e instala el plugin. Para obtener más información, tenemos una guía paso a paso sobre cómo instalar un plugin de WordPress.

Cuando esté activo, verá una pantalla de configuración que le pedirá su correo electrónico de YITH y su clave de licencia. Simplemente cópielos del sitio web de YITH y haga clic en ‘Activar licencia.’

Una vez que vea el mensaje que dice que su licencia está activa, ¡estará listo!

Ahora, haga clic en ‘Ir al panel del plugin’ y podrá comenzar a crear su primera insignia personalizada.

Paso 1: Ocultar la insignia de oferta predeterminada de WooCommerce

Primero, necesitamos ocultar la insignia de oferta incorporada de WooCommerce para que no choque con nuestras insignias de producto personalizadas. 

El proceso es muy sencillo. Vaya a su panel de WordPress y haga clic en YITH » Gestión de insignias. Luego, navegue a la pestaña ‘Configuración general’.

Aquí, encontrará una opción que dice ‘Ocultar insignia “En oferta” de WooCommerce’. Continúe y actívela.

Luego, en ‘Ocultar “En oferta” en:’, seleccione ‘Todos los productos’ para asegurarse de que la insignia predeterminada no aparezca en ninguna parte de su tienda.

Mientras esté en la configuración, es posible que note otras opciones útiles. Puede elegir ocultar sus insignias personalizadas en ciertos lugares, como la barra lateral o las páginas de productos individuales.

Esto es genial si desea mantener su tienda limpia y organizada. Por ejemplo, si su sitio móvil se siente demasiado abarrotado, también puede ocultar las insignias allí.

No olvide hacer clic en el botón ‘Guardar opciones’ en la parte inferior de la página cuando haya terminado.

Paso 2: Crear su insignia personalizada

Ahora viene la parte divertida: ¡crear su primera insignia de producto personalizada en WooCommerce!

Diríjase a la pestaña ‘Insignias’ y haga clic en el botón ‘Crear insignia’ para comenzar.

El plugin le ofrece 4 tipos diferentes de insignias para elegir: insignia de texto, insignia de imagen, insignia CSS o insignia avanzada para productos en oferta.

Cada tipo le permite crear formas únicas de destacar sus productos. Por ejemplo, si desea marcar productos como “Novedad” o “Apto para veganos”, las tres primeras opciones funcionan muy bien.

Pero aquí tienes un consejo: si estás creando insignias de descuento, te recomendamos encarecidamente que uses la opción avanzada, que se actualiza automáticamente según los cambios de precio de tu producto.

Después de elegir tu tipo de insignia, dale un nombre que te ayude a recordar para qué es.

Si has elegido una insignia de imagen, CSS o avanzada, verás una colección completa de diseños de insignias prefabricados directamente en el plugin.

Puedes elegir la que más te guste. Estas insignias listas para usar te ahorran tiempo y aún puedes personalizarlas para que coincidan con el estilo de tus páginas de WooCommerce.

Este plugin realmente brilla en sus opciones de personalización. Dependiendo del tipo de insignia que hayas elegido, puedes ajustar todo tipo de configuraciones para que tu insignia se vea perfecta en las imágenes de tus productos.

¿Quieres cambiar el color? Fácil.

¿Necesitas ajustar qué tan transparente es? No hay problema.

Incluso puedes rotar la insignia o moverla en tus productos hasta que esté en el lugar correcto.

Para nuestro ejemplo, hicimos que la insignia resaltara mucho al cambiar su color a rojo y colocarla en la esquina superior derecha de la imagen del producto.

Estos pequeños ajustes pueden marcar una gran diferencia en la efectividad con la que tus insignias captan la atención de las personas.

Cuando estés satisfecho con cómo se ve todo, simplemente haz clic en ‘Guardar insignia’ para terminar.

Paso 3: Crea una regla para mostrar tu insignia

Ahora que hemos creado nuestra insignia personalizada, vamos a indicarle a WooCommerce exactamente dónde y cuándo mostrarla.

Dirígete a la pestaña ‘Reglas de insignias’ y haz clic en ‘Establecer regla’.

Piensa en las reglas como instrucciones que le dicen a tus insignias cuándo aparecer en las imágenes de tus productos.

El plugin te ofrece 4 formas principales de controlar dónde aparecen tus insignias: insignia de productos, insignia de categoría, insignia de etiqueta y insignia de clase de envío.

Puedes elegir la regla de ‘Insignia de productos’ para agregar insignias a artículos específicos o la regla de ‘Insignia de categoría’ para cubrir categorías de productos completas.

Mientras tanto, la regla de insignia de etiqueta muestra insignias en productos que comparten la misma etiqueta de WooCommerce, y la regla de insignia de clase de envío muestra insignias basadas en las opciones de envío.

Cada regla se dirige a diferentes aspectos del producto, pero todas funcionan de manera similar. Por lo tanto, solo necesitas elegir lo que mejor se adapte a tus necesidades.

Usemos la regla de insignia de productos para este ejemplo, ya que es la opción más común.

A continuación, dale un nombre sencillo a tu regla para que puedas encontrarla fácilmente más tarde.

Luego, busca la configuración ‘Mostrar insignia en:’. Aquí es donde decides qué productos obtienen tu insignia. Puedes elegir mostrarla en todos los productos, adiciones recientes, artículos en oferta, productos populares destacados, o incluso solo en productos que estén en stock.

Digamos que estás creando una regla para artículos en oferta. Si seleccionas ‘Productos en oferta’, tu insignia aparecerá automáticamente cada vez que marques un producto como en oferta. ¡Así de simple!

Pero algunas opciones vienen con más configuraciones para que las configures. Por ejemplo, si eliges ‘Solo productos recientes’, puedes configurar que las insignias aparezcan en artículos agregados en los últimos días (como 7, 14 o 30 días).

Esto hace que sea súper fácil resaltar automáticamente las novedades en tu tienda sin tener que agregar insignias manualmente a cada producto.

A veces, es posible que desees que ciertos productos no tengan insignia. Ahí es donde la configuración ‘Excluir productos’ resulta útil.

Simplemente habilita esta configuración y escribe los nombres de los productos para los que no deseas mostrar la insignia. Estos artículos permanecerán sin insignia incluso si coinciden con tus otras reglas.

A continuación, selecciona qué diseño de insignia deseas usar en el menú desplegable ‘Insignia a asignar’.

Ahora, aquí es donde se pone realmente flexible. Puedes programar cuándo aparecen tus insignias y elegir quién las ve.

La opción ‘Programar regla’ es perfecta para ofertas por tiempo limitado.

Cuando la habilites, el plugin te pedirá que establezcas las fechas de inicio y fin para tus insignias.

Y si deseas mostrar insignias especiales a ciertos clientes, como mostrar una insignia de “Descuento VIP” solo a los clientes más leales, también puedes hacerlo.

Para hacer esto, solo selecciona 'Solo usuarios o roles de usuario específicos' en la configuración de 'Mostrar insignia a'. Luego, escribe tus roles de usuario preferidos o nombres de usuario individuales debajo.

Cuando todo se vea bien, simplemente haz clic en 'Guardar regla' ¡y listo!

Siéntete libre de visitar el front-end de tu tienda para ver tus nuevas insignias de producto en acción.

Si estás usando el tipo de insignia avanzado para artículos en oferta, verás que muestra tanto el porcentaje de descuento como el dinero real ahorrado, lo que ayuda a los clientes a identificar rápidamente las mejores ofertas.

Método 2: Usa código personalizado (Gratis y simple)

Si no necesitas las opciones avanzadas del primer método, o si buscas una opción completamente gratuita, tenemos un método de código simple que no te costará nada.

Y si no te sientes cómodo con el código, ¡no te preocupes! Usaremos el plugin WPCode para que esto sea súper fácil y seguro. Te permite agregar fragmentos de código personalizados en WordPress sin ser un desarrollador o arriesgarte a romper tu sitio web.

Usaremos la versión gratuita de WPCode para este tutorial porque funciona perfectamente para nuestras necesidades. Dicho esto, existe una versión premium con características interesantes como generación de código con IA y modo de prueba.

Para más información, solo consulta nuestra reseña detallada de WPCode.

Primero, necesitas instalar el plugin de WordPress en tu área de administrador.

Luego, ve a Fragmentos de código » + Agregar fragmento. Pasa el cursor sobre la sección 'Agregar tu código personalizado (Nuevo fragmento)' y luego haz clic en el botón '+ Agregar fragmento personalizado'.

A continuación, elige 'Fragmento de PHP' cuando se te pregunte por el tipo de código.

Esto le dice a WordPress qué tipo de código estamos usando.

Ahora, tienes que darle a tu fragmento un nombre que te ayude a recordar lo que hace.

Dado que este código eliminará la insignia de oferta predeterminada de WooCommerce y agregará insignias de productos nuevos e insignias de descuento dinámicas, podrías llamarlo algo como "Insignias Personalizadas de WooCommerce".

Una vez hecho esto, pega el fragmento de código que proporcionamos a continuación en el cuadro 'Vista previa del código'.

Este código hace algo realmente genial. Calcula automáticamente los porcentajes de descuento y los muestra en la insignia de oferta. Además, agrega una insignia de "Nuevo" a los productos agregados en los últimos 7 días.

// Remove default WooCommerce sale flash badge
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

// Add custom badges to products
add_action( 'woocommerce_before_shop_loop_item_title', 'add_custom_product_badges', 10 );
function add_custom_product_badges() {
    global $product;

    // Initialize a variable to track whether a badge has been displayed
    $badge_displayed = false;

    // For products with any amount of discount percentage (1% or more)
    if ( $product->is_on_sale() ) {
        // Get regular and sale prices
        $regular_price = floatval( $product->get_regular_price() );
        $sale_price    = floatval( $product->get_sale_price() );

        // Handle variable products
        if ( $product->is_type('variable') ) {
            // Get variation prices
            $regular_price = floatval( $product->get_variation_regular_price( 'max', true ) );
            $sale_price    = floatval( $product->get_variation_sale_price( 'min', true ) );
        }

        // Calculate discount percentage if regular price is valid
        if ( $regular_price > 0 ) {
            $discount_percentage = ( ( $regular_price - $sale_price ) / $regular_price ) * 100;

            // Display badge if discount is 1% or more
            if ( $discount_percentage >= 1 ) {
                echo '<span class="product-badge sale-product">' . round( $discount_percentage ) . '% off!</span>';
                $badge_displayed = true; // Badge has been displayed
            }
        }
    }

    // Only show the "New" badge if no other badge has been displayed
    if ( ! $badge_displayed ) {
        // For "New" products added in the last 7 days
        $post_date  = get_the_time( 'Y-m-d', $product->get_id() );
        $post_stamp = strtotime( $post_date );
        $newness    = 7; // Number of days the product is considered new

        // Check if the product is new
        if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $post_stamp ) {
            echo '<span class="product-badge new-product">New</span>';
            $badge_displayed = true;
        }
    }
}

¿Quieres ajustar cuánto tiempo se considera un producto "nuevo"? Simplemente busca la línea donde dice $newness = 7 en el código. Puedes cambiar ese número 7 por la cantidad de días que desees, como 14 para dos semanas o 30 para un mes.

Para terminar, haz clic en el botón 'Inactivo' hasta que cambie a 'Activo', luego presiona 'Guardar fragmento'.

A continuación, necesitamos dar estilo a nuestras insignias para que se vean geniales en tus productos. Agreguemos algo de CSS para ajustar su apariencia.

Para agregar un nuevo fragmento, sigue los mismos pasos que antes, pero esta vez, elige 'Fragmento de CSS' cuando se te pregunte.

Nombra tu fragmento con algo descriptivo, como "Estilos de Insignias de Producto". Esto te ayudará a encontrarlo fácilmente si necesitas hacer cambios más adelante.

Aquí está el código CSS que hará que tus insignias se vean profesionales. Simplemente pega esto en el cuadro 'Vista previa del código':

/* Common styles for all product badges */
.product-badge {
    position: absolute;
    top: -10px;      /* Position at the top edge */
    right: -10px;    /* Position at the right edge */
    padding: 12px 16px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 99;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Styles for the "New" badge */
.new-product {
    background-color: #4CAF50; /* Green background */
}

/* Styles for the "Sale" badge */
.sale-product {
    background-color: #FF0000; /* Red background */
}

Analicemos lo que puedes personalizar en este código.

¿Quieres tus insignias en un lugar diferente? Para hacer esto, puedes cambiar los valores de top y right. Por ejemplo, cambiar top: -10px a top: 10px moverá la insignia hacia abajo.

¿No te gustan los colores? Es súper fácil cambiarlos. Simplemente busca las líneas de background-color y reemplaza los códigos de color.

Por ejemplo, si quieres una insignia de oferta azul en lugar de una roja, cambia #FF0000 por #0000FF. También puedes hacer que las insignias sean más grandes o más pequeñas ajustando el valor de font-size.

¿Quieres aprender más sobre cómo ajustar estos estilos? Consulta nuestra guía para principiantes sobre CSS en WordPress.

Una vez que hayas terminado, simplemente haz clic en el botón 'Inactivo' para que se convierta en 'Activo', luego presiona 'Guardar fragmento'.

¡Eso es todo!

Tus insignias ahora deberían aparecer en las imágenes de tus productos. Aquí tienes un ejemplo de cómo se ve la nuestra usando nuestro código CSS:

Descubre más consejos y trucos para WooCommerce

Ahora que sabes cómo mostrar insignias de productos en WooCommerce, es posible que desees explorar otras formas de mejorar tu tienda en línea. Aquí tienes algunas guías útiles que recomendamos:

• Aumenta las ventas con ventas adicionales inteligentes: aprende cómo promocionar estratégicamente productos relacionados y aumentar el valor promedio de tu pedido a través de tácticas efectivas de venta adicional.
• Recompensa las reseñas de clientes con cupones – Descubre cómo enviar automáticamente cupones de descuento a los clientes que dejan reseñas de productos, fomentando más comentarios y compras repetidas.
• Muestra recomendaciones de productos inteligentes – Descubre cómo mostrar sugerencias de productos para disparar tus ventas de WooCommerce.
• Muestra productos comprados juntos frecuentemente – Aprende cómo mostrar productos que se compran juntos frecuentemente en WooCommerce para aumentar las ventas.
• Agrega opciones avanzadas de filtrado de productos – Aprende a ayudar a los clientes a encontrar exactamente lo que buscan con filtros de productos personalizables que hacen las compras más fáciles y rápidas.
• Crea una función de lista de deseos para clientes – Ve cómo agregar una función de lista de deseos puede aumentar la participación y dar a los compradores una razón para regresar a tu tienda, al tiempo que proporciona información valiosa sobre las preferencias de los clientes.
• Oculta precios en WooCommerce – Aprende cómo ocultar precios para clientes mayoristas, catálogos en línea y artículos de lujo, y pide a los compradores que te contacten o inicien sesión en su lugar.

Preguntas frecuentes: Insignias de producto en WooCommerce

Aquí tienes algunas preguntas frecuentes de nuestros lectores sobre cómo agregar insignias de producto en WooCommerce:

¿Puedo crear insignias personalizadas como ‘Oferta’, ‘Nuevo’ o ‘Stock Limitado’?

Sí, la mayoría de los plugins de insignias de producto te permiten diseñar insignias personalizadas con tu propio texto, colores e íconos. Esto significa que no estás limitado a etiquetas genéricas como ‘Oferta’ o ‘Nuevo’.

Por ejemplo, puedes crear insignias como:

• ¡Tendencia Ahora!
• ¡Solo quedan 2!
• Selección del Personal
• 100% Orgánico

Algunas herramientas incluso te permiten subir tus propias imágenes de insignias o usar etiquetas dinámicas basadas en datos de stock o precios.

¿Funcionan las insignias de producto en dispositivos móviles?

Sí, la mayoría de los plugins de insignias son responsivos, lo que significa que tus insignias aparecerán correctamente en todos los tamaños de pantalla, incluyendo teléfonos inteligentes y tabletas.

Sin embargo, la ubicación y el diseño de la insignia pueden depender de tu tema.

Es una buena idea probar tu tienda en dispositivos móviles después de agregar insignias para asegurarte de que no se superponen con contenido importante o dificultan la visualización de las imágenes de los productos.

¿Puedo mostrar varias insignias en el mismo producto?

Depende del plugin o método que estés utilizando. Por ejemplo, el plugin YITH WooCommerce Badge Management admite varias insignias por producto, mientras que otros pueden permitir solo una a la vez.

Si deseas mostrar varias etiquetas como ‘Oferta’ y ‘El Más Vendido’ juntas, busca un plugin que ofrezca superposición o apilamiento de insignias. Siempre verifica la configuración o la documentación del plugin para confirmar que esta función sea compatible.

¿Las insignias de producto ralentizarán mi tienda WooCommerce?

Por lo general no, especialmente si utilizas un plugin bien codificado. Sin embargo, evita usar archivos de imagen grandes para las insignias y no sobrecargues tus páginas de productos con múltiples insignias o animaciones.

Para mantener tu tienda rápida:

• Elige plugins ligeros y optimizados
• Usa insignias basadas en texto cuando sea posible
• Limita el uso de insignias a productos o categorías destacados

Esperamos que este artículo te haya ayudado a aprender cómo agregar insignias de producto en WooCommerce. También podrías querer revisar nuestras selecciones expertas de los mejores plugins de cuadrícula de productos para WooCommerce y nuestra guía sobre cómo acelerar el rendimiento de WooCommerce.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.