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

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi admin, 11/10/21.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,488
    Đã được thích:
    1,079
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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:

    tao-danh-sach-san-pham-noi-bat-wooCommerce-featured-tren-may-tinh.jpg

    Demo trên Mobi:

    tao-danh-sach-san-pham-noi-bat-wooCommerce-featured.jpg

    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.

    san-pham-noi-bat.jpg
    Như vậy là xong, ra xem kết quả nhé.
     
    Cảm ơn đã xem bài:

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

    Chỉnh sửa cuối: 11/10/21


Like và Share ủng hộ ITSEOVN