Code functions.php

Bạn thêm đoạn code sau đây vào file functions.php

add_shortcode('coderlor_woo_product_sales', 'coderlor_woocommerce_product_sales');
function coderlor_woocommerce_product_sales() {
    ob_start();
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 5,
        'meta_query' => array(
            'relation' => 'OR',
            array( // Simple products
                'key'     => '_sale_price',
                'value'   => 0,
                'compare' => '>',
                'type'    => 'numeric',
            ),
            array( // Variable products
                'key'     => '_min_variation_sale_price',
                'value'   => 0,
                'compare' => '>',
                'type'    => 'numeric',
            ),
        ),
    );

    $products = new WP_Query($args);

    if ($products->have_posts()) {
        echo '<div class="blog-cat"><ul class="products">';
        while ($products->have_posts()) {
            $products->the_post();
            global $product;
            $id = $product->get_id();
            if ($product->is_on_sale()) { ?>
                <li class="blog-item" style="background-repeat: no-repeat; background-size: cover; background: url(<?php echo get_the_post_thumbnail_url($id, 'large'); ?>)">
                    <a href="<?php the_permalink(); ?>" class="b-name">
                        <span><?php the_title(); ?></span>
                        <span class="price"><?php echo $product->get_price_html(); ?></span>
                    </a>
                </li>
            <?php }
        }
        echo '</ul></div>';
        return ob_get_clean();
    }
}

Code CSS

Bạn thêm đoạn code CSS vào file style.css

.price{line-height:1;}
span.amount{color:#111;font-weight:700;white-space:nowrap;}
del span.amount{font-weight:400;margin-right:.3em;opacity:.6;}
.blog-cat .blog-item{position:relative;margin-bottom:10px;}
.blog-cat .blog-item .b-name{position:absolute;bottom:0;left:0;width:100%;padding:20px;color:#fff;font-size:18px;line-height:18px;text-align:center;}
.blog-cat .blog-item .b-name::before{content:"";position:absolute;width:100%;height:100%;left:0;bottom:0;background:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.95));z-index:0;}
.blog-cat .blog-item .b-name span{position:relative;z-index:1;height:100%;flex-direction:column;justify-content:flex-end;line-height:25px;}
.blog-cat .blog-item .b-name .price{color:red;opacity:1;display:block;clear:both;margin-top:10px;}
.blog-cat .blog-item span.amount{color:#fff;font-weight:700;}
.blog-cat .blog-item bdi{color:#ff0000;}
.blog-cat li{list-style:none;}
.blog-cat .blog-item{position:relative;margin-bottom:10px;background-repeat:no-repeat;background-size:auto;padding:102px;}

Và đây là kết quả

Chỉ đơn giản thế thôi, chúc bạn thành công !