1BANNER 123
4.8/5 - (63 bình chọn)

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

Nút giỏ hàng bên tay trái

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.

function cart_absolution(){
    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).

.cart_absolution{
    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.

2 thoughts on “Nghịch một chút với icon cart của woocommerce.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *