2478 lượt xem

Hướng dẫn hiển thị số lượng sản phẩm đã bán giống Shopee cho Woocomerce

Hiển thị số lượng sản phẩm giống Shoppee khá đẹp và hay ho, nhưng nhiều bạn chưa biết cách để làm như vậy. Vì thế nên hôm nay thiết kế website Alowebtot sẽ hướng dẫn các bạn code giống như vậy nhé.

image
Số lượng sản phẩm đã bán giống Shopee cho Woocommerce

Chuẩn bị code PHP và CSS

Chúng ta sử dụng code PHP và css để tạo ra số lượng sản phẩm đã bán được của 1 sản phẩm trong website của chúng ta trong danh sách sản phẩm giống của Shopee nhé!

Các bước xuất hiện số lượng sản phẩm đã bán cho website

Bước 1: Cài đặt số lượng sản phẩm trong kho.

Cách hoạt động của cái này sẽ dựa trên số sản phẩm trong kho và số sản phẩm đã được bán( số sản phẩm khách mua).

image 1
Cài đặt số lượng sản phẩm đang tồn kho

Bước 2: Thêm đoạn code này vào đường dẫn: Giao diện – Sửa giao diện – Function.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
 
}

Bước 3: Thêm CSS vào tùy biến CSS

.flash-sale-process-mt{
    width: 100%;
    height: 16px;
    background: url(https://alowebtot.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://alowebtot.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;
}

Cảm ơn các bạn đã ghé thăm website Alowebtot. Chúc các bạn một ngày tốt lành!

5/5 - (2 bình chọn)
Thẻ tìm kiếm: , , , , ,