Issue with Label Function, box Centering Problem
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page pleaseIf you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.
Hello,
I am currently using HUSKY - Products Filter Professional for WooCommerce and have just started exploring the label function to create filters. However, I have encountered an issue and hope someone can help me. First, I created labels for one of the filters, namely screen size. There you can see how each box is centered even though the text in the boxes is of different lengths. But when I do the same for, for example, RAM, you can see that the boxes become slightly larger just because the text is one letter longer. How can I prevent the box from getting larger, so instead of the box getting larger, the text should just take up more space inside the box?
Check picture
https://ibb.co/Q6mY6b0
https://ibb.co/T2VB32b
Thanks :)
Hello
Please drop me exact link to the issue
Hi,
I have now activated the label format so you can take a look! :) It wasn't live before due to the issue.
Please paste your license key here - https://share.pluginus.net/image/i20230222134241.png -> https://share.pluginus.net/image/i20230222134511.png
update the plugin to latest version - https://products-filter.com/how-to-make-auto-update-for-wordpress-plugins-and-themes-bought-on-envato
You can try this CSS:
body .woof_list_label .woof_label_term
min-width: 60px;
Hello,
I have now added the license code.
I have applied CSS, and it was working almost perfectly. I had to adjust to 62px because one of the labels had slightly wider text, causing the box to be a bit off-center. However, with 62px, it became perfect. The issue now is that there are only 2 boxes per row. How can I make it so there are three boxes?
Thank you in advance.
Hello
Unfortunately, in your case the container size is not enough
Please try this CSS to make the widget container a little wider:
padding: 20px;
}
Thank you so much for your help, it's really appreciated that you're assisting me :)
That solved the problem so I can have three boxes centered. However, now there is a border around the entire box, see highlighted in gold in the linked image below. Additionally, all the text and boxes have become a bit smaller which isn't really a problem, but if you look at the green highlight, it seems like there's room to enlarge the boxes and text a bit so they fill the whole area, making the left and top white spaces equal, as highlighted in green. Is it possible to solve this?
Additionally, these changes seem to only work on the desktop version of the site. When I look at the mobile version, it's two rows instead of three, which is odd.
For those of us who have paid for the pro version of this plugin, is it possible to give you our login details so you can go in and optimize everything to make it look nice and clean? I understand if it's not possible, but thought it would be much faster for you since you seem to have a good handle on this.
Hello
This is a conflict with the styles of your site(theme). Setting up your site is not included in support
Please add this CSS:
#woof_widget-2{
padding: 0 px;
}
body #technocy-canvas-filter .widget
padding: 20px;
}
Hello,
I've now done that, but there were no changes at all, neither on the mobile site nor the desktop site. Should I keep the original code as well? I just added the new one below all the old ones.
Ok! Fixed code
body #secondary #woof_widget-2, body #technocy-canvas-filter #woof_widget-2{
padding: 0px;
}
Yes please add this code below
Hi!
I see that the lite outside the frame disappeared, which is good, and It's working great on mobile now too :D
But now there's a lot of empty space on the sides. Is it possible to fill the entire box so that the filter text and filter boxes expand to reach the edges? Take a look at the page to see how it looks now :)
So, the only thing left is to fill the entire frame so there's not so much space in between :)
Ok! Change all padding in these styles to zero: padding: 0px;
Hej,
That made everything go all the way to the edge. Instead, I changed the last code you gave me from 0 to 20, and then it looked better, so now the code is like this.
body .woof_list_label .woof_label_term {
min-width: 62px;
}
body #secondary .widget {
padding: 20px;
}
body #secondary #woof_widget-2, body #technocy-canvas-filter #woof_widget-2{
padding: 27px;
}
It works perfekt now on desktop, check https://teknikfronten.se/produkt-kategori/barbaradatorer/
But on mobile version, its 2 box each row :/
Hello
Well, of course the container is not wide enough
Please add CSS
padding: 10px;
}
It worked perfekt, THANK YOU! :D Everything is perfect now.
Great! Welcome;)