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 đó.
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]') ?>
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 ạ