Cum să adaugi insigne de produs în WooCommerce (Rapid și ușor)

Fiecare magazin online de succes are un lucru în comun: fac ca clienții să găsească ușor cele mai bune produse ale lor.

Dar iată provocarea – când toate produsele dvs. arată la fel, cum știu cumpărătorii care sunt la reducere, adăugate recent sau recomandările dvs. de top? Etichetele de produse sunt răspunsul.

Aceste elemente vizuale mici comunică instantaneu ce este special la fiecare produs. O simplă insignă „Nou” poate stârni curiozitatea, în timp ce o etichetă „50% Reducere” creează urgență.

Pe baza experienței noastre în a ajuta proprietarii de magazine să-și optimizeze site-urile WooCommerce, emblemele produselor sunt una dintre acele mici modificări care oferă rezultate mari.

Am testat diverse abordări și am găsit 2 metode care funcționează perfect atât pentru începători, cât și pentru utilizatori experimentați. Să explorăm cele mai ușoare moduri de a începe.

Ce sunt insignele pentru produsele WooCommerce?

Ați observat vreodată acele etichete mici „Reducere” sau „Nou” care apar pe produse atunci când faceți cumpărături online?

Acestea sunt insigne de produse și sunt incredibil de utile pentru a face anumite articole să iasă în evidență în magazinul dvs. online.

Gândiți-vă la ele ca la niște abțibilduri virtuale care atrag atenția clienților dumneavoastră asupra detaliilor importante ale produselor, cum ar fi vânzările, produsele noi sau ofertele pe termen limitat.

Am văzut proprietari de magazine folosind insigne de produs în moduri cu adevărat creative pentru a prezenta oferte speciale, a evidenția cele mai vândute produse sau a marca articole care se epuizează stocul.

Acum, dacă folosiți deja WooCommerce, s-ar putea să fi observat că vine cu o funcție de bază pentru insigna de vânzare care apare automat atunci când reduceți prețul unui produs.

Deși insigna de vânzare WooCommerce funcționează bine pentru nevoi simple, să fim sinceri – este destul de limitată în ceea ce privește ceea ce puteți face cu ea.

Nu poți schimba ușor cum arată insigna, adăuga noi tipuri de insigne sau controla exact unde apar pe imaginile produselor tale.

Între timp, insignele personalizate de produse vă permit să arătați mai mult personalitatea brandului dumneavoastră. Cel mai important, însă, insignele originale pot atrage mai eficient atenția asupra produselor speciale.

În acest fel, puteți genera mai multe vânzări în magazinul dvs. online. 💰

În acest ghid, vă vom prezenta 2 metode dovedite pentru a adăuga și personaliza emblemele produselor în WooCommerce. Ambele abordări vă vor oferi control complet asupra modului în care arată și funcționează.

Puteți utiliza linkurile rapide de mai jos pentru a sări la metoda preferată:

• Metoda 1: Utilizați YITH WooCommerce Badge Management (Mai personalizabil)
• Metoda 2: Utilizați cod personalizat (gratuit și simplu)
• Descoperiți mai multe sfaturi și trucuri pentru WooCommerce
• Întrebări frecvente: Insigne de produse în WooCommerce

Metoda 1: Utilizați YITH WooCommerce Badge Management (Mai personalizabil)

Să începem cu instrumentul nostru preferat pentru adăugarea de insigne personalizate pentru produse în magazinul dvs. WooCommerce.

Vă recomandăm să utilizați YITH WooCommerce Badge Management, deoarece face extrem de ușor să adăugați și să personalizați insigne de produse în magazinul dvs. online.

În plus, am testat de-a lungul anilor multe plugin-uri YITH, cum ar fi cele pentru adăugarea de abonamente și videoclipuri de produs, și acestea funcționează întotdeauna excelent pentru utilizatorii noștri.

Vrei să afișezi o insignă specială în timpul sărbătorilor? Sau poate să afișezi cât vor economisi clienții? Acest plugin poate face toate acestea. Poți chiar seta insignele să apară la anumite ore și să le ascunzi mai târziu.

Puteți începe cu versiunea gratuită sau premium a pluginului. Planul gratuit este perfect dacă doriți doar să adăugați insigne simple cu text sau imagini la produsele dvs.

