Jak dodać procentowy rabat w WooCommerce

Jak dodać procentowy rabat w WooCommerceProcentowy rabat w WooCommerce obok cenyWyświetlanie procentowego rabatu na produkcie WooCommerceWooCommerce pokazuje procentowy rabat na stronie produktuDodaj informacje o promocji w WooCommerceWooCommerce wyświetla procentowy rabat obok cenyJak wyświetlić procentowy rabat w WooCommerceWtyczka WooCommerce do wyświetlania procentowego rabatuUstawienia zasad procentowego rabatu w WooCommercePokaż procentowy rabat w sklepie 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.