Jak wyświetlić „Oszczędzasz x%” poniżej cen sprzedaży dla prostych i zmiennych produktów w WooCommerce?
Opublikowany: 2019-04-03Wszyscy wiemy, jak rabaty przyciągają klientów i zwiększają sprzedaż. Jednak pokazanie, że sprzedajesz przedmiot za niższą cenę, nie wystarcza w dzisiejszych czasach, ponieważ wszyscy sprzedawcy i witryny e-commerce oferują zniżki w tym samym czasie. Gdy wyświetlane są tylko stare i nowe ceny, klient musi wykonać obliczenia, aby obliczyć, ile faktycznie zaoszczędził. Lepszym sposobem radzenia sobie z tym jest wyświetlenie procentu kwoty, którą klient oszczędza, dokonując tego zakupu. To daje im lepszy pomysł i łatwiejszy sposób na podjęcie decyzji, czy dokonać tego zakupu. Zobaczmy, jak możesz wyświetlić „Oszczędzasz x%” obok cen sprzedaży zarówno prostych, jak i zmiennych produktów w WooCommerce.
Jak wyświetlić, że zaoszczędzisz % poniżej cen sprzedaży prostych produktów
Wyświetlanie procentu zaoszczędzonej kwoty jest łatwe w przypadku prostych produktów, gdy znana jest regularna i cena sprzedaży. W normalnych przypadkach ceny prostego produktu są wyświetlane w następujący sposób:
Dodanie poniższego kodu do pliku functions.php motywu potomnego spowoduje wyświetlenie „Oszczędzasz x%” poniżej ceny prostego produktu, dzięki czemu użytkownik natychmiast zorientuje się, jak dobra lub zła jest oferta.
funkcja ts_you_save() {
globalny produkt;
if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('grouped') ) {
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true );
$sale_price = get_post_meta( $produkt->get_id(), '_sale_price', prawda );
if( !empty($sale_price)) {
$kwota_zaoszczędzona = $regular_cena - $cena_sprzedaży;
$currency_symbol = get_woocommerce_currency_symbol();
$procent = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p><b>Zapisujesz: <?php echo number_format($percentage,0, '', '').'%'; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );W tym fragmencie kodu dodaliśmy funkcję ts_you_save() do wbudowanego haka WooCommerce woocommerce_single_product_summary , która wskazuje na obszar pod tytułem produktu. Funkcja ts_you_save() identyfikuje typ produktu i oblicza procent zaoszczędzonej kwoty, jeśli produkt jest na wyprzedaży. Dodając trochę CSS, możesz wydrukować to w sposób, w jaki chcesz:
Jeśli chcesz wyświetlić zaoszczędzoną kwotę wraz z wartością procentową, możesz nieznacznie zmodyfikować ten sam fragment kodu w następujący sposób:
funkcja ts_you_save() {
globalny produkt;
if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('grouped') ) {
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true );
$sale_price = get_post_meta( $produkt->get_id(), '_sale_price', prawda );
if( !empty($sale_price)) {
$kwota_zaoszczędzona = $regular_cena - $cena_sprzedaży;
$currency_symbol = get_woocommerce_currency_symbol();
$procent = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p><b>Zapisujesz: <?php echo number_format($amount_saved,2, '.', '')." (". number_format($percentage,0, '', '')."%)" ; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );Funkcja number_format jest wbudowaną funkcją PHP, która przyjmuje 4 argumenty:
- Liczba lub w naszym przypadku odpowiednio zaoszczędzona kwota i procent (skorzystaliśmy z funkcji dwukrotnie).
- Liczba miejsc po przecinku. Ustawiliśmy go na 2 dla zapisanej kwoty i 0 dla procentu, ponieważ nie chcemy wyświetlać żadnych wartości dziesiętnych dla procentu.
- Separator dziesiętny, którego chcesz użyć. Ustawiliśmy to na kropkę (.) dla zaoszczędzonej kwoty i pustą wartość dla procentu.
- Separator tysięcy. Jeśli zaoszczędzona kwota przekracza 1000, możesz użyć tego argumentu. Obecnie ustawiliśmy to na puste.
Zaoszczędzona kwota oraz wartość procentowa będą teraz wyświetlane pod ceną:
Jak wyświetlić, że zaoszczędzisz % poniżej cen sprzedaży dla różnych produktów
Jeśli chodzi o produkty zmienne, staje się to trudne, ponieważ każda odmiana produktu może mieć inną cenę. Na przykład koszulka może mieć wyższą cenę za większy rozmiar, podczas gdy cena tej samej koszulki w mniejszym rozmiarze może być niższa. W takich przypadkach WooCommerce wyświetla zakres cen sprzedaży poniżej tytułu produktu, podczas gdy ceny regularne i sprzedaży każdej odmiany produktu są wyświetlane nad przyciskiem Dodaj do koszyka po wybraniu odmiany. Ilustrują to poniższe obrazy:
W takim przypadku pod ceną wyświetlaną dla danego wariantu wydrukujemy tekst „Oszczędzasz” wraz z zapisanym odsetkiem. Będziesz musiał dodać fragmenty kodu zarówno do plików functions.php , jak i footer.php motywu potomnego .
Poniższy fragment kodu, który dodasz w pliku footer.php, zawiera funkcję, która jest uruchamiana po zmianie odmiany. W naszym przypadku jest to wywoływane, gdy odmiana rozmiaru zostanie wybrana lub zmieniona za pomocą menu rozwijanego Rozmiar. Ta funkcja przechwytuje konkretny identyfikator odmiany i wysyła go do functions.php za pośrednictwem wywołania ajax.
<skrypt>
jQuery(dokument).gotowy(funkcja($) {
$('input.variation_id').change( function(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val(); // Wybrany identyfikator odmiany
$.ajax({
url: "https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php",
data: {'action':'ts_calc_percentage_saved','vari_id': var_id} ,
sukces: funkcja(dane) {
jeśli (dane>0)
{
$( ".woocommerce-variation-price" ).append( "<p>Oszczędzasz: "+data+"%</p>");
}
},
błąd: function(errorThrown){
console.log(errorThrown);
}
});
}
});
});
</script>
Musisz zastąpić <your_woocommerce_site_url> podstawowym adresem URL swojej witryny WooCommerce.
Poniższy fragment kodu, który dodasz w pliku functions.php zawiera funkcję ts_calc_percentage_saved , która pobiera zwykłą cenę i cenę sprzedaży produktu na podstawie identyfikatora odmiany, oblicza wartość procentową i zwraca to samo do funkcji ajax w stopce. plik php.
//W ten sposób podłączasz funkcję wywoływaną przez ajax w WordPressie
add_action ("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");
//Poniższa funkcja jest wywoływana przez skrypt ajax w footer.php
funkcja ts_calc_percentage_saved(){
// $_REQUEST zawiera wszystkie dane przesłane przez ajax
jeśli ( isset($_REQUEST)) {
$procent=0;
$variation_id = sanitize_text_field($_REQUEST['vari_id']);
$variable_product = wc_get_product($variation_id);
$regular_price = $variable_product->get_regular_price();
$sale_price = $variable_product->get_sale_price();
if( !empty($sale_price)) {
$kwota_zaoszczędzona = $regular_cena - $cena_sprzedaży;
$currency_symbol = get_woocommerce_currency_symbol();
$procent = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
}
umrzeć($procent);
}
}Funkcja sanitize_text_field() to funkcja WordPress, która pomaga oczyścić dane wejściowe, które otrzymujemy od strony klienta.
W ten sposób zobaczysz teraz „Oszczędzasz” wraz z procentem zaoszczędzonej kwoty pod ceną odmiany.
Możesz to zmienić w dowolny sposób, w samej funkcji ajax, dodając HTML i CSS w funkcji append w tym wierszu:
$( „.woocommerce-variation-price” ).append( „<p>Oszczędzasz: „+dane+”%</p>”);
Wyświetlaj % oszczędności poniżej tytułu produktu zamiast nad przyciskiem Dodaj do koszyka dla różnych produktów
Jeśli chcesz, możesz wyświetlić tekst Zapisujesz wraz z procentem zapisanym poniżej tytułu produktu zamiast nad przyciskiem „Dodaj do koszyka”, dodając więcej fragmentów kodu do wymienionych powyżej.
Ten fragment kodu powinien zostać dodany do pliku functions.php motywu potomnego, oprócz wspomnianych powyżej fragmentów kodu (w plikach footer.php i functions.php).
//Poniższy kod służy do przesunięcia ceny
funkcja ts_shuffle_variable_product_elements(){
jeśli ( is_product() ) {
globalny $post;
$produkt = wc_get_product( $post->ID );
if ( $product->is_type( 'zmienna' ) ) {
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
}
}
}
add_action( 'woocommerce_before_single_product', 'ts_shuffle_variable_product_elements' );Zasadniczo ten kod usuwa elementy (w tym tytuł) i zmienia ich kolejność tak, jak chcesz. W rezultacie zakres cen zostanie usunięty, a cena odmiany zostanie wyświetlona po wybraniu odmiany, wraz z tekstem Zapisujesz poniżej, jak pokazano na ilustracji:
