Processing "Sold Product" like Shopee
Working fine with Flatsome Theme
PHP
Paste code to function.php in Child theme
add_action('woocommerce_after_shop_loop_item_title', 'xsolution_product_stock', 11);
function xsolution_product_stock()
{
global $product;
$stock = $product->get_stock_quantity();
$buy = get_post_meta($product->get_id(), 'total_sales', true);
if (!empty($stock) && $buy > 0) {
$round = round(100 - ($buy * 100 / $stock), 0);
?>
<div class="flash-sale-process">
<div class="flash-sale-process_bought"></div>
<div class="flash-sale-process-bar_text stock"><?php echo sprintf(__('Đã bán %s', 'woocommerce'), $buy); ?></div>
<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 > 10) {
echo '<div class="flash-sale-process_fire"></div>';
}
?>
</div>
<?php
}
?>
<?php
}CSS
Change background link to your media link
.flash-sale-process{
width: 100%;
height: 16px;
background: url(/wp-content/uploads/2021/05/hot-processing.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(/wp-content/uploads/2021/05/hot.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;
}
Media
Last updated