Tạo giỏ hàng trên sidebar single product chi tiết sản phẩm woocommerce

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

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,047
    Đã được thích:
    81
    Điểm thành tích:
    48
    hi mọi người, mình có khách hàng muốn làm giỏ hàng trong chi tiết sản phẩm ở sidebar như hình dưới, mình muốn tạo giỏ hàng trên sidebar single product chi tiết sản phẩm woocommerce.

    Cái giỏ hàng chỉ có số lượng và tổn tiền sản phẩm.

    Và nút Xem giỏ hàng như hình dưới, khi khách ấn Thêm vào giỏ thì nó sẽ cập nhật số lượng mới nhất vào đó.

    cach-tao-gio-hang-tren-trang-chi-tiet-san-pham.jpg
     
    Cảm ơn đã xem bài:

    Tạo giỏ hàng trên sidebar single product chi tiết sản phẩm woocommerce

    seolagi, 13/10/21
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,997
    Đã được thích:
    1,216
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Demo của bạn đây nhé: https://trungtamthuoc.com/thuoc-tebexerol-125ml-tang-cuong-mien-dich-gia-bao-nhieu

    Bước 1: Bạn vào function.php của themes add code sau vào nhé để tạo shortcode của giỏ hàng cart:

    PHP:
    /* Gio hang tai chi tiet san pham */
    function cs_woocommerce_shopping_cart($args, $content){
        global     $woocommerce;
            $contents .='<div class="cs-cart-pro">';
                $contents .='<div class="cs-itemcartmore">';
                    $contents .='<span class="cs-iteamcart1"> Số lượng<br> <b id="cssoluong">'.$woocommerce->cart->get_cart_contents_count().'</b> </span>';
                    $contents .='<span class="cs-iteamcart2"> Tổng tiền<br> <b id="cstongtien">'.$woocommerce->cart->subtotal.' ₫</b> </span>';
                    $contents .='<div class="cs-dot1"></div><a class="cs-buttoncartview" href="/cart/">Xem giỏ hàng</a>';
                $contents .='</div>';
            $contents .='</div>';
        return     $contents;
    }
    add_shortcode('shortcode_cs_shopping_cart', 'cs_woocommerce_shopping_cart');
    //[shortcode_cs_shopping_cart]/////////////////////////////////////////////    
    Bước 2: Tiếp theo add code CSS sau vào style.css của themes hay ở vị trí css của web bạn để ra được giao diện giống như hình bạn cần:
    HTML:
    /*gio hang */
.cs-dot1 {
    width:100%;
    border-bottom:1px solid #e8e8e8;
    height:1px
}
.cs-itemcartmore {
    background-color:#fff;
    border-radius:10px;
    border:1px solid #e8e8e8;
    margin-top:10px;
    margin-bottom:7px
}
.cs-iteamcart2 {
    display:inline-block;
    width:calc(100% - 86px);
    text-align:right;
    padding:9px 10px 2px 4px
        font-size: 14px;
}
.cs-iteamcart2 b {
    color:#00b46e;
    font-size:17px;
    font-weight:bold
}
.cs-iteamcart1 b {
    color:#db9c09;
    font-size:17px;
    font-weight:bold
}
.cs-iteamcart1 {
    width:80px;
    text-align:center;
    display:inline-block;
    border-right:1px solid #e8e8e8;
        font-size: 14px;
    padding:9px 5px 2px 4px
}
.cs-buttoncartview {
    display:block;
    background-color:#f9b514;
    color:#fff;
    width:calc(100% - 20px);
    margin:0 auto;
    text-align:center;
    padding:10px 0 7px 0;
    border-radius:20px;
    text-decoration:none;
    margin-top:10px;
    margin-bottom:8px
}
/*end gio hang */
    Bước 3:

    Add shortcode vào vị trí cần hiện thị trong Widget:
    HTML:
    [shortcode_cs_shopping_cart]
    chen-shortcode-gio-hang-vao-vi-tri-can-xem.jpg

    Hoặc add vào code PHP thì gọi code sau:
    Mã:
    <?php echo do_shortcode('[shortcode_cs_shopping_cart]') ?>
     
    admin, 13/10/21
    #2
    meobeoonly thích bài này.
  4. meobeoonly
    Tham gia ngày:
    14/10/21
    Bài viết:
    1
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    em mới tập tành làm wordpress em thấy web anh đẹp quá.
    Mong anh hướng dẫn cách tạo khung tác giả với mục lục dạng số như demo của anh ạ
     
    meobeoonly, 14/10/21
    #3


Chủ để tương tự : Tạo giỏ
Diễn đàn Tiêu đề Date
Mã nguồn mở Wordpress Xin code tự động tạo user trong function.php wordpress 6/10/23
Mã nguồn mở Wordpress Lỗi khi tạo subfolder website wordpress, subfolder web vào mục con không được 26/6/23
Mã nguồn mở Wordpress Tạo Popup đặt hàng từ Contact Form 7 Wordpress 13/4/22
Mã nguồn mở Wordpress Tạo trang cảm ơn sau khi submit trong Contact form 7 như thế nào? 6/1/22
Mã nguồn mở Wordpress Tắt đăng ký tạo thành viên mới trong Flatsome Wordpress 18/12/21