Hur man lägger till produktmärken i WooCommerce (snabbt och enkelt)

Varje framgångsrik webbutik har en sak gemensamt: de gör det enkelt för kunder att hitta sina bästa produkter.

Men här är utmaningen – när alla dina produkter ser likadana ut, hur vet shoppare vilka som är på rea, nyligen tillagda eller dina topprekommendationer? Produktmärken är svaret.

Dessa små visuella element kommunicerar omedelbart vad som är speciellt med varje produkt. Ett enkelt ‘New’-märke kan skapa nyfikenhet, medan en ‘50% Off’-etikett skapar brådska.

Baserat på vår erfarenhet av att hjälpa butiksägare att optimera sina WooCommerce-webbplatser, är produktersiktsmärken en av de små förändringar som ger stora resultat.

Vi har testat olika metoder och hittat 2 metoder som fungerar perfekt för både nybörjare och erfarna användare. Låt oss dyka ner i de enklaste sätten att komma igång.

Vad är WooCommerce produktmärken?

Har du någonsin lagt märke till de små 'Rea' eller 'Ny' etiketter som visas på produkter när du handlar online?

Det där är produktmärken, och de är otroligt användbara för att få vissa artiklar att sticka ut i din webbutik.

Tänk på dem som virtuella klistermärken som drar dina kunders uppmärksamhet till viktiga produktdetaljer som försäljning, nyheter eller tidsbegränsade erbjudanden.

Vi har sett butiksägare använda produktmärken på riktigt kreativa sätt för att visa upp specialerbjudanden, lyfta fram bästsäljare eller markera artiklar som är nära att ta slut.

Nu, om du redan använder WooCommerce, kanske du har märkt att den kommer med en grundläggande säljbricka som automatiskt visas när du sänker priset på en produkt.

Medan WooCommerce säljbricka fungerar bra för enkla behov, låt oss vara ärliga – den är ganska begränsad när det gäller vad du kan göra med den.

Du kan inte enkelt ändra hur märket ser ut, lägga till nya märkes-typer eller styra exakt var de visas på dina produktbilder.

Samtidigt tillåter anpassade produktmärken dig att visa ditt varumärkes personlighet mer. Viktigast av allt är dock att originella märken mer effektivt kan dra uppmärksamhet till specialprodukter.

På så sätt kan du driva fler försäljningar i din webbutik. 💰

I den här guiden går vi igenom 2 beprövade metoder för att lägga till och anpassa produktersiktsmärken i WooCommerce. Båda metoderna ger dig fullständig kontroll över hur de ser ut och fungerar.

Du kan använda snabblänkarna nedan för att hoppa till din föredragna metod:

• Metod 1: Använd YITH WooCommerce Badge Management (mer anpassningsbar)
• Metod 2: Använd anpassad kod (gratis och enkel)
• Upptäck fler WooCommerce-tips och tricks
• Vanliga frågor: Produktmärken i WooCommerce

Metod 1: Använd YITH WooCommerce Badge Management (mer anpassningsbar)

Låt oss börja med vårt favoritverktyg för att lägga till anpassade produktmärken i din WooCommerce-butik.

Vi rekommenderar att använda YITH WooCommerce Badge Management eftersom det gör det superenkelt att lägga till och anpassa produktmärken i din webbutik.

Dessutom har vi testat många YITH-plugins genom åren, som de för att lägga till prenumerationer och produktvideor, och de fungerar alltid utmärkt för våra användare.

Vill du visa ett speciellt märke under högtiderna? Eller kanske visa hur mycket pengar kunderna kommer att spara? Detta plugin kan göra allt det. Du kan till och med ställa in märken att visas vid vissa tider och dölja dem senare.

Du kan börja med antingen gratis- eller premiumversionen av pluginet. Gratisplanen är perfekt om du bara vill lägga till enkla text- eller bildmärken till dina produkter.

I den här guiden visar vi hur du använder premiumversionen, men de flesta steg kommer att fungera på samma sätt för båda. Kom bara ihåg att vissa coola funktioner, som märken som automatiskt visar rabattbelopp, bara finns i premiumversionen.

Redo att börja? Först måste du köpa pluginet från YITH:s webbplats.

Logga sedan in på ditt YITH-konto, gå till fliken ‘Licenses & Downloads,’ och klicka på knappen ‘Download Plugin’ för att ladda ner filen.

Här är ett tips: stäng inte den här sidan efter nedladdning eftersom du kommer att behöva licensnyckeln som visas där.

Gå sedan till din WordPress-instrumentpanel och installera pluginet. För mer information har vi en steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När den är aktiv ser du en inställningsskärm där du ombeds ange din YITH-e-postadress och licensnyckel. Kopiera bara dessa från YITH:s webbplats och klicka på 'Aktivera licens'.

När du ser meddelandet att din licens är aktiv, är du redo!

Klicka nu på 'Gå till plugin-instrumentpanelen', så kan du börja skapa ditt första anpassade märke.

Steg 1: Dölj standardmärket för WooCommerce-rea

Först måste vi dölja WooCommerce:s inbyggda reamärke så att det inte krockar med våra egna produktmärken. 

Processen är verkligen enkel. Gå till din WordPress-instrumentpanel och klicka på YITH » Badge Management. Navigera sedan till fliken 'Allmänna inställningar'.

Här hittar du ett alternativ som säger ‘Hide WooCommerce “On sale” badge.’ Fortsätt och aktivera det.

Välj sedan under 'Dölj "På rea" på:', 'Alla produkter' för att säkerställa att standardmärket inte visas någonstans i din butik.

Medan du är i inställningarna kanske du märker några andra användbara alternativ. Du kan välja att dölja dina egna märken på vissa platser, som sidofältet eller enskilda produktsidor.

Detta är bra om du vill att din butik ska se ren och organiserad ut. Till exempel, om din mobilwebbplats känns för trång, kan du dölja märken där också.

Glöm inte att klicka på knappen 'Spara alternativ' längst ner på sidan när du är klar.

Steg 2: Skapa ditt anpassade märke

Nu kommer den roliga delen: att skapa ditt första anpassade produktmärke i WooCommerce!

Gå till fliken 'Märken' och klicka på knappen 'Skapa märke' för att komma igång.

Pluginet ger dig 4 olika typer av märken att välja mellan: textmärke, bildmärke, CSS-märke eller avancerat märke för rea-produkter.

Varje typ låter dig skapa unika sätt att lyfta fram dina produkter. Till exempel, om du vill markera produkter som "Ny ankomst" eller "Vegansk vänlig", fungerar de tre första alternativen utmärkt.

Men här är ett tips: om du skapar rabattmärken rekommenderar vi starkt att du använder det avancerade alternativet, som automatiskt uppdateras baserat på produktens prisförändringar.

Efter att ha valt din etikettstyp, ge den ett namn som hjälper dig att komma ihåg vad den är till för.

Om du har valt en bild, CSS eller ett avancerat märke, kommer du att se en hel samling förgjorda märkes-designer direkt i plugin-programmet.

Du kan välja vilken du vill. Dessa färdiga märken sparar tid, och du kan fortfarande anpassa dem för att matcha stilen på dina WooCommerce-sidor.

Det här pluginet glänser verkligen med sina anpassningsmöjligheter. Beroende på vilken typ av bricka du valde kan du justera alla möjliga inställningar för att få din bricka att se perfekt ut på dina produktbilder.

Vill du ändra färg? Enkelt.

Behöver du justera hur transparent det är? Inget problem.

Du kan till och med rotera märket eller flytta runt det på dina produkter tills det är på precis rätt plats.

För vårt exempel fick märket verkligen att synas genom att ändra färgen till röd och placera det i det övre högra hörnet av produktbilden.