În acest ghid, vă vom arăta cum să utilizați versiunea premium, dar majoritatea pașilor vor funcționa la fel pentru ambele. Doar amintiți-vă că unele funcții interesante, cum ar fi insignele care afișează automat sumele reducerilor, vin doar cu versiunea premium.

Gata să începeți? Mai întâi, va trebui să achiziționați pluginul de pe site-ul YITH.

Apoi conectați-vă la contul dvs. YITH, accesați fila „Licențe și descărcări” și faceți clic pe butonul „Descarcă plugin” pentru a descărca fișierul.

Iată un sfat: nu închideți această pagină după descărcare, deoarece veți avea nevoie de cheia de licență care este afișată acolo.

În continuare, accesați tabloul de bord WordPress și instalați pluginul. Pentru mai multe informații, avem un ghid pas cu pas despre cum să instalați un plugin WordPress.

Când este activ, veți vedea un ecran de configurare care vă solicită adresa de e-mail și cheia de licență YITH. Pur și simplu copiați-le de pe site-ul YITH și faceți clic pe „Activare licență”.

Odată ce vedeți mesajul spunând că licența dvs. este activă, sunteți gata!

Acum, faceți clic pe „Mergi la tabloul de bord al pluginului” și puteți începe să creați prima dvs. insignă personalizată.

Pasul 1: Ascundeți insigna implicită de vânzare WooCommerce

Mai întâi, trebuie să ascundem eticheta de reducere încorporată a WooCommerce, astfel încât să nu intre în conflict cu etichetele noastre personalizate de produse. 

Procesul este foarte simplu. Accesați tabloul de bord WordPress și faceți clic pe YITH » Management Embleme. Apoi, navigați la fila „Setări generale”.

Aici veți găsi o opțiune care spune „Ascunde insigna WooCommerce „La reducere””. Continuați și activați-o.

Apoi, sub „Ascunde „La reducere” pe:”, selectați „Toate produsele” pentru a vă asigura că insigna implicită nu apare nicăieri în magazinul dvs.

În timp ce vă aflați în setări, este posibil să observați și alte opțiuni utile. Puteți alege să ascundeți etichetele personalizate în anumite locuri, cum ar fi bara laterală sau paginile individuale de produse.

Acest lucru este excelent dacă doriți să mențineți magazinul dvs. curat și organizat. De exemplu, dacă site-ul dvs. mobil pare prea aglomerat, puteți ascunde insignele și acolo.

Nu uitați să faceți clic pe butonul „Salvați opțiunile” din partea de jos a paginii când ați terminat.

Pasul 2: Creați-vă insigna personalizată

Acum vine partea distractivă: crearea primei dvs. insigne personalizate de produs în WooCommerce!

Accesați fila „Insigne” și faceți clic pe butonul „Creare insignă” pentru a începe.

Plugin-ul vă oferă 4 tipuri diferite de insigne din care puteți alege: insignă text, insignă imagine, insignă CSS sau insignă avansată pentru produsele la reducere.

Fiecare tip vă permite să creați modalități unice de a evidenția produsele dvs. De exemplu, dacă doriți să marcați produsele ca „Sosire nouă” sau „Prietenos cu veganii”, primele trei opțiuni funcționează excelent.

Dar iată un sfat: dacă creați insigne de reducere, recomandăm cu tărie utilizarea opțiunii avansate, care se actualizează automat în funcție de modificările de preț ale produsului dvs.

După ce ați ales tipul de insignă, dați-i un nume care să vă ajute să vă amintiți la ce servește.

Dacă ați ales o imagine, CSS sau o insignă avansată, veți vedea o colecție întreagă de designuri de insigne pre-făcute chiar în plugin.

Puteți alege oricare dintre ele. Aceste insigne gata de utilizare vă economisesc timp și le puteți personaliza în continuare pentru a se potrivi stilului paginilor dvs. WooCommerce.

Acest plugin excelează cu adevărat prin opțiunile sale de personalizare. În funcție de tipul de insignă pe care l-ați ales, puteți ajusta tot felul de setări pentru a face insigna să arate perfect pe imaginile produselor dvs.

Doriți să schimbați culoarea? Ușor.

Trebuie să ajustezi cât de transparentă este? Nicio problemă.

Puteți chiar roti emblema sau o puteți muta pe produsele dvs. până când ajunge în locul potrivit.

