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

    seolagi

    Moderator

    Thành viên BQT

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

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,488
    Đã được thích:
    1,079
    Đ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]') ?>
     
    meobeoonly thích bài này.
  3. meobeoonly

    meobeoonly Thành Viên Mới

    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 ạ
     


Like và Share ủng hộ ITSEOVN