Dessa små justeringar kan göra stor skillnad för hur effektivt dina märken fångar uppmärksamheten.

När du är nöjd med hur allt ser ut, klickar du bara på 'Spara märke' för att avsluta.

Steg 3: Skapa en regel för att visa ditt märke

Nu när vi har skapat vårt anpassade märke, låt oss tala om för WooCommerce exakt var och när det ska visas.

Gå till fliken 'Märkesregler' och klicka på 'Ange regel'.

Tänk på regler som instruktioner som talar om för dina märken när de ska visas på dina produktbilder.

Pluginet ger dig 4 huvudsakliga sätt att styra var dina märken visas: produktmärke, kategorimärke, taggmärke och fraktklassmärke.

Du kan välja regeln 'Produktersiktsmärke' för att lägga till märken på vissa artiklar eller regeln 'Kategorimärke' för att täcka hela produktkategorier.

Under tiden visar regeln för tagg-märken märken på produkter som delar samma WooCommerce-tagg, och regeln för fraktklass-märken visar märken baserat på fraktalternativ.

Varje regel riktar sig mot olika produktegenskaper, men de fungerar alla på ett liknande sätt. Så du behöver bara välja det som passar dina behov bäst.

Låt oss använda regeln för produktersiktsmärke i det här exemplet eftersom det är det vanligaste valet.

Ge sedan din regel ett tydligt namn så att du enkelt kan hitta den senare.

Leta sedan efter inställningen 'Visa märke i:'. Det är här du bestämmer vilka produkter som får ditt märke. Du kan välja att visa det på alla produkter, nya tillägg, varor på rea, populära populära produkter, eller till och med bara produkter som finns i lager.

Låt oss säga att du skapar en regel för reavaror. Om du väljer 'Reavaror' kommer ditt märke automatiskt att visas när du markerar en produkt som reavaror. Det är så enkelt!

Men vissa alternativ kommer med fler inställningar som du kan konfigurera. Om du till exempel väljer 'Endast nya produkter' kan du ställa in märken som visas på artiklar som lagts till under de senaste dagarna (som 7, 14 eller 30 dagar).

Detta gör det superenkelt att automatiskt markera nya ankomster i din butik utan att manuellt lägga till märken på varje produkt.

Ibland kanske du vill att vissa produkter ska vara utan märken. Det är där inställningen 'Exkludera produkter' kommer till nytta.

Aktivera bara den här inställningen och skriv in namnen på alla produkter som du inte vill visa märket för. Dessa objekt kommer att vara utan märke även om de matchar dina andra regler.

Välj sedan vilket märkes-design du vill använda i rullgardinsmenyn 'Märke att tilldela'.

Nu, här blir det riktigt flexibelt. Du kan schemalägga när dina märken visas och välja vem som får se dem.

Alternativet 'Schemalägg regel' är perfekt för tidsbegränsade erbjudanden.

När du aktiverar det kommer pluginet att be dig att ställa in start- och slutdatum för dina märken.

Och om du vill visa speciella märken för vissa kunder, som att visa ett "VIP-rabatt"-märke endast för de mest lojala kunderna, kan du göra det också.

För att göra detta, välj bara 'Endast specifika användare eller användarroller' i inställningen 'Visa märke för'. Skriv sedan in dina föredragna användarroller eller enskilda användarnamn nedan.

När allt ser bra ut, klicka bara på ‘Save Rule,’ så är du klar!

Besök gärna din butiks frontend för att se dina nya produktmärken i aktion.

Om du använder den avancerade badge-typen för reavaror, kommer du att se att den visar både rabattprocenten och det faktiska beloppet som sparats, vilket hjälper kunderna att snabbt upptäcka de bästa erbjudandena.

Metod 2: Använd anpassad kod (gratis och enkel)

