Xây dựng website bán hàng với Flatsome – Phần 8 – Tạo bộ lọc sản phẩm

Xây dựng website bán hàng với Flatsome – Phần 8 – Tạo bộ lọc sản phẩm

Tạo bộ lọc sản phẩm với Plugin WOOF - WooCommerce Products Filter v.1.2.5.3

Các bạn tìm và cài đặt Plugin WOOF – Woocommerce Products Filter vào

Sau khi kích hoạt lên thì phần setting của plugin nó nằm trong Woocommerce / Cài đặt / Tab Product Filter

Xây dựng website bán hàng với Flatsome - Phần 8 - Tạo bộ lọc sản phẩm

Ở đây mình sẽ lọc theo Giá, Danh mục sản phẩm, các tax Độ phân giải, Kiểu dáng, Công nghệ sử dụng đã tạo ở các bài trước nhé.

Xây dựng website bán hàng với Flatsome - Phần 8 - Tạo bộ lọc sản phẩm

Setting xong thì các bạn vào Giao diện / Widget add vào Shop Sidebar

Xây dựng website bán hàng với Flatsome - Phần 8 - Tạo bộ lọc sản phẩm

Xây dựng website bán hàng với Flatsome - Phần 8 - Tạo bộ lọc sản phẩm

Các bạn lưu ảnh này tên là delete.png và copy đè lên ảnh delete.png trong thư mục \xampp\htdocs\flatsome\wp-content\plugins\woocommerce-products-filter\img để đổi cái biểu tượng xóa bộ lọc cho dễ nhìn

Xây dựng website bán hàng với Flatsome - Phần 8 - Tạo bộ lọc sản phẩm

Custom css cho dễ nhìn

.woof_products_top_panel
{
    background: #fff;
    border-bottom: 2px solid #F16136;
    padding: 1em 0 !important;
}
.woof_products_top_panel_ul>li
{
    border: 1px solid #F9B339;
    padding: 0.2em 1em;
    font-size: 0.8em;
    border-radius: 5px;
    margin-bottom: 0.5em !important;
}
.woof_products_top_panel_ul>li:first-child
{
    border: 0px;
}
#shop-sidebar
{
    padding-top: 1.5em;
    border: 1px solid #dbdbdb;
    background: #fff;
    padding: 1em;
    border-top: 3px solid #4C4C4C;
}
button.button.woof_reset_search_form
{
    background: #DE5549;
    width: 100%;
    border-radius: 7px;
    border: 0px;
    color: #fff;
    font-weight: normal;
}
.woof .widget_price_filter .ui-slider .ui-slider-range
{
    background: red;
    opacity: 1;
}
.woof .widget_price_filter .ui-slider .ui-slider-handle
{
    background: red;
    border: 0px;
    top: -0.3em;
    border-radius: 0px !important;
    height: 20px;
}

 

 

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments