Thiết Kế Website
SEO tổng thể
Sáng Tạo Nội Dung
Bộ nhận diện thương hiệuBà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 |
/* * Thay đổi cách hiển thị giá sale trong trang chi tiết sp */ functionnbw_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"><?phpechowc_price($sale_price);?></span> </div> <div class="gia-chinh-hang"> <span class="label">Giáchínhhãng:</span> <span class="nbw_price"><del><?phpechowc_price($regular_price);?></del></span><span class="label-km">-<?phpecho$sale;?>%</span> </div> <div class="tiet-kiem-box"> <span class="label">Tiếtkiệm:</span> <span class="nbw_price sale_amount"><?phpechowc_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"><?phpechowc_price($min_price);?></span> </div> <div class="gia-chinh-hang"> <span class="label">Giáchínhhãng:</span> <span class="nbw_price"><del><?phpechowc_price($max_reg_price);?></del></span><span class="label-km">-<?phpecho$sale;?>%</span> </div> <div class="tiet-kiem-box"> <span class="label">Tiếtkiệm:</span> <span class="nbw_price sale_amount"><?phpechowc_price($sale_amout);?></span> </div> </div> <?php }else{ $price=wc_price($min_price).$product->get_price_suffix(); } } echo$price; }else{?> <pclass="<?phpechoesc_attr(apply_filters('woocommerce_product_price_class','price'));?>"><?phpecho$product->get_price_html();?></p> <?php} returnob_get_clean(); } functionwoocommerce_template_single_price(){ global$product; echo nbw_price_html($product); } add_filter('woocommerce_available_variation','nbw_woocommerce_available_variation',10,3); functionnbw_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:1px1px0#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-hangbdi{ font-size:14px; color:#565656; text-shadow:none; } del span.amount{ opacity:1; } .gia-chinh-hang.label-km{ background:#da0000; padding:3px7px; 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!