[Hướng dẫn] Hiển thị % giá tiết kiệm được siêu đẹp ngoài trang chủ Flatsome

Hiển thị giá tiết kiệm được ngoài trang chủ-fls

Hiển thị % giá tiết kiệm được cho khách hàng thấy rõ cũng là 1 cách để kích thích nhu cầu mua sắm cho khách hàng. Nhiều bạn muốn % tiết kiệm đó ngoài việc hiển thị trong trang chi tiết sản phẩm còn muốn nó hiển thị ở ngoài trang chủ nữa.

Hôm nay flatsome a-z sẽ hướng dẫn các bạn cách hiển thị giá tiết kiệm được siêu đẹp ngoài trang chủ Flatsome.

[Hướng dẫn] Hiển thị % giá tiết kiệm được siêu đẹp ngoài trang chủ Flatsome

Hiển thị giá tiết kiệm được ngoài trang chủ flatsome-01
Hiển thị giá tiết kiệm được ngoài trang chủ flatsome-01

Các bạn copy và paste đoạn code sau vào file cuối functions.php nhé

//Hiển thị % giá tiết kiệm
function saveprice(){
global $product;
if( $product->is_on_sale()){
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_price();
$saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 1 ) . '%';
echo '<span class="tietkiem">Tiết kiệm: '.$saving_percentage.'</span>';
}
}
add_action('woocommerce_after_shop_loop_item_title','saveprice');

Lưu lại và chỉnh sửa thêm CSS cho đẹp nha. Mình có để class là tietkiem cho mọi người dễ chỉnh sửa.

CSS gợi ý, các bạn tuỳ chỉnh cho phù hợp với giao diện web của mình nhé

.tietkiem{
background-image: linear-gradient( 
-90deg
,#ec1f1f 0,#ff9c00 100%);
border-radius: 10px;
padding: 3px 8px 3px 2px;
color:#fff;
}
.tietkiem:before{
content: ' ';
display: inline-block;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAaCAYAAAC+aNwHAAAABGdBTUEAALGPC/xhBQAAAVpJREFUOBGVki1LBFEUhueuH0FQTAuimxVE2KZBgxj8AxaLglj8AYLJZLOYtFpFwWQ2iMUkiyBqNCloEFEQYXzuzl7mzP0Y7z3w7j0f73PuDDtZFhl5njfRI5qJREobUB+6RL9otJxEZkD7SMd1JFLagFa6aPGzW04iMpgp9CEWzEZghQVoGN0L+I28kbLgVMA6PUmBty1YlxtRCzAuIv132THx7wKIcfRik9R3IbjfDDANkp+hpumJ8535pqhN+mySDMMhSo1OdwHUWiqJ/wu19c3tXsGRFOvm9k4SVpiPzLsr6mWKlmmIc568uEU0SW/QglLqp9q2KhYfe57slZ7vsiqNqYHs70F/XEtVZ6DCOIfs2AnY3TbknkWfUyvXGehgvhULHshHAla3jbkl4E/yaddV0wHYEgtWa6z+EfBFb8GB31HTBRxC3+gKDdRY/SOgSfSExvwOt/sHwv9i4NYIgYYAAAAASUVORK5CYII=) center center/50% 50% no-repeat #f13500;
background-position-x: 0;
background-position-y: 0;
width: 20px;
height: 20px;
border-radius: 50%;
vertical-align: middle;
position: relative;
top: -1px;
margin-right: 5px;
}
.price-wrapper .price {
margin-bottom: 10px;
}
.product-small.box {
height:300px;
}

Chúc các bạn thành công nhé ^^

Trả lời

Email của bạn sẽ không được hiển thị công khai.