ShortCode danh sách sản phẩm nổi Featured trong WooCommerce

Get all Products by Featured, lấy toàn bộ danh sách sản phẩm nổi bật (Featured), Thêm danh sách những sản phẩm nổi bật Featured vào web wordpress sử dụng plugin WooCommerce, thêm vào web ShortCode danh sách sản phẩm nổi Featured trong WooCommerce khá đơn giản như demo dưới, chỉ cần làm theo hướng dẫn dưới nhé.

Các bạn có thể tùy biến theo ý của mình với CSS, HTML tùy ý để tạo ra những bản teamplate sản phẩm nổi bật Featured theo ý muốn.

Demo trên máy tính:



Demo trên Mobi:



Cách làm:

Truy cập vào function.php của themes ở mục /wp-content/themes/tên-themes/function.php. Tiếp theo chèn code sau vào function.php để tạo 1 Shortcode, và sử dụng shortcode này chèn vào nơi cần hiển thị.

PHP:

/*lay danh sach san pham noi bat*/
function itseovn_productlistfeatured($args, $content) {
   $tax_query[] = array(
       'taxonomy' => 'product_visibility',
       'field'    => 'name',
       'terms'    => 'featured',
       'operator' => 'IN',
   );
    $per_page =  $args['perlattop'];
    if ( wp_is_mobile() )
    {
        $per_page = $args['permobi'];
    }
    $args = array( 'post_type' => 'product','posts_per_page' => $per_page,'ignore_sticky_posts' => 1, 'tax_query' => $tax_query);
    $getposts = new WP_query( $args);
    global $wp_query; $wp_query->in_the_loop = true;
    $contents .= '<div class="cs-prolistfeatured">';
    while ($getposts->have_posts()) : $getposts->the_post();
        global $product;
        $contents .= '<div class="item-product">';
            $contents .= '<a href="'.$product->get_permalink().'">';
                $contents .= get_the_post_thumbnail(get_the_ID(), 'thumnail', array( 'class' =>'thumnail') );
            $contents .= '</a>';
            $contents .= '<p><a href="'.$product->get_permalink().'">'.$product->get_title().'</a></p>';
            $contents .= '<div class="price-product">'.$product->get_price_html().'</div>';
            $contents .= '<div class="add-to-cart-button cs-addtocartbutton">';
                $contents .= '<a class="qn_btn cs-addtocart" href="/?add-to-cart='.$product->get_id().'">Thêm vào giỏ</a>';
                $contents .= '<a class="qn_btn cs-buynownew" href="/cart/?add-to-cart='.$product->get_id().'">Mua ngay</a>';
            $contents .= '</div>';
        $contents .= '</div>';
    endwhile;
    $contents .= '</div>';
    wp_reset_postdata();
   return $contents;
}
add_shortcode('shortcode_productlistfeatured', 'itseovn_productlistfeatured');
//[shortcode_productlistfeatured perlattop="5" permobi="4"]/////////////////////////////////////////////
/*end lay danh sach san pham noi bat */


Chèn code css sau vào style.css của themes ở mục: /wp-content/themes/tên-themes/style.css để hiện thị đẹp giống demo:

HTML:

/*proudct featured */
.cs-prolistfeatured
{
max-width: 1190px;
margin: 0 auto;
display: flex;
background-color: #f5fff6;
padding: 0px 20px 10px 20px;
width: 100%;
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.cs-prolistfeatured .item-product
{
max-width: 20%;
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
padding: 0px 15px 15px 15px;
text-align: center;
}
.cs-prolistfeatured .item-product p
{
font-size: 16px;
font-weight: 700;
margin-bottom: 2px;
color: #025b8e;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
margin-top: 10px;
}
.cs-prolistfeatured .item-product .cs-addtocart
{
border-radius: 5px;
padding: 5px 7px;
margin-top: 0px;
border: none;
background-color: #80cb64;
color: #fff;
font-weight: normal;
text-transform: none;
font-size: 12px;
margin-right: 5px;
line-height: 22px;
vertical-align: -3px;
}
.cs-prolistfeatured .item-product .cs-buynownew
{
border-radius: 5px;
padding: 5px 7px;
vertical-align: -3px;
margin-top: 0px;
border: none;
background-color: #2077eb;
color: #fff;
font-weight: normal;
text-transform: none;
font-size: 12px;
line-height: 22px;
}
@media(max-width:767px) {
.cs-prolistfeatured .item-product
{
max-width: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
padding: 0px 5px 15px 5px;
text-align: center;
}
.cs-prolistfeatured {
    padding: 5px;
}
}
/*end prouct featured*/

Sau khi xong lưu lại tải lại lên hosting, sau đó bạn chỉ cần vào nơi cần hiển thị add shortcode sau vào là nơi muốn chèn HTML:

HTML:

[shortcode_productlistfeatured perlattop="5" permobi="4"]

Chèn vào code PHP thì mã sau:

PHP:

<?php echo do_shortcode('[shortcode_productlistfeatured perlattop="5" permobi="4"]') ?>

• Với perlattop: số lượng sản phẩm muốn hiển thị trên latop
• permobi: số lượng sản phẩm muốn hiển thị trên mobi

Sản phẩm nổi bật là những sản phẩm được tick như hình dưới, chỉ cần vào danh sách sản phẩm, tick chọn vào hình ngôi sao để bật tắt sản phẩm nổi bật.


Như vậy là xong, ra xem kết quả nhé.