Tạo Icon Giỏ Hàng Cố Định Trên Website

Thuộc Thủ thuật Wordpress Vào 15 Tháng Chín, 2020 Bởi qlythemesach

Chào đọc giả của Theme Sạch. Chúc các bạn một ngày làm việc vui vẻ. Trong bài viết này, chúng ta sẽ triển khai một ý tưởng khá thú vị. Tính năng này sẽ giúp trải nghiệm của khách hàng được tốt hơn khi giỏ hàng sẽ được cố định luôn luôn hiển thị trên giao diện wordpress.

Tạo Icon Giỏ Hàng Cố Định
Tạo Icon Giỏ Hàng Cố Định

Thêm Code Vào Functions.php

Đầu tiên chúng ta sẽ tạo icon giỏ hàng cố định. các bạn mở file Functions.php của theme wordpress bạn đang sử dụng lên và copy đoạn code bên dưới vào và lưu lại. File này thường nằm ở đường dẫn sau: wp-content/themes/tên thư mục theme bạn đang dùng/functions.php. Nếu bạn vẫn thắc mắc file Functions.php là gì và làm cách nào để chỉnh sửa nó thì bạn xem qua bài viết này đã nhé: File Functions Là Gì? Cách Sử Dụng File Function

function cart_themesach(){
ob_start();?>
<div class=”cart_themesach”>
<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=”1″ style=”opacity: 1;”></i>
</a>
</div>
<?php $list_post = ob_get_contents();
ob_end_clean();
return $list_post;
}
add_shortcode(‘cart_themesach’,’cart_themesach’);

Thêm Code Vào Style.css

Tiếp theo chúng ta cần dùng CSS để trang trí icon giỏ hàng cố định cho đẹp. Bạn hãy mở file Style.css trong tệp theme mà bạn đang sử dụng. Tệp này nằm ở đường dẫn sau: wp-content/themes/tên thư mục theme bạn đang dùng/style.css. Bạn copy đoạn css bên dưới pass vào và nhấn lưu lại nhé. Bạn có thể tùy ý triển khai css theo cách bạn muốn.

.cart_themesach{
position: fixed;
bottom: 70px;
left: 40px;
z-index: 999;
}
.cart_themesach>a{
font-size: 20px;
background: #fff;
padding: 15px;
border-radius: 5px;
}
.cart_themesach .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_themesach .icon-shopping-cart{
color: #23282d;
}

Chèn Shortcode Vào Website

Cuối cùng bạn muốn thêm icon giỏ hàng cố định vào đâu chỉ cần chèn shortcode sau [cart_themesach] vào bất kỳ vị trí nào bạn muốn nó hiển thị. Bạn nên chèn vào global footer để nó luôn luôn hiển thị trên website nhé.

Dĩ nhiên sẽ có plugin wordpress hỗ trợ tính năng này. Nhưng thay vì cài đặt nhiều plugin làm nặng website thì chúng ta dùng cách này sẽ thuận tiện hơn rất nhiều. Nếu có thắc mắc hay góp ý gì, bạn hãy để lại bên dưới để cùng thảo luận nhé.

Chia Sẻ Ý Kiến Của Bạn Về Theme/Plugin Này Tại Đây Nhé !

Translate »