Blog hướng dẫn, Flatsome, Woocommerce
Thay đổi cách hiển thị giá sale bắt mắt người xem trong trang chi tiết sản phẩm
Chào các bạn, hôm nay mình chia sẻ cách thay đổi cách hiển thị giá sale bắt mắt người xem trrong trang chi tiết sản phẩm, các bạn cùng theo dõi nhé!
Bài viết hướng dẫn trên theme Flatsome, các bạn sử dụng theme khác có thể làm tương tự.
Nào, chúng ta cùng thực hành nhé!
Bước 1: Chép code vào function.php
Các bạn thực hiện chép đoạn code sau dán vào function.php nhé! Giao diện – sửa – function.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
/* * Thay đổi cách hiển thị giá sale trong trang chi tiết sp * Share by: giuseart.com */ function nbw_price_html($product, $is_variation = false){ ob_start(); if($product->is_on_sale()): ?> <?php endif; if($product->is_on_sale() && ($is_variation || $product->is_type('simple') || $product->is_type('external'))) { $sale_price = $product->get_sale_price(); $regular_price = $product->get_regular_price(); if($regular_price) { $sale = round(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100); $sale_amout = $regular_price - $sale_price; ?> <div class="nbw_single_price"> <div> <span class="nbw_price"><?php echo wc_price($sale_price); ?></span> </div> <div class="gia-chinh-hang"> <span class="label">Giá chính hãng:</span> <span class="nbw_price"><del><?php echo wc_price($regular_price); ?></del></span><span class="label-km">-<?php echo $sale; ?>%</span> </div> <div class="tiet-kiem-box"> <span class="label">Tiết kiệm:</span> <span class="nbw_price sale_amount"> <?php echo wc_price($sale_amout); ?> </span> </div> </div> <?php } }elseif($product->is_on_sale() && $product->is_type('variable')){ $prices = $product->get_variation_prices( true ); if ( empty( $prices['price'] ) ) { $price = apply_filters( 'woocommerce_variable_empty_price_html', '', $product ); } else { $min_price = current( $prices['price'] ); $max_price = end( $prices['price'] ); $min_reg_price = current( $prices['regular_price'] ); $max_reg_price = end( $prices['regular_price'] ); if ( $min_price !== $max_price ) { $price = wc_format_price_range( $min_price, $max_price ) . $product->get_price_suffix(); } elseif ( $product->is_on_sale() && $min_reg_price === $max_reg_price ) { $sale = round(((floatval($max_reg_price) - floatval($min_price)) / floatval($max_reg_price)) * 100); $sale_amout = $max_reg_price - $min_price; ?> <div class="nbw_single_price"> <div> <span class="nbw_price"><?php echo wc_price($min_price); ?></span> </div> <div class="gia-chinh-hang"> <span class="label">Giá chính hãng:</span> <span class="nbw_price"><del><?php echo wc_price($max_reg_price); ?></del></span><span class="label-km">-<?php echo $sale; ?>%</span> </div> <div class="tiet-kiem-box"> <span class="label">Tiết kiệm:</span> <span class="nbw_price sale_amount"> <?php echo wc_price($sale_amout); ?> </span> </div> </div> <?php } else { $price = wc_price( $min_price ) . $product->get_price_suffix(); } } echo $price; }else{ ?> <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) );?>"><?php echo $product->get_price_html(); ?></p> <?php } return ob_get_clean(); } function woocommerce_template_single_price(){ global $product; echo nbw_price_html($product); } add_filter('woocommerce_available_variation','nbw_woocommerce_available_variation', 10, 3); function nbw_woocommerce_available_variation($args, $thisC, $variation){ $old_price_html = $args['price_html']; if($old_price_html){ $args['price_html'] = nbw_price_html($variation, true); } return $args; } |
Bước 2: Trang trí đẹp mắt bằng CSS
Các bạn copy toàn bộ code CSS dưới đây vào Giao diện – Tùy biến – Style – Custom CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.nbw_single_price { margin-bottom: 10px; } .product-info .price ins bdi, .product-info .price bdi, .nbw_single_price bdi { font-size: 30px; color: #E5322D; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #333; } .nbw_single_price .gia-chinh-hang, .nbw_single_price .gia-chinh-hang bdi { font-size: 14px; color: #565656; text-shadow: none; } del span.amount { opacity: 1; } .gia-chinh-hang .label-km { background: #da0000; padding: 3px 7px; color: white; border-radius: 3px; } .nbw_single_price .tiet-kiem-box { margin-top: 5px; } |
Bước 3: Lưu lại và hưởng thành quả
Các bạn thực hiện xem ok không nhé, nếu có lỗi gì báo mình với!
