Dacă ai un magazin online WooCommerce, evidențierea produselor populare poate fi o strategie excelentă pentru a crește conversiile. Un mod eficient de a face acest lucru este prin adăugarea unei etichete „Best Seller” pe produsele cu cele mai multe vânzări. Această metodă ajută la creșterea încrederii clienților și îi încurajează să achiziționeze produsele deja apreciate de alți cumpărători.

În acest articol, îți voi arăta cum să implementezi această etichetă fără pluginuri, doar cu ajutorul unui snippet PHP și câteva stilizări CSS. Implementarea este simplă, rapidă și nu afectează performanța site-ului.

Codul PHP și CSS pentru Adăugarea Etichetei „Best Seller”

Vezi tutorialul pe YouTube

Adaugă acest cod în fișierul functions.php al temei tale sau folosește un plugin precum Code Snippets pentru a evita erorile la actualizări:

// Adaugă eticheta "Best Seller" pe produsele populare
function add_best_seller_badge() {
    global $product;

    if (!$product) return;

    $min_sales = 10; // Numărul minim de vânzări pentru a fi considerat "Best Seller"
    $sales = get_post_meta($product->get_id(), 'total_sales', true);

    if ($sales >= $min_sales) {
        // Verificăm dacă suntem în pagina produsului sau în magazin
        if (is_product()) {
            echo '<div class="best-seller-ribbon single-product-badge"><span class="tag-line">Best Seller</span></div>';
        } else {
            echo '<div class="best-seller-ribbon shop-product-badge"><span class="tag-line">Best Seller</span></div>';
        }
    }
}

// Afișează eticheta **în paginile magazinului, categorii și etichete**
add_action('woocommerce_before_shop_loop_item', 'add_best_seller_badge', 5);

// Afișează eticheta **în pagina produsului**
add_action('woocommerce_before_single_product_summary', 'add_best_seller_badge', 5);

// Stilizare CSS pentru poziționarea corectă a etichetei
function best_seller_badge_styles() {
    echo '<style>
        /* Stil pentru pagina magazinului (Shop) */
        .shop-product-badge {
            position: absolute;
            top: 10px;
            left: 160px; /* Poziție în magazin */
            background: #ff6600;
            color: white;
            font-size: 12px;
            font-weight: bold;
            padding: 3px 7px;
            border-radius: 4px;
            z-index: 10;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

        /* Stil pentru pagina produsului (Single Product) */
        .single-product-badge {
            position: absolute;
            top: 10px;
            left: 390px; /* Poziție diferită în pagina produsului */
            background: #ff6600;
            color: white;
            font-size: 12px;
            font-weight: bold;
            padding: 3px 7px;
            border-radius: 4px;
            z-index: 10;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

        .woocommerce ul.products li.product {
            position: relative; /* Asigură poziționarea corectă peste imagine */
        }

        .woocommerce div.product {
            position: relative; /* Asigură poziționarea și pe pagina produsului */
        }

        @media (max-width: 768px) {
            .shop-product-badge, .single-product-badge {
                left: 50px; /* Ajustare pentru mobil */
                font-size: 10px;
                padding: 2px 5px;
            }
        }
    </style>';
}
add_action('wp_head', 'best_seller_badge_styles');

Cum Funcționează Acest Cod?

✅ Verifică automat numărul de vânzări ale fiecărui produs din WooCommerce. Dacă produsul are peste 10 vânzări, eticheta „Best Seller” este afișată automat.

✅ Afișează eticheta atât în pagina magazinului, cât și în pagina produsului, astfel încât să fie vizibilă pentru clienți indiferent de locul în care navighează.

✅ Poziționează eticheta deasupra imaginii produsului, fără a afecta alte elemente din design.

✅ Este responsivă – eticheta se ajustează automat pentru dispozitive mobile, astfel încât să nu încurce vizibilitatea produsului.

Avantajele Acestei Implementări

🔹 Nu necesită pluginuri – Totul se face direct din cod, ceea ce îmbunătățește viteza site-ului.
🔹 Ușor de personalizat – Poți schimba culoarea, poziția și dimensiunea etichetei din CSS.
🔹 Crește conversiile – Clienții sunt mai predispuși să cumpere un produs popular.
🔹 Design atractiv – Eticheta se integrează frumos în orice temă WooCommerce.

Personalizări Suplimentare

Dacă vrei să modifici aspectul etichetei, poți schimba valorile din CSS:

• Schimbă poziția etichetei → Modifică top: 10px; left: 160px; pentru magazin și left: 390px; pentru pagina produsului.
• Schimbă culoarea → Înlocuiește background: #ff6600; cu orice altă culoare (#ff0000 pentru roșu, #008000 pentru verde etc.).
• Mărește fontul → Modifică font-size: 12px; pentru un text mai mare.

Dacă vrei să schimbi numărul minim de vânzări pentru ca un produs să fie considerat Best Seller, editează această linie din cod:

$min_sales = 10;

De exemplu, pentru a marca un produs Best Seller doar dacă a avut peste 50 de vânzări, schimbă în $min_sales = 50;.

Concluzie

Acest tutorial îți arată cum să adaugi rapid o etichetă „Best Seller” pe produsele populare din WooCommerce fără pluginuri. Implementarea este simplă, iar beneficiile sunt considerabile: vizibilitate crescută, încredere mai mare și conversii mai bune.

Dacă ai întrebări sau vrei să îmbunătățim acest cod, lasă un comentariu!