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

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    776
    Đã được thích:
    67
    Điểm thành tích:
    28
    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 lúc 10:12 AM


Like và Share ủng hộ ITSEOVN