Pentru exemplul nostru, am făcut emblema să iasă în evidență prin schimbarea culorii în roșu și plasarea ei în colțul din dreapta sus al imaginii produsului.

Aceste mici ajustări pot face o mare diferență în cât de eficient insignele atrag atenția oamenilor.

Când ești mulțumit de cum arată totul, apasă pur și simplu pe „Salvează insigna” pentru a finaliza.

Pasul 3: Creați o regulă pentru a afișa insigna dvs.

Acum că am creat insigna noastră personalizată, să spunem WooCommerce exact unde și când să o afișeze.

Accesați fila „Reguli insigne” și faceți clic pe „Setare regulă”.

Gândiți-vă la reguli ca la instrucțiuni care spun insignelor dvs. când să apară pe imaginile produselor.

Plugin-ul vă oferă 4 moduri principale de a controla unde apar insignele dvs.: insignă produse, insignă categorie, insignă etichetă și insignă clasă de expediere.

Puteți alege regula „Emblema produselor” pentru a adăuga embleme anumitor articole sau regula „Emblema categoriei” pentru a acoperi categorii întregi de produse.

Între timp, regula insignei de etichetă afișează insigne pe produsele care partajează aceeași etichetă WooCommerce, iar regula insignei de clasă de expediere afișează insigne bazate pe opțiunile de expediere.

Fiecare regulă vizează diferite aspecte ale produselor, dar toate funcționează într-un mod similar. Deci, trebuie doar să alegeți ceea ce funcționează cel mai bine pentru nevoile dumneavoastră.

Să folosim regula emblemei produselor pentru acest exemplu, deoarece este cea mai comună alegere.

Apoi, dați regulii un nume simplu, astfel încât să o puteți găsi cu ușurință mai târziu.

Apoi, căutați setarea „Afișați emblema în:”. Aici decideți ce produse primesc emblema. Puteți alege să o afișați pe toate produsele, pe cele adăugate recent, pe articolele la reducere, pe produsele populare populare sau chiar doar pe produsele aflate în stoc.

Să spunem că creați o regulă pentru produsele la reducere. Dacă selectați „Produse la reducere”, insigna dvs. va apărea automat ori de câte ori marcați un produs ca fiind la reducere. Este atât de simplu!

Dar unele opțiuni vin cu mai multe setări pe care le puteți configura. De exemplu, dacă alegeți „Doar produse recente”, puteți seta ca insignele să apară pe articolele adăugate în ultimele zile (cum ar fi 7, 14 sau 30 de zile).

Acest lucru face extrem de ușor să evidențiați automat sosirile noi în magazinul dvs. fără a adăuga manual insigne la fiecare produs.

Uneori, este posibil să doriți să păstrați anumite produse fără etichetă. Aici intervine setarea „Exclude produse”.

Activați pur și simplu această setare și introduceți numele oricăror produse pentru care nu doriți să afișați insigna. Aceste articole vor rămâne fără insigne chiar dacă se potrivesc cu celelalte reguli ale dvs.

Apoi, selectați ce design de insignă doriți să utilizați în meniul derulant „Insignă de atribuit”.

Acum, aici devine cu adevărat flexibil. Puteți programa când apar insignele dvs. și puteți alege cine le vede.

Opțiunea „Regulă de programare” este perfectă pentru oferte pe termen limitat.

Când îl activați, pluginul vă va solicita să setați date de început și de sfârșit pentru insignele dvs.

Și dacă doriți să afișați insigne speciale anumitor clienți, cum ar fi afișarea unei insigne „Reducere VIP” doar celor mai clienți fideli, puteți face și acest lucru.

Pentru a face acest lucru, selectați pur și simplu „Doar utilizatori specifici sau roluri de utilizator” în setarea „Afișare insignă pentru”. Apoi, introduceți rolurile de utilizator preferate sau numele de utilizator individuale de mai jos.

Când totul arată corect, faceți clic pe „Salvează regula” și sunteți gata!

Nu ezitați să vizitați partea frontală a magazinului dvs. pentru a vedea noile insignele de produs în acțiune.

Dacă utilizați tipul avansat de insignă pentru articolele la reducere, veți vedea afișat atât procentul de reducere, cât și suma economisită efectiv, ajutând clienții să identifice rapid cele mai bune oferte.

Metoda 2: Utilizați cod personalizat (gratuit și simplu)

