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

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

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,017
    Đã được thích:
    80
    Điểm thành tích:
    48
    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:
    chen-san-pham-vao-trang-tin-tuc-bai-viet.jpg

    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.
     
    Cảm ơn đã xem bài:

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

    Last edited by a moderator: 13/4/21


Chủ để tương tự : Products WooCommerce
Diễn đàn Tiêu đề Date
Mã nguồn mở Wordpress How to Get Total Number of Products by user id Woocommerce 13/6/22
Mã nguồn mở Wordpress Tùy biến ux_products.php truyền dữ liệu vào như thế nào woocommerce 13/6/22
Mã nguồn mở Wordpress Get Prodcut list by category id or list id products woocommerce ? 28/10/21
Mã nguồn mở Wordpress Get all Products by Custom Field ACF Id and Value in Woocommerce ? 28/10/21
Mã nguồn mở Wordpress Thay đổi vị trí hiển thị Related Products trong Woocommerce 29/12/20