Om du inte behöver de avancerade alternativen från den första metoden, eller om du letar efter ett helt gratis alternativ, har vi en enkel kodmetod som inte kostar dig något.

Och om du inte är bekväm med kod, oroa dig inte! Vi kommer att använda WPCode-pluginet för att göra detta superenkelt och säkert. Det låter dig lägga till anpassade kodavsnitt i WordPress utan att vara utvecklare eller riskera att förstöra din webbplats.

Vi kommer att använda gratisversionen av WPCode för den här handledningen eftersom den fungerar perfekt för våra behov. Med det sagt finns det en premiumversion med coola funktioner som AI-kodgenerering och testläge.

För mer information, kolla bara in vår djupgående WPCode-recension.

Först måste du installera WordPress-pluginet i ditt adminområde.

Gå sedan till Kodavsnitt » + Lägg till avsnitt. Håll muspekaren över sektionen 'Lägg till din anpassade kod (nytt avsnitt)' och klicka sedan på knappen '+ Lägg till anpassat avsnitt'.

Välj sedan 'PHP Snippet' när du blir tillfrågad om kodtyp.

Detta talar om för WordPress vilken typ av kod vi använder.

Nu måste du ge ditt utdrag ett namn som hjälper dig att komma ihåg vad det gör.

Eftersom den här koden kommer att ta bort standard WooCommerce säljbricka och lägga till både nya produktbrickor och dynamiska rabattbrickor, kan du kalla den något i stil med "Anpassade WooCommerce-brickor".

När det är gjort, klistra in kodavsnittet vi har angett nedan i rutan 'Kodförhandsgranskning'.

Den här koden gör något riktigt coolt. Den beräknar automatiskt rabattprocent och visar dem på säljbrickan. Dessutom lägger den till en "Ny"-bricka till produkter som lagts till under de senaste 7 dagarna.

// 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;
        }
    }
}

Vill du justera hur länge en produkt anses vara "ny"? Leta bara efter raden där det står $newness = 7 i koden. Du kan ändra siffran 7 till hur många dagar du vill, till exempel 14 för två veckor eller 30 för en månad.

För att avsluta, klicka på knappen ‘Inactive’ tills den ändras till ‘Active,’ och klicka sedan på ‘Save Snippet.’

Därefter behöver vi styla våra märken för att de ska se bra ut på dina produkter. Låt oss lägga till lite CSS för att justera deras utseende.

För att lägga till ett nytt kodavsnitt, följ samma steg som tidigare, men välj den här gången 'CSS Snippet' när du blir ombedd.

Ge ditt kodavsnitt ett beskrivande namn, som "Produktmärkesstilar". Detta hjälper dig att enkelt hitta det om du behöver göra ändringar senare.

Här är CSS-koden som får dina märken att se professionella ut. Klistra bara in detta i rutan ‘Code Preview’:

/* 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 */
}

Låt oss bryta ner vad du kan anpassa i den här koden.

Vill du ha dina märken på en annan plats? För att göra detta kan du ändra värdena för top och right. Till exempel, att ändra top: -10px till top: 10px flyttar märket nedåt.

Gillar du inte färgerna? Det är superenkelt att ändra dem. Hitta bara raderna för background-color och ersätt färgkoderna.

Om du till exempel vill ha ett blått reamärke istället för ett rött, ändra #FF0000 till #0000FF. Du kan också göra märkena större eller mindre genom att justera värdet för font-size.

Vill du lära dig mer om att justera dessa stilar? Kolla in vår nybörjarvänliga guide om CSS i WordPress.

När du är klar klickar du bara på knappen 'Inaktiv' för att göra den 'Aktiv', klicka sedan på 'Spara kodavsnitt'.

Det var allt!

Dina märken bör nu visas på dina produktbilder. Här är ett exempel på hur våra ser ut med vår CSS-kod:

Upptäck fler WooCommerce-tips och tricks

