Hello Bashiro,
You can use a bit of custom CSS to achieve what you need:
In your WP admin go to Appearance > Customize. Find the Additional CSS / Custom CSS option, and click on it. Add the following line(s) of code in the text area for the custom CSS:
1. To increase the font size for the filter title:
.awf-preset-wrapper .awf-filter-title { font-size: 35px; }
2. To make the filter title font bold add:
.awf-preset-wrapper .awf-filter-title { font-weight: 600; }
3. To increase the font size for the filters labels:
.awf-preset-wrapper .awf-filter-container:not(.awf-product-search-container) label { line-height: 25px; font-size: 25px; }
4. If the font increased so much that the product counts start losing the correct position, adjust this to the same as line-height for the label:
.awf-preset-wrapper .awf-filter-container .awf-filter-count { line-height: 25px; }
Save the custom CSS option (by pushing the Publish button) and reload your shop page. If you can’t see any changes, you may need to clear your browser cache (read about clearing Chrome browser cache here). You can adjust the font-size values (from 25px to 20px etc) according to your preference.
We have had quite a few requests for this kind of CSS tweaks, so these may be added as plugin styling options in one of the later releases, but for now hope this helps. Let me know if you need more help with this.
Sincerely yours,
Anastasia
Thanks for the reply.
Unfortunately I tried and the textor fonts did not change.
Any suggestions ?
Thanks
Bashiro
Bashiro,
Please send me the link to your site for me to be able to offer you custom CSS code that will work with your theme.
I have sent the link in your email. Thanks
Hello Bashiro,
Unfortunately I haven’t received your mail. Please try contacting us through the form here.
Ok Bashiro,
I got your link. The additional CSS works just fine, you simply have to add the font size lines, like so:
.awf-preset-wrapper .awf-filter-title { font-size: 15px; }
I presume you need the letters to be smaller, but if you want the filter names to be larger, just change 15px to 35px.
To make the filter labels smaller, add this line to your custom CSS:
.awf-filter-container:not(.awf-product-search-container) label { font-size: 13px; }
Generally speaking, I believe your problems arises from the fact that your shop sidebar is too narrow for its contents. If you like, read about changing the sidebar width for your theme here.
Good luck, and let me know how if you managed to make it work!
Hello,
Thanks for the reply. Great work.Beautiful it works great with this new CSS codes.
Is there any code to change the color of the price bar ?
Concerning the side bar, I deliberately reduced it myself to 20%. But I can increase it a little bit.
One more question. Is it possible to change color of the price bar ?
Regards
Bashiro
Hello Bashiro,
I am glad to hear that things finally worked like you wanted! For the price bar color you can add the following code to your Additional CSS box:
.awf-preset-wrapper .noUi-connect { background: red; }
You can change “red” to any color that you like from this list.
Good luck!
Hello @bashiro,
We haven’t heard from you in a while now so I’ll go ahead and mark this as resolved. Please feel free to open a new thread if you have any further questions!
