Chèn chi tiết sản phẩm woocommerce vào bài viết Posts wordpress

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
    Add Products WooCommerce to Posts, Chèn chi tiết sản phẩm woocommerce vào bài viết Posts wordpress như thế nào? hôm nay ITSEOVN sẽ hướng dẫn các bạn chèn đóng khung mô tả sản phẩm, gồm: hình ảnh sản phẩm, tiêu đề sản phẩm, giá sản phẩm, mô tả sản phẩm, nút mua ngay, nút xem sản phẩm chi tiết,... và các bạn có thể tùy biên riêng cho code theo ý.

    DEMO: bạn có thể mua sản phẩm ngay ở bài viết, khách hàng không cần vào chi tiết sản phẩm mới mua được.
    chen-chi-tiet-san-pham-vao-bai-viet-post.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.
    PHP:
    /*tao khung san pham trong blog*/
    function itseovn_productbyid($args$content) {
        
    $product   wc_get_product$args['id'] );
        
    $image_id  $product->get_image_id();
        
    $permalink $product->get_permalink();
        
    $image_url wp_get_attachment_image_url$image_id'thumbnail' );
        
    $contents '<div class="col large-12 cs-productdetail">';
        
    $contents .='<div class="product-gallery large-5 col cs-product-gallery"><img src="'.$image_url.'" /></div>';
        
    $contents .='<div class="product-info summary col-divided large-7 col entry-summary product-summary text-left cs-product-info">
                    <label class="product-title product_title entry-title cs-titlepro">'
    .$product->get_title().'</label>
                    <div class="price-wrapper">
                        <p class="price product-page-price "><b style="font-size:19px">GIÁ: </b>
                        <span class="woocommerce-Price-amount amount"><bdi>'
    .$product->get_price().'<span class="woocommerce-Price-currencySymbol">₫</span></bdi></span></p>
                    </div>
                    <div class="product-short-description">'
    .get_the_excerpt($args['id']).'</div>
                    <a class="cs-buynow" href="/cart/?add-to-cart='
    .$args['id'].'">Mua ngay</a>
                    <a class="cs-buynow" style="background-color: #007d3f;border: 1px solid #015e30;" href="'
    .$permalink.'">Xem sản phẩm</a>
                    </div></div>'
    ;
        return 
    $contents;
    }
    add_shortcode('shortcode_productbyid''itseovn_productbyid');
    //[shortcode_productbyid id="1234"]/////////////////////////////////////////////  
    Chèn code css sau vào style.css của themes ở mục: /wp-content/themes/tên-themes/style.css
    HTML:
    .cs-productdetail .product-info .cs-titlepro
    {
    margin-bottom: 10px;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 35px !important;
    margin-top: 0px;
    }
    .cs-productdetail {
        float:left;
        width:100%;
        border:2px solid #007d3f;
        padding:15px 20px 15px 2px!important;
        margin-bottom:25px;
        border-radius:10px
    }
    .cs-productdetail .cs-product-info {
        padding:0!important
    }
    .cs-productdetail .cs-product-gallery img {
        border:1px solid #ccc
    }
    .cs-productdetail .cs-product-info .product-short-description {
        overflow:hidden;
        display:-webkit-box;
        -webkit-line-clamp:4;
        -webkit-box-orient:vertical;
        text-overflow:ellipsis;
        font-style:italic;
        margin-top:14px!important;
        margin-bottom:20px
    }
    .cs-productdetail .cs-product-info .cs-buynow {
        border:2px solid #ee402f;
        border-radius:3px;
        background-color:#db261b;
        color:#fff!important;
        padding:5px 15px 5px 20px
    }
    .cs-productdetail .cs-product-info .cs-titlepro {
        color:#db261b;
        font-size:28px!important;
        font-weight:700!important;
        line-height:32px!important;
        margin-top:15px;
        margin-bottom:15px
    }
    .cs-productdetail .cs-product-info span.amount {
        white-space:nowrap;
        color:#fc0000;
        font-weight:700
    }
    @media (min-width:767px) {
        .cs-productdetail .cs-product-gallery,
        .cs-productdetail .product-info {
            float:left
        }
    }
    Sau khi xong bạn chỉ cần vào bài viết add shortcode sau vào bài viết sẽ hiện thị được như hình trên
    HTML:
    [shortcode_productbyid id="1234"]
    • Với 1234 là id của sản phẩm cần chèn. Lấy id thì vào danh sách sản phẩm trong wp-admin để lấy nhé.
    • Xem hình dưới để biết cách lấy ID sản phẩm
    Muốn chèn vào code PHP thì mã sau;
    PHP:
    <?php echo do_shortcode('[shortcode_productbyid id="1234"]'?>
    lay-id-san-pham.jpg
     
    Cảm ơn đã xem bài:

    Chèn chi tiết sản phẩm woocommerce vào bài viết Posts wordpress

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


Like và Share ủng hộ ITSEOVN