Nu när du vet hur du visar produktmärken i WooCommerce, kanske du vill utforska andra sätt att förbättra din webbutik. Här är några hjälpsamma guider vi rekommenderar:

• Öka försäljningen med smart merförsäljning – Lär dig hur du strategiskt marknadsför relaterade produkter och ökar ditt genomsnittliga ordervärde genom effektiva merförsäljningstaktiker.
• Belöna kundrecensioner med kuponger – Upptäck hur du automatiskt skickar rabattkuponger till kunder som lämnar produktrecensioner, vilket uppmuntrar till mer feedback och återkommande köp.
• Visa smarta produktrekommendationer – Ta reda på hur du visar produktförslag för att öka din WooCommerce-försäljning.
• Visa ofta köpta tillsammans-produkter – Lär dig hur du visar ofta köpta tillsammans-produkter i WooCommerce för att öka försäljningen.
• Lägg till avancerade produktfiltreringsalternativ – Lär dig hur du hjälper kunder att hitta exakt vad de letar efter med anpassningsbara produktfilter som gör shoppingen enklare och snabbare.
• Skapa en kundönskelista-funktion – Se hur du lägger till en önskelista-funktion kan öka engagemanget och ge shoppare en anledning att återvända till din butik, samtidigt som du får värdefulla insikter om kundpreferenser.
• Dölj priser i WooCommerce – Lär dig hur du döljer priser för grossistkunder, onlinekataloger och lyxvaror och be shoppare att kontakta dig eller logga in istället.

Vanliga frågor: Produktmärken i WooCommerce

Här är några frågor som våra läsare ofta ställer om att lägga till produktetiketter i WooCommerce:

Kan jag skapa anpassade märken som ‘Hot,’ ‘New,’ eller ‘Limited Stock’?

Ja, de flesta produktmärkes-plugins låter dig designa anpassade märken med din egen text, färger och ikoner. Det betyder att du inte är begränsad till generiska etiketter som 'Rea' eller 'Ny'.

Till exempel kan du skapa märken som:

• Trendar nu!
• Endast 2 kvar!
• Personalens val
• 100% ekologisk

Vissa verktyg låter dig till och med ladda upp egna märkesbilder eller använda dynamiska etiketter baserat på lager- eller prisdata.

Fungerar produktmärken på mobila enheter?

Ja, de flesta märkesplugins är responsiva, vilket innebär att dina märken kommer att visas korrekt på alla skärmstorlekar, inklusive smartphones och surfplattor.

Placeringen och designen av brickan kan dock bero på ditt tema.

Det är en bra idé att testa din butik på mobilen efter att ha lagt till märken för att säkerställa att de inte överlappar viktigt innehåll eller gör produktbilder svåra att se.

Kan jag visa flera märken på samma produkt?

Det beror på vilket plugin eller vilken metod du använder. Till exempel stöder YITH WooCommerce Badge Management-pluginet flera märken per produkt, medan andra kanske bara tillåter ett i taget.

Om du vill visa flera etiketter som 'Rea' och 'Bästsäljare' tillsammans, leta efter ett plugin som erbjuder märkesskiktning eller stapling. Kontrollera alltid plugininställningarna eller dokumentationen för att bekräfta att den här funktionen stöds.

Kommer produktmärken att sakta ner min WooCommerce-butik?

Vanligtvis inte – särskilt om du använder ett välkodat plugin. Undvik dock att använda stora bildfiler för märken, och överbelasta inte dina produktsidor med flera märken eller animationer.

För att hålla din butik snabb:

• Välj lätta, optimerade plugins
• Använd textbaserade märken när det är möjligt
• Begränsa användningen av märken till utvalda produkter eller kategorier

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du lägger till produktmärken i WooCommerce. Du kanske också vill kolla in våra experttips om de bästa produktgalleriprogrammen för WooCommerce och vår guide om hur man snabbar upp WooCommerce-prestanda.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.