Dacă nu aveți nevoie de opțiunile avansate din prima metodă sau dacă căutați o opțiune complet gratuită, atunci avem o metodă simplă de codare care nu vă va costa nimic.

Și dacă nu sunteți confortabil cu codul, nu vă faceți griji! Vom folosi pluginul WPCode pentru a face acest lucru super ușor și sigur. Acesta vă permite să adăugați fragmente de cod personalizate în WordPress fără a fi un dezvoltator sau a risca să vă stricați site-ul.

Vom folosi versiunea gratuită a WPCode pentru acest tutorial, deoarece funcționează perfect pentru nevoile noastre. Acestea fiind spuse, există o versiune premium cu funcții interesante, cum ar fi generarea de cod AI și modul de testare.

Pentru mai multe informații, consultați recenzia noastră detaliată WPCode.

Mai întâi, trebuie să instalați plugin-ul WordPress în zona dvs. de administrare.

Apoi, accesați Fragmente de cod » + Adăugați fragment. Plasați cursorul peste secțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și apoi faceți clic pe butonul „+ Adăugați fragment personalizat”.

Apoi, alegeți „Fragment PHP” atunci când vi se cere tipul de cod.

Acest lucru îi spune WordPress-ului ce tip de cod folosim.

Acum, trebuie să dați fragmentului dvs. un nume care să vă ajute să vă amintiți ce face.

Deoarece acest cod va elimina sigla implicită de vânzare WooCommerce și va adăuga atât sigle noi pentru produse, cât și sigle dinamice pentru reduceri, ați putea să-l numiți ceva de genul „Sigle personalizate WooCommerce”.

Odată ce acest lucru este făcut, lipiți fragmentul de cod pe care vi l-am furnizat mai jos în caseta „Previzualizare cod”.

Acest cod face ceva cu adevărat grozav. Calculează automat procentele de reducere și le afișează pe insigna de vânzare. În plus, adaugă o insignă „Nou” la produsele adăugate în ultimele 7 zile.

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

Doriți să ajustați cât timp un produs este considerat „nou”? Căutați linia unde scrie $newness = 7 în cod. Puteți schimba acel număr 7 cu oricâte zile doriți, cum ar fi 14 pentru două săptămâni sau 30 pentru o lună.

Pentru a finaliza, faceți clic pe butonul „Inactiv” până când acesta se schimbă în „Activ”, apoi apăsați „Salvează fragmentul”.

În continuare, trebuie să stilizăm emblemele pentru a le face să arate grozav pe produsele dvs. Să adăugăm niște CSS pentru a ajusta aspectul lor.

Pentru a adăuga un nou fragment, urmați aceiași pași ca înainte, dar de data aceasta, alegeți „Fragment CSS” atunci când vi se cere.

Denumiți fragmentul ceva descriptiv, cum ar fi „Stiluri pentru insignele produselor”. Acest lucru vă va ajuta să îl găsiți cu ușurință dacă va trebui să faceți modificări mai târziu.

Iată codul CSS care va face ca siglele dvs. să arate profesional. Pur și simplu lipiți acest cod în caseta „Previzualizare cod”:

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

Să analizăm ce puteți personaliza în acest cod.

Doriți ca insignele dvs. să fie într-un alt loc? Pentru a face acest lucru, puteți modifica valorile top și right. De exemplu, modificarea top: -10px în top: 10px va muta insigna în jos.

Nu vă plac culorile? Este foarte ușor să le schimbați. Doar găsiți liniile background-color și înlocuiți codurile de culoare.

De exemplu, dacă doriți o insignă de reducere albastră în loc de una roșie, schimbați #FF0000 cu #0000FF. De asemenea, puteți face insignele mai mari sau mai mici ajustând valoarea font-size.

Doriți să aflați mai multe despre ajustarea acestor stiluri? Consultați ghidul nostru prietenos pentru începători despre CSS în WordPress.

După ce ați terminat, faceți clic pe butonul „Inactiv” pentru a-l face „Activ”, apoi apăsați „Salvează fragmentul”.

Asta e tot!

Insignele tale ar trebui acum să apară pe imaginile produselor tale. Iată un exemplu al modului în care arată ale noastre, folosind codul nostru CSS:

Descoperiți mai multe sfaturi și trucuri pentru WooCommerce

