Hiển thị số sản phẩm đã bán giống Shoppe trong woocommerce

Code PHP và css dưới đây sẽ cho chúng ta số lượng sản phẩm đã bán ra của 1 sản phẩm nào đó trong danh sách sản phẩm giống kiểu Shopee.

Các bạn có thể xem qua demo tại đây: https://shop6.muatheme.com/

Bước 1 – Set thông số tồn kho cho sản phẩm

Cơ chế hiển thị của code này là dựa vào tồn kho sản phẩm và số hàng đã bán (khách tạo đơn hàng)

Bước 2 – Thêm đoạn code PHP này vào file functions.php của child theme (Giao diện -> Sửa giao diện -> functions.php)

[php] add_action(‘woocommerce_after_shop_loop_item_title’, ‘mt_view_product_sold’, 11);
function mt_view_product_sold()
{
global $product;
$stock = $product->get_stock_quantity();
$buy = get_post_meta($product->get_id(), ‘total_sales’, true);

$round = 0;

?>
<div class="flash-sale-process-mt">
<div class="flash-sale-process_bought"></div>
<?php if (!empty($stock) && $buy > 0) {
$round = round(($buy * 100 / ($stock + $buy)), 0);
?>
<div class="flash-sale-process-bar_text stock"><?php echo sprintf(__(‘Đã bán %s’, ‘woocommerce’), $buy); ?></div>

<?php } else { ?>
<div class="flash-sale-process-bar_text stock">Vừa mở bán</div>
<?php } ?>
<div class="flash-sale-complete-wapper">
<div class="flash-sale-sizer-stock" style="width:<?php echo $round . ‘%’; ?>">
<div class="flash-sale-bought-size"></div>
</div>
</div>
<?php
if ($buy > 5) {
echo ‘<div class="flash-sale-process_fire"></div>’;
}
?>

</div>

<?php

}
[/php]

Bước 3 – Thêm đoạn code CSS này vào cuối file style.css của child theme (Giao diện -> Sửa giao diện)

Lưu ý:

• Tải 2 hình ảnh trong code css về và upload lên Thư viện của website, sau đó copy link hình ảnh thay vào code css
• Ctrl + F5 (Refresh) trình duyệt nhiều lần để trình duyệt load css mới
• Clear cache nếu có sử dụng plugin cache

[css]

.flash-sale-process-mt{
width: 100%;
height: 16px;
background: url(https://shop6.muatheme.com/wp-content/uploads/2021/11/934cc0df9edb42d22c38044417c8a94a.png) 0 100% no-repeat;
background-size: cover;
position: relative;
border-radius: 8px;
margin: 5px 0;
}
.flash-sale-process_bought{
background: #002bff73;
overflow: hidden;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
height: 16px;
border-radius: 8px;
}
.flash-sale-process_fire{
background: url(https://shop6.muatheme.com/wp-content/uploads/2021/11/d224da21491f6660be6e020e12aff419.png) 0 no-repeat;
width: 18px;
height: 21px;
background-size: contain;
position: absolute;
left: 3px;
top: -6px;
}
.flash-sale-process-bar_text.stock{
text-transform: uppercase;
font-size: 12px;
color: #fff;
text-align: center;
position: relative;
z-index: 2;
}
.flash-sale-complete-wapper{
width: 100%;
background: transparent;
overflow: hidden;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
height: 16px;
border-radius: 8px;
}
.flash-sale-bought-size{
position: absolute;
width: 100%;
height: 100%;
background: #ffbda6;
}
.flash-sale-sizer-stock{
background: #fff;
float: right;
position: relative;
height: 18px;
}
[/css]