Bữa rảnh không có gì làm, mình thử nghịch nghịch vài thứ và phát hiện ra khá là nhiều điều thú vị, nay mình sẽ share cho các bạn cách tạo một nút giỏ hàng khác ngoài giỏ hàng mặc định.
Dựa theo nguyên lý này bạn có thể tùy biến cho mình nhiều cái khác hay hơn nữa nhé.
Demo sẽ như thế này
Trước mình thử copy HTML của icon giỏ hàng và paste qua chỗ khác, thì mình thấy mỗi lần add to cart một sản phẩm nào đó là tự động đó sẽ truyền đến tất cả các icon có class cart đó. Nên mình mới nghĩa ra làm cái này. (Thật ra ý tưởng này là mình không nhớ mình thấy ở cái web nào đó từ trước rồi giờ chỉ chuyển hóa ý tưởng thành hiện thực thôi).
Để có thể tại ra được 1 cái icon như vậy bạn chỉ cần thực hiện đoạn function sau là được.
ob_start();?>
<div class="cart_absolution">
<a href="/gio-hang/" class="header-cart-link off-canvas-toggle nav-top-link is-small" data-open="#cart-popup" data-class="off-canvas-cart" title="Giỏ hàng" data-pos="right">
<i class="icon-shopping-cart" data-icon-label="2" style="opacity: 1;"></i>
</a>
</div>
<?php $list_post = ob_get_contents();
ob_end_clean();
return $list_post;
}
add_shortcode('cart_absolution','cart_absolution');
Kế tiếp là CSS (Mình rất ít khi share CSS, vì mình nghĩ cái này là cái cơ bản mà ai làm việc đến web cũng bắt buộc phải nắm được).
position: fixed;
bottom: 70px;
left: 40px;
z-index: 999;
}
.cart_absolution>a{
font-size: 20px;
background: #fff;
padding: 15px;
border-radius: 5px;
}
.cart_absolution .icon-shopping-cart:after{
background-color: #e94b35;
top: -24px;
right: -24px;
padding-left: 8px;
padding-right: 8px;
line-height: 23px;
height: 24px;
min-width: 24px;
font-size: 15px;
}
.cart_absolution .icon-shopping-cart{
color: #23282d;
}
Rồi xong, giờ bạn chỉ cần lấn cái shortcode [cart_absolution] đi dán ở đâu bạn muốn là được nhé. Mình sẽ dán nó ở footer, vì như vậy page nào cũng sẽ hiển thị được.
Hi vọng các bạn sẽ ngày một nâng cao tay nghề của mình.
Cái flatsome có cái giỏ hàng để thẻ h4, mình muốn xoá cái h4 này, cho hỏi cía là bạn biết nó để ở file nào ko ? để vào xoá
Tất cả liên quan đến cart nó sẽ nằm trong thư mục cart bạn nhé