Dodaj niestandardowe etykiety do produktów WooCommerce z łatwością

Jak dodać niestandardowe etykiety do produktów WooCommerce; Tworzenie etykiet produktów w WordPressie; Dodaj nową etykietę do produktu WooCommerce; Niestandardowe odznaki produktów dla WooCommerce; Wtyczka do etykiet produktów WooCommerce; Najlepsza wtyczka do etykiet produktów WooCommerce; Wyświetlanie niestandardowych etykiet na produktach WooCommerce; Jak pokazać odznaki wyprzedaży w WooCommerce; Dostosowywanie etykiet produktów w WordPressie; Dodaj etykiety promocyjne do produktów WooCommerce;

Objaśnienie

Chcesz, aby Twoje produkty WooCommerce wyróżniały się niestandardowymi etykietami, takimi jak "Nowość" lub "Wyprzedaż"? Oto prosty sposób, aby to osiągnąć!

Dodawanie Etykiet:

  • Etykieta "Nowość": Ta etykieta pojawia się na produktach dodanych w ciągu ostatnich 30 dni. Sprawdza datę produktu, a jeśli mieści się w ustalonym czasie, wyświetla etykietę "Nowość".
  • Etykieta "Wyprzedaż": Automatycznie wyświetla się na produktach, które są aktualnie w promocji.

Jak To Działa:

  • Kod łączy się z WooCommerce, aby wyświetlić te etykiety przed tytułem produktu w pętli sklepu.
  • Używa prostych warunków, aby określić, czy produkt jest nowy lub w promocji, a następnie dodaje odpowiednią etykietę.

Stylizacja Etykiet:

  • Etykiety są stylizowane za pomocą odrobiny CSS, aby były bardziej widoczne. Mają pogrubioną czcionkę i kolor tła, aby przyciągać wzrok.
  • Etykieta "Nowość" jest zielona, podczas gdy etykieta "Wyprzedaż" jest czerwona, co ułatwia klientom ich zauważenie.

Dzięki tej konfiguracji Twoje produkty będą miały przyciągające wzrok etykiety, które pomogą wyróżnić nowości i specjalne oferty, poprawiając doświadczenia zakupowe Twoich klientów!

Kod

<?php
// Add custom labels to WooCommerce products

// Hook to display custom labels on WooCommerce products
add_action('woocommerce_before_shop_loop_item_title', 'wp_dudecom_display_custom_product_label', 10);

function wp_dudecom_display_custom_product_label() {
    global $product;

    // Example: Add a 'New' label to products added in the last 30 days
    $post_date = get_the_date('Y-m-d', $product->get_id());
    $newness_days = 30; // Number of days to consider a product as 'New'

    if ((time() - strtotime($post_date)) < ($newness_days * 24 * 60 * 60)) {
        echo '<span class="wp-dudecom-product-label new-label">New</span>';
    }

    // Example: Add a 'Sale' label to products on sale
    if ($product->is_on_sale()) {
        echo '<span class="wp-dudecom-product-label sale-label">Sale</span>';
    }
}

// Enqueue custom styles for product labels
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_styles');

function wp_dudecom_enqueue_custom_styles() {
    wp_add_inline_style('woocommerce-general', '
        .wp-dudecom-product-label {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #ff0000;
            color: #ffffff;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: bold;
            z-index: 100;
        }
        .wp-dudecom-product-label.new-label {
            background-color: #00ff00;
        }
        .wp-dudecom-product-label.sale-label {
            background-color: #ff0000;
        }
    ');
}
?>

Instrukcja

Lokalizacja pliku: Dodaj poniższy kod do pliku functions.php swojego motywu lub do pliku niestandardowej wtyczki.

Wymagania wstępne:

  • Upewnij się, że WooCommerce jest zainstalowane i aktywowane na Twojej stronie WordPress.

Kroki wdrożenia:

  1. Dostęp do panelu WordPress: Zaloguj się do panelu administracyjnego WordPress.
  2. Przejdź do Edytora motywu: Przejdź do Wygląd > Edytor motywu. Jeśli wolisz używać wtyczki, przejdź do Wtyczki > Dodaj nową i wyszukaj wtyczkę taką jak "Code Snippets", aby bezpiecznie dodać niestandardowy kod.
  3. Edytuj plik Functions: W Edytorze motywu znajdź i wybierz plik functions.php z listy plików po prawej stronie.
  4. Wstaw kod: Skopiuj i wklej podany fragment kodu na końcu pliku functions.php lub w pliku niestandardowej wtyczki.
  5. Zapisz zmiany: Kliknij przycisk Aktualizuj plik, aby zapisać swoje zmiany.
  6. Zweryfikuj etykiety: Odwiedź stronę swojego sklepu WooCommerce, aby upewnić się, że etykiety "Nowość" i "Wyprzedaż" są wyświetlane poprawnie na produktach.

Uwaga: Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej personalizacji, rozważ skontaktowanie się z wp-dude.com w celu uzyskania profesjonalnej pomocy w swoich projektach WordPress.