Add Products WooCommerce to Posts, Chèn chi tiết sản phẩm vào bài viết wordpress

Hôm nay mình sẽ hướng dẫn các bạn Add Products WooCommerce to Posts, Chèn chi tiết sản phẩm vào 1 bài viết bất kỳ trong wordpress sử dụng plugin WooCommerce.

Cách chèn khá đơn giản các bạn chỉ việc chèn code vào function.php và gọi nó ra dưới dạng shortcode là được.

Demo:


Cách làm:

Bạn mở file function.php của themes lên và chèn code sau vào:

PHP:

function itseovn_productbyid($args, $content) {
    $product   = wc_get_product( $args['id'] );
    $image_id  = $product->get_image_id();
    $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">
                <h2 class="product-title product_title entry-title cs-titlepro">'.$product->get_title().'</h2>
                <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>
                </div></div>';
    return $contents;
}
add_shortcode('shortcode_productbyid', 'itseovn_productbyid');
//[shortcode_productbyid id="16087440"]/////////////////////////////////////////////


Chèn code css vào file style.css của web, hoặc nơi bạn lưu trữ css

HTML:

.cs-productdetail
{
  float: left;
  width: 100%;
  border: 2px solid #007d3f;
  padding: 15px 20px 15px 2px !important;
  margin-bottom: 25px;
  border-radius: 10px;
}
.cs-product-info
{
  padding: 0px !important;
}
.cs-product-gallery img
{
  border: 1px solid #ccc;
}
.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-product-info .cs-buynow
{
  border: 2px solid #ee402f;
  border-radius: 3px;
  background-color: #db261b;
  color: #fff !important;
  padding: 5px 15px 5px 20px;
}
.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-product-info span.amount {
    white-space: nowrap;
    color: #fc0000;
    font-weight: bold;
}
@media (min-width:767px) {
  .cs-product-gallery,
  .product-info
  {
     float: left;
  }
}
@media(max-width:767px) {
.cs-product-info {
    padding: 0px 0px 0px 15px !important;
}
}

Để xem các cách chèn khác, bạn xem các mặc định của WooCommerce như link dưới, các bạn cần tìm hiểu thêm thì xem link dưới nhé, có cách add product page, product list, product by tag,... vào bài viết cũng khá đơn giản, chỉ là nó sẽ kèm theo các mã mà mình không tùy biến được.

• https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-6

Kích thước hình ảnh:

Mã:

thumbnail = Thumbnail (default 150px x 150px max)
medium = Medium resolution (default 300px x 300px max)
large = Large resolution (default 1024px x 1024px max)
full = Full resolution (original size uploaded)