Domyślnie Woocommerce pokazuję plakietkę „wyprzedaż” lub „promocja” na stronie naszego sklepu. Taką plakietkę możemy oczywiście całkowicie usunąć lub dostosować jej wygląd wedle własnego uznania. Jednak nie na tym dziś się skupimy.
Ciekawym rozwiązaniem jest zamienić standardowy napis informujący o promocji na wyświetlany, procentowy rabat na stronie sklepu przy danym produkcie.
Żeby uzyskać efekt znajdujący się powyżej, pierw musimy dodać krótki kod PHP, a następnie wystylizować go za pomocą CSS.
add_action( 'woocommerce_before_shop_loop_item_title', 'pokarz_procentowy_rabat', 25 );function pokarz_procentowy_rabat() {global$product;if( ! $product->is_on_sale() ) return;if( $product->is_type( 'simple') ) {$max_percentage= ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;} elseif( $product->is_type( 'variable') ) {$max_percentage= 0;foreach( $product->get_children() as$child_id) {$variation= wc_get_product( $child_id);$price= $variation->get_regular_price();$sale= $variation->get_sale_price();if( $price!= 0 && ! empty( $sale) ) $percentage= ( $price- $sale) / $price* 100;if( $percentage> $max_percentage) {$max_percentage= $percentage;}}}if( $max_percentage> 0 ) echo"<div class='sale-perc'>-". round( $max_percentage) . "%</div>";}
Oczywiście powyższy kod umieszczamy w pliku functions.php. Jak już to wykonaliśmy, kolejno musimy dodać krótki kod CSS, który w moim przypadku wygląda tak:
.sale-perc {
background-color: #D9534F;
display: inline;
padding: .2em .6em .3em;
font-size: 20px;
font-weight: bold;
color: #fff;
text-align: center;
border-radius: .25em;
font-family:montserrat;
}
Oczywiście kod można zmodyfikować indywidualnie pod siebie.