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:
- Dostęp do panelu WordPress: Zaloguj się do panelu administracyjnego WordPress.
- 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.
- Edytuj plik Functions: W Edytorze motywu znajdź i wybierz plik
functions.php
z listy plików po prawej stronie. - Wstaw kod: Skopiuj i wklej podany fragment kodu na końcu pliku
functions.php
lub w pliku niestandardowej wtyczki. - Zapisz zmiany: Kliknij przycisk Aktualizuj plik, aby zapisać swoje zmiany.
- 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.