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

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.

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"]') ?>