how to customize the WOODMART WooCommerce Layered Nav
-
Hi,
I am editting the product filter widget, need to customize the style of the product filter, I hope to add the background for each attribute filters , narrow the space between the attribute filters and enlarge the arrow on the right. couldl you let me know how to achieve it? Or I need to write the code for the changes?
Best regards
Cathy
Attachments:
You must be
logged in to view attached files.
Hello,
Please add this code to the Theme Settings > Custom CSS > Global. Change the code as per your requirements.
.wd-swatches-filter .wc-layered-nav-term {
background: #f7f7f7;
padding: 10px 12px;
border-radius: 8px;
}
.wd-swatches-filter .wc-layered-nav-term:hover {
background: #eac3c3;
}
.wd-widget-collapse .widget-title:after {
font-size: 16px;
width: 32px;
height: 32px;
top: calc(50% - 16px);
}
Best Regards,
Dear Aizaz,
Really appreciated for your assistant. the filter looks much better. thanks a lot
if possible, could you help to add some CSS to achieve the filter style as attached, I need the space between each layered nav is much narrower, and with background as well ?
It would be very appreciated for your further help.
Best regards
Cathy
Attachments:
You must be
logged in to view attached files.
Hello,
Please add this code to the Theme Settings > Custom CSS > Global.
/* Main widget container background and padding */
#woodmart-woocommerce-layered-nav-25 {
background: #f7f7f7; /* Widget background */
padding: 15px;
border-radius: 10px;
border: 1px solid #ccc;
}
/* Each filter item */
#woodmart-woocommerce-layered-nav-25 .wc-layered-nav-term {
background: #dccccc; /* Individual item background */
border: 1px solid #ddd; /* Item border */
border-radius: 8px; /* Rounded corners */
padding: 8px 12px;
margin-bottom: 6px; /* Space between items */
}
Replace #woodmart-woocommerce-layered-nav-25 with the actual widget ID on your site if it’s different. You can find this in the developer tools.
Best Regards,
Hi, Dear Aizaz,
Thanks for your help, it works very well with the CSS, but only affected on one layered Nav. I tried to add other widget with same style, but really headache and failed to find the widget id. could you kindly give me some guide?
Best regards
Cathy.
Attachments:
You must be
logged in to view attached files.
Hi, Dear Aizaz,
I installed a plugin to show the widget id, they are from 7-16, none is 25, and when I replaced the widget id into the number, nothing changed, is there anything wrong with me?
Best regards
Cathy
Attachments:
You must be
logged in to view attached files.
Hello,
Please see this screenshot how to get the correct ID:
https://postimg.cc/Rqqr4fX9
Best Regards,
.
