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

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]

Hoặc add vào code PHP thì gọi code sau:

Mã:

<?php echo do_shortcode('[shortcode_cs_shopping_cart]') ?>