Demo đây nhé:
Thêm code vào function.php của theme, nếu xài child theme thì up vào function.php của child theme
add_action('woocommerce_after_shop_loop_item_title', 'isures_2718_product_stock', 11); function isures_2718_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-isures"> <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 }
Thêm css ở file Style.css hoặc Flatsome -> Custom CSS
.flash-sale-process-isures{ width: 100%; height: 16px; background: url(https://deo.shopeemobile.com/shopee/shopee-pcmall-live-sg/assets/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://deo.shopeemobile.com/shopee/shopee-pcmall-live-sg/assets/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; }