Acum că știți cum să afișați insigne de produse în WooCommerce, s-ar putea să doriți să explorați alte modalități de a vă îmbunătăți magazinul online. Iată câteva ghiduri utile pe care le recomandăm:

• Creșteți vânzările cu vânzări suplimentare inteligente – Aflați cum să promovați strategic produse conexe și să creșteți valoarea medie a comenzii prin tactici eficiente de vânzare suplimentară.
• Recompensați recenziile clienților cu cupoane – Descoperiți cum să trimiteți automat cupoane de reducere clienților care lasă recenzii de produse, încurajând mai mult feedback și achiziții repetate.
• Afișați recomandări inteligente de produse – Aflați cum să afișați sugestii de produse pentru a crește vânzările WooCommerce.
• Afișați produse cumpărate frecvent împreună – Aflați cum să afișați produse cumpărate frecvent împreună în WooCommerce pentru a crește vânzările.
• Adaugă opțiuni avansate de filtrare a produselor – Află cum să ajuți clienții să găsească exact ceea ce caută cu filtre de produse personalizabile care fac cumpărăturile mai ușoare și mai rapide.
• Creați o funcție de listă de dorințe pentru clienți – Vedeți cum adăugarea unei funcții de listă de dorințe poate crește implicarea și poate oferi cumpărătorilor un motiv să revină în magazinul dumneavoastră, oferind în același timp informații valoroase despre preferințele clienților.
• Ascundeți prețurile în WooCommerce – Aflați cum să ascundeți prețurile pentru clienții angro, cataloage online și bunuri de lux și să cereți cumpărătorilor să vă contacteze sau să se autentifice în schimb.

Întrebări frecvente: Insigne de produse în WooCommerce

Iată câteva întrebări frecvent adresate de cititorii noștri despre adăugarea de insigne de produs în WooCommerce:

Pot crea sigle personalizate precum „La modă”, „Nou” sau „Stoc limitat”?

Da, majoritatea pluginurilor pentru insigne de produse vă permit să creați insigne personalizate cu propriul text, culori și pictograme. Acest lucru înseamnă că nu sunteți limitat la etichete generice precum „Reducere” sau „Nou”.

De exemplu, puteți crea insigne precum:

• În tendințe acum!
• Mai sunt doar 2!
• Recomandarea echipei
• 100% Organic

Unele instrumente vă permit chiar să încărcați propriile imagini de embleme sau să utilizați etichete dinamice bazate pe datele de stoc sau de preț.

Insignele de produs funcționează pe dispozitive mobile?

Da, majoritatea plugin-urilor pentru insigne sunt responsive, ceea ce înseamnă că insignele dvs. vor apărea corect pe toate dimensiunile ecranului, inclusiv pe smartphone-uri și tablete.

Cu toate acestea, plasarea și designul siglei pot depinde de tema dvs.

Este o idee bună să vă testați magazinul pe mobil după adăugarea siglelor pentru a vă asigura că nu se suprapun peste conținut important sau că imaginile produselor nu sunt greu de văzut.

Pot afișa mai multe insigne pe același produs?

Depinde de pluginul sau metoda pe care o utilizați. De exemplu, pluginul YITH WooCommerce Badge Management suportă mai multe insigne per produs, în timp ce altele pot permite doar una la un moment dat.

Dacă doriți să afișați mai multe etichete precum „Reducere” și „Cel mai vândut” împreună, căutați un plugin care oferă stratificarea sau stivuirea insignelor. Verificați întotdeauna setările plugin-ului sau documentația pentru a confirma că această funcție este acceptată.

Vor încetini insignele de produse magazinul meu WooCommerce?

De obicei nu – mai ales dacă folosiți un plugin bine codat. Cu toate acestea, evitați utilizarea fișierelor mari de imagini pentru insigne și nu supraîncărcați paginile produselor dvs. cu mai multe insigne sau animații.

Pentru a menține magazinul rapid:

• Alegeți plugin-uri ușoare și optimizate
• Utilizați insigne bazate pe text atunci când este posibil
• Limitați utilizarea insignelor la produse sau categorii recomandate

Sperăm că acest articol v-a ajutat să învățați cum să adăugați insignele de produs în WooCommerce. De asemenea, ați putea dori să consultați selecția noastră de experți a celor mai bune pluginuri de grilă de produse WooCommerce și ghidul nostru despre cum să accelerați performanța WooCommerce.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.