Jak dodać procentowy rabat w WooCommerce

Jak dodać procentowy rabat w WooCommerce; Procentowy rabat w WooCommerce obok ceny; Wyświetlanie procentowego rabatu na produkcie WooCommerce; WooCommerce pokazuje procentowy rabat na stronie produktu; Dodaj informacje o promocji w WooCommerce; WooCommerce wyświetla procentowy rabat obok ceny; Jak wyświetlić procentowy rabat w WooCommerce; Wtyczka WooCommerce do wyświetlania procentowego rabatu; Ustawienia zasad procentowego rabatu w WooCommerce; Pokaż 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:

  1. Uzyskaj dostęp do panelu administracyjnego WordPress.
  2. 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.
  3. Znajdź i otwórz plik functions.php aktywnego motywu.
  4. Skopiuj podany fragment kodu.
  5. Wklej kod na końcu pliku functions.php.
  6. Zapisz zmiany w pliku.
  7. 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.