Các bạn thường sử dụng wordpress cho các website tin tức . đặc biệt là các website bán hàng sử dụng woocommerce. Hay phổ biến hơn là sử dụng theme flatsome để làm website bán hàng. Tuy nhiên trong các trường hợp đặc biệt mà sản phẩm của bạn có những đặc tính riêng. Ví dụ như bán giày thì có kích thước, màu sắc, size 39, 40 v.v… Thì tùy từng trường hợp mà có mức giá khác nhau. Và đôi khi khách hàng mong muốn có thể lọc nhanh ra các danh sách thỏa mãn 1 yêu cầu. Ví dụ là khoảng giá, màu sắc, kích thước sản phẩm. bài này giúp bạn tạo bộ lọc sản phẩm riêng cho website của mình.

Bước đầu tiên thiết lập thuộc tính cho mỗi sản phẩm trên trang sản phẩm:

Với mỗi sản phẩm bạn cần thiết lập đầy đủ các thuộc tính như yêu cầu., ví dụ như màu sắc, kích thước, nguyên liệu v.v…

Bước tiếp theo là cài đặt plugin để có thể thiết lập bộ lọc:

tìm và cài plugin: devvn-woocommerce-price-list-filter

Bước sau là thiết lập sidebar cho bộ lọc thuộc tính

cần lưu ý là bước này thay đổi theo đặc tính sản phẩm mà cửa hàng bạn đang bán. Ví dụ như bạn bán giày thì bộ lọc thuộc tính của bạ là:

size: từ cỡ bao nhiêu tới bao nhiêu đó. Màu sắc: từ màu nào tới màu nào . Chứ bộ lọc thuộc tính không nhất thiết phải là giá

Cuối cùng là làm đẹp bộ lọc thuộc tính, bằng cách cho thêm ít CSS màu mè vào

.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
 border-top: 0 !important;
 margin-bottom: 3px;
}
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a::before {
 content: '';
 font-size: 15px;
 color: #222;
 position: absolute;
 top: 1px;
 left: 0;
 width: 20px;
 height: 20px;
 border-radius: 3px;
 border: 1px solid #999;
}
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a {
 position: relative;
 padding: 0 0 0 30px;
 border-bottom: 0;
 display: inline-block;
 line-height: 1.5;
}
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a:active::before,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a:focus::before,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a:hover::before,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item.chosen a::before {
 color: #e03232;
 border-color: #e03232;
}
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a:active::before,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a:focus::before,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a:hover::before,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item.chosen a::before {
 content: '\f00c';
 color: #e03232;
 font-size: 15px;
 position: absolute;
 top: 1px;
 left: 0;
 border-color: #e03232;
 line-height: 20px;
 text-align: center;
 font-family: FontAwesome;
 background: #fff;
}
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item.chosen a:active::before,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item.chosen a:focus::before,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item.chosen a:hover::before {
 content: '\f00d';
}
 
div#shop-sidebar span.widget-title.shop-sidebar {
 margin-bottom: 15px;
 display: block;
}
 
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item span.count {
 line-height: 1.5;
}