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^^

Style css làm đẹp cho plugin

/***** 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^^

Thả vào đây ý kiến của bạn:

avatar