Jak dodać procentowy rabat w WooCommerce
Objaśnienie
Chcesz pokazać swoim klientom, ile oszczędzają na przecenionym produkcie? Ten fragment kodu robi dokładnie to, wyświetlając procent zniżki obok ceny promocyjnej na stronach produktów WooCommerce.
- Gdzie się pojawia: Procent zniżki będzie widoczny na stronie pojedynczego produktu, tuż obok ceny wyprzedażowej.
- Jak to działa: Kod sprawdza, czy produkt jest w promocji. Jeśli tak, oblicza procent zniżki, porównując cenę regularną z ceną promocyjną.
- Co pokazuje: Jeśli jest zniżka, wyświetla komunikat taki jak "Oszczędź 20%" na czerwono, co przyciąga uwagę klientów.
Ten fragment zawiera również trochę CSS, aby stylizować procent zniżki, zapewniając, że wyróżnia się on pogrubioną, czerwoną czcionką. To prosty, ale skuteczny sposób na podkreślenie oszczędności i zachęcenie do zakupów.
Kod
<?php
// Add percentage discount next to the promotional price in WooCommerce
// Hook into the WooCommerce single product summary to display the discount percentage
add_action('woocommerce_single_product_summary', 'wp_dudecom_display_discount_percentage', 15);
function wp_dudecom_display_discount_percentage() {
global $product;
// Check if the product is on sale
if ($product->is_on_sale()) {
// Get the regular and sale prices
$regular_price = $product->get_regular_price();
$sale_price = $product->get_sale_price();
// Calculate the discount percentage
$discount_percentage = round((($regular_price - $sale_price) / $regular_price) * 100);
// Display the discount percentage
if ($discount_percentage > 0) {
echo '<p class="discount-percentage">Save ' . esc_html($discount_percentage) . '%</p>';
}
}
}
// Add custom CSS to style the discount percentage
add_action('wp_head', 'wp_dudecom_add_discount_percentage_styles');
function wp_dudecom_add_discount_percentage_styles() {
echo '<style>
.discount-percentage {
color: #ff0000;
font-weight: bold;
margin-top: 10px;
}
</style>';
}
?>
Instrukcja
Lokalizacja pliku: Dodaj poniższy 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.
Kroki wdrożenia:
- Uzyskaj dostęp do panelu administracyjnego WordPress.
- Przejdź do Wygląd > Edytor motywu, jeśli dodajesz kod do
functions.php
. Alternatywnie, użyj menedżera plików lub klienta FTP, aby uzyskać dostęp do plików swojego motywu. - Znajdź i otwórz plik
functions.php
aktywnego motywu. - Skopiuj podany fragment kodu.
- Wklej kod na końcu pliku
functions.php
. - Zapisz zmiany w pliku.
- Odwiedź stronę produktu na swojej stronie, aby zweryfikować, że procent zniżki jest wyświetlany obok ceny promocyjnej.
Uwaga: Jeśli wolisz użyć własnej wtyczki, utwórz nowy plik wtyczki w katalogu wp-content/plugins
, wklej kod i aktywuj wtyczkę z panelu administracyjnego WordPress.
Jeśli potrzebujesz pomocy przy wdrożeniu lub bardziej zaawansowanej funkcjonalności, rozważ skorzystanie z usług wp-dude.com.