WooCommerce nie pokazuje przekreślonej ceny regularnej przy wariantach? Napraw to.

Jeśli prowadzisz sklep WooCommerce z produktami, które mają warianty np. różne rozmiary, kolory czy opcje – pewnie zauważyłaś, że WooCommerce domyślnie wyświetla ceny w stylu „Od 49 zł”. Bez przekreślonej ceny regularnej, bez wyraźnego pokazania promocji.

Dla klientki to słabe. Nie widzi ile oszczędza, nie widzi że w ogóle jest promocja. A to bezpośrednio wpływa na konwersję.

Na szczęście da się to naprawić kilkoma linijkami kodu.

Czemu WooCommerce nie pokazuje przekreślonej ceny przy wariantach?

Produkty z wariantami są bardziej skomplikowane niż proste produkty. Każdy wariant może mieć inną cenę regularną i inną cenę promocyjną. WooCommerce nie wie, który wariant wybrać żeby pokazać „tę właściwą” przekreśloną cenę – więc domyślnie pokazuje zakres cen od najniższej do najwyższej, bez rozróżnienia na regularną i promocyjną.

Efekt jest taki że promocja istnieje w systemie, ale klientka jej nie widzi. A tego chcemy uniknąć.

Rozwiązanie – kod w functions.php

Wklejasz poniższy kod do pliku functions.php w motywie potomnym:

add_filter('woocommerce_variable_sale_price_html', 'specka_variable_price_format', 10, 2);
add_filter('woocommerce_variable_price_html', 'specka_variable_price_format', 10, 2);
function specka_variable_price_format($price, $product) {
    $variation_min_reg_price  = $product->get_variation_regular_price('min', true);
    $variation_max_reg_price  = $product->get_variation_regular_price('max', true);
    $variation_min_sale_price = $product->get_variation_sale_price('min', true);
    $variation_max_sale_price = $product->get_variation_sale_price('max', true);

    if ($variation_min_reg_price != $variation_min_sale_price ||
        $variation_max_reg_price != $variation_max_sale_price) {
        $price = '<del>' . wc_price($variation_min_reg_price) . ' - ' . wc_price($variation_max_reg_price) . '</del> ' .
                 '<ins>' . wc_price($variation_min_sale_price) . ' - ' . wc_price($variation_max_sale_price) . '</ins>';
    }
    return $price;
}

Co robi ten kod krok po kroku?

Kod podpina się pod dwa filtry WooCommerce – woocommerce_variable_price_html i woocommerce_variable_sale_price_html. Oba odpowiadają za wyświetlanie cen przy produktach zmiennych – pierwszy dla cen standardowych, drugi specjalnie dla cen promocyjnych.

Następnie pobiera cztery wartości dla danego produktu:

• najniższą i najwyższą cenę regularną spośród wszystkich wariantów
• najniższą i najwyższą cenę promocyjną spośród wszystkich wariantów

Potem sprawdza warunek – czy cena minimalna regularna różni się od minimalnej promocyjnej, albo czy cena maksymalna regularna różni się od maksymalnej promocyjnej. Innymi słowy – czy w ogóle jest jakaś promocja w tym produkcie.

Jeśli tak – buduje nowy format ceny. Cena regularna zostaje opakowana w tag <del>, który ją przekreśla, a cena promocyjna w tag <ins>, który ją wyróżnia. Klientka widzi zakres przekreślonej ceny regularnej i obok zakres ceny po promocji.

Jeśli promocji nie ma – kod zwraca oryginalny format ceny bez żadnych zmian.

Efekt na stronie

Zamiast: Od 49 zł

albo tylko cen w promocji klientka zobaczy:

49 zł – 99 zł 39 zł – 79 zł

Różnica w odbiorze jest ogromna. Promocja jest widoczna od razu, klientka wie ile oszczędza.

Ważne rzeczy do zapamiętania

Kod wklejasz zawsze do motywu potomnego – nigdy do motywu głównego, bo stracisz zmiany przy aktualizacji. Jeśli nie masz jeszcze motywu potomnego – to pierwszym krokiem przed wklejaniem jakiegokolwiek kodu do functions.php jest jego stworzenie.