Snippet

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

Jak dodać niestandardowe etykiety do produktów WooCommerceTworzenie etykiet produktów w WordPressieDodaj nową etykietę do produktu WooCommerceNiestandardowe odznaki produktów dla WooCommerceWtyczka do etykiet produktów WooCommerceNajlepsza wtyczka do etykiet produktów WooCommerceWyświetlanie niestandardowych etykiet na produktach WooCommerceJak pokazać odznaki wyprzedaży w WooCommerceDostosowywanie etykiet produktów w WordPressieDodaj 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

1<?php 2// Add custom labels to WooCommerce products 3 4// Hook to display custom labels on WooCommerce products 5add_action('woocommerce_before_shop_loop_item_title', 'wp_dudecom_display_custom_product_label', 10); 6 7function wp_dudecom_display_custom_product_label() { 8 global $product; 9 10 // Example: Add a 'New' label to products added in the last 30 days 11 $post_date = get_the_date('Y-m-d', $product->get_id()); 12 $newness_days = 30; // Number of days to consider a product as 'New' 13 14 if ((time() - strtotime($post_date)) < ($newness_days * 24 * 60 * 60)) { 15 echo '<span class="wp-dudecom-product-label new-label">New</span>'; 16 } 17 18 // Example: Add a 'Sale' label to products on sale 19 if ($product->is_on_sale()) { 20 echo '<span class="wp-dudecom-product-label sale-label">Sale</span>'; 21 } 22} 23 24// Enqueue custom styles for product labels 25add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_styles'); 26 27function wp_dudecom_enqueue_custom_styles() { 28 wp_add_inline_style('woocommerce-general', ' 29 .wp-dudecom-product-label { 30 position: absolute; 31 top: 10px; 32 left: 10px; 33 background-color: #ff0000; 34 color: #ffffff; 35 padding: 5px 10px; 36 font-size: 12px; 37 font-weight: bold; 38 z-index: 100; 39 } 40 .wp-dudecom-product-label.new-label { 41 background-color: #00ff00; 42 } 43 .wp-dudecom-product-label.sale-label { 44 background-color: #ff0000; 45 } 46 '); 47} 48?>

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.