Dodaj ikonę 'Best Seller' do produktów WooCommerce w prosty sposób

How to add a bestseller icon in WooCommerceDisplay bestseller badge on WooCommerce productsAdd bestseller label to product thumbnailShow bestseller icon on WooCommerce productsBestseller icon configuration in WooCommerceCustomize bestseller badge in WooCommerceBestseller seal for WooCommerce productsEnable bestseller icon on product pageDisplay bestseller logo in WooCommerceAdd bestseller tag to WooCommerce products

Objaśnienie

Chcesz wyróżnić swoje najlepiej sprzedające się produkty za pomocą odznaki 'Best Seller' w WooCommerce? Oto jak możesz to zrobić:

Style niestandardowe: Kod dodaje specjalny styl dla odznaki 'Best Seller'. Używa czerwonego tła z białym tekstem, co sprawia, że wyróżnia się na zdjęciach produktów.
Próg sprzedaży: Produkt staje się 'Best Seller', jeśli sprzedaż przekroczy 100 sztuk. Możesz zmienić tę liczbę, aby dostosować ją do potrzeb swojego sklepu.
Wyświetlanie odznaki: Odznaka pojawia się zarówno na stronie listy produktów, jak i na stronie pojedynczego produktu. Dzięki temu klienci mogą łatwo zauważyć popularne przedmioty.

Dzięki tym krokom Twoje najlepiej sprzedające się produkty będą miały nową, błyszczącą odznakę, co pomoże im przyciągnąć uwagę potencjalnych nabywców!

Kod
<?php
// Hook to add custom CSS for the best seller badge
function wp_dudecom_enqueue_best_seller_styles() {
    wp_enqueue_style( 'wp-dudecom-best-seller-style', get_stylesheet_directory_uri() . '/best-seller-style.css' );
}
add_action( 'wp_enqueue_scripts', 'wp_dudecom_enqueue_best_seller_styles' );

// Function to check if a product is a best seller
function wp_dudecom_is_best_seller( $product_id ) {
    $sales_count = get_post_meta( $product_id, 'total_sales', true );
    $best_seller_threshold = 100; // Define your threshold for best sellers

    return $sales_count >= $best_seller_threshold;
}

// Function to display the best seller badge
function wp_dudecom_display_best_seller_badge() {
    global $product;

    if ( wp_dudecom_is_best_seller( $product->get_id() ) ) {
        echo '<span class="wp-dudecom-best-seller-badge">Best Seller</span>';
    }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'wp_dudecom_display_best_seller_badge', 10 );
add_action( 'woocommerce_before_single_product_summary', 'wp_dudecom_display_best_seller_badge', 10 );

// Add custom CSS for the best seller badge
function wp_dudecom_add_custom_css() {
    ?>
    <style>
        .wp-dudecom-best-seller-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #ff0000;
            color: #ffffff;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: bold;
            z-index: 10;
            border-radius: 5px;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'wp_dudecom_add_custom_css' );
?>

Instrukcja

Aby dodać ikonę 'Najlepiej Sprzedający się' do swoich produktów WooCommerce, wykonaj następujące kroki:

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne:

Upewnij się, że WooCommerce jest zainstalowane i aktywowane na Twojej stronie WordPress.
Podstawowa znajomość dostępu do plików motywu WordPress i ich edytowania.

Kroki wdrożenia:

Dostęp do plików motywu: Przejdź do swojego panelu WordPress, wybierz Wygląd > Edytor motywu. Wybierz plik functions.php z prawej strony.
Dodaj kod: Skopiuj podany fragment kodu i wklej go na końcu pliku functions.php.
Zapisz zmiany: Kliknij przycisk Aktualizuj plik, aby zapisać zmiany.
Utwórz plik CSS: Używając klienta FTP lub menedżera plików swojego hostingu, przejdź do katalogu swojego motywu i utwórz nowy plik o nazwie best-seller-style.css.
Dodaj style niestandardowe: W pliku best-seller-style.css możesz dodać dodatkowe style lub zmodyfikować istniejące, aby dostosować wygląd odznaki 'Najlepiej Sprzedający się'.
Zweryfikuj wdrożenie: Odwiedź swój sklep WooCommerce oraz strony produktów, aby upewnić się, że odznaka 'Najlepiej Sprzedający się' pojawia się na produktach, które spełniają próg sprzedaży.

Postępując zgodnie z tymi krokami, Twój sklep WooCommerce będzie teraz wyświetlał odznakę 'Najlepiej Sprzedający się' na kwalifikujących się produktach, co zwiększy ich widoczność i potencjalnie zwiększy sprzedaż.

Jeśli potrzebujesz pomocy przy wdrożeniu lub wymagasz bardziej zaawansowanej funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy w zakresie WordPress.