Woocommerce price filter – Lọc sản phẩm theo khoảng giá

Woocommerce price filter – là 1 plugin giúp lọc sản phẩm theo khoảng giá. Tự động lấy giá nhỏ nhất và giá lớn nhất khả dụng trong cửa hàng để chia khoảng

Do mình đã đóng thành plugin nên sẽ không nói nhiều về code. Chủ yếu sẽ hướng dẫn cách sử dụng cho nhé. Sau khi cài đặt thành công sẽ có thêm 1 widget mới với tên DevVN – Woocommerce price filter. Bạn chỉ cần kéo widget đó đến nơi muốn hiển thị là được

Hướng dẫn cài đặt và sử dụng

1. Tải về máy tính plugin DevVN – Woocommerce price filter
2. Vào admin -> Plugins -> Add new -> Upload Plugin. sau đó chọn plugin vừa tải ở bước 1 và ấn Install now -> active plugin
3. Sử dụng: vào Appearance -> Widgets tại đây hãy tìm đến Widget DevVN –  Woocommerce price filter vào kéo sang sidebar muốn hiển thị
4. Cài đặt các thông số như Tiêu đề và khoảng giá -> Save
5. Done^^

Tải ngay plugin DevVN – Woocommerce price filter

Do plugin này FREE 100% nên mình có 1 số yêu cầu như sau để tải plugin nha

1. Like Fanpage để hiển thị link download và ủng hộ mình nhé
2. Tải ngay và luôn

TẢI NGAY Xem bản PRO

Kho plugin của tôi

DevVN Woocommerce Reviews

Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy

Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK vs Woocommerce

Plugin Kết nối Zalo OA với WordPress

Style css làm đẹp cho plugin

Gửi lời cảm ơn tới Hoàng Phương Nam đã thêm style cho anh em, chi tiết  trong comment này 🙂

/***** STYLE 1 CHECKBOX PRICE FILTER WOO DEVVN *****/
.devvn_woocommerce_price_filter ul {
    background: white;
    padding: 10px !important;
}
.devvn_woocommerce_price_filter ul li {
    margin: 5px 0px;
}
.devvn_woocommerce_price_filter ul li a {
    font-size: 15px;
}
.devvn_woocommerce_price_filter ul li a:hover {
    text-decoration: none;
    color: #b70000 !important;
}
.devvn_woocommerce_price_filter ul li a {
    padding-left: 30px !important;
}
.devvn_woocommerce_price_filter ul li a::before {
    content: '';
    font-size: 15px;
    color: #222;
    position: absolute;
    left: 25px;
    width: 20px;
    height: 20px;
    border-radius: 0px;
    border: 1px solid #999;
}
.devvn_woocommerce_price_filter ul li a:hover::before {
    content: '\f00c';
    color: #e03232;
    font-size: 13px;
    position: absolute;
    left: 25px;
    border-color: #999;
    line-height: 20px;
    text-align: center;
    font-family: FontAwesome;
}
/**** END STYLE 1 CHECKBOX PRICE FILTER WOO DEVVN *****/

Hình ảnh sau khi thêm css

Chúc các bạn thành công^^