Product Filter Showing Circle instead of Rectangle Brand Logo

Hello Xtemos!
I’m happy with your theme but sadly, my filter with images do not appear in rectangles like your demo, but instead in small circles.

Only the default and pre-loaded ‘Brand’ work, if I create a new list of filter product they’ll be displayed as a circle instead of rectangles. I have no clue why, I’ve tried all the settings in the product filter page and in the widget settings (using Woodmart Layered Nav). All the images use the same default size provided by your demo.

Attached some examples, thank you.

Attachments:

You must be logged in to view attached files.

Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :).

I saw the screenshots you attached.

Please remove the layered nav widget that you added and try adding it again and use the same settings as you made for the other widget.

Then clear cache and check back.

If the problem still continues then provide with the admin panel login details for the website to check it myself and help you out accordingly.

Best Regards.

Sadly, it’s not working even removing and re-adding. With cache cleared.
I’ll add in Private the login details.

Hello,

You forgot to provide the admin panel login URL of the website. Please provide the admin panel login URL of the website to check it myself and help you out accordingly.

Best Regards

Yeah my bad! Attached.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woodmart-woocommerce-layered-nav .filter-swatch>span {
    border-radius: 0;
}

.woodmart-pf-dropdown .swatches-large .filter-swatch>span, .woodmart-woocommerce-layered-nav .swatches-large .filter-swatch>span {
    width: 50px;
    height: 30px;
}

.woodmart-pf-dropdown .filter-swatch>span:after, .woodmart-woocommerce-layered-nav .filter-swatch>span:after {
    border-radius: 0;
}

Best Regards.

The code only change the form in rectangle. But the size (even choosing large) remains so small and with the border stroked. Not resolved.

You can see a difference even when hovering. It put a white tick on the images, it shouldn’t do that.

Please check the website, you have the data in the previous posts. Thank You

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

I have logged into your website and removed the border and increased the size of the swatches. Please clear cache and check back.

Best Regards.

Hey Aizaz,
saw your changes, we’re almost there. Sadly it still act weird and bad on hovers.
Attached the example.

On Hover it shows all the trasparent border of the image, with black hover and tick icon. On the original that i’m trying to recreate no, it highlight only the image (with white, no png border shows).

I still have no idea why all the new attributes won’t show as the demo one. Nothing was changed in css or file configuration. Thank You++

(I even tried with a new fresh install on another server, but the problem persist over there too).

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woodmart-woocommerce-layered-nav .filter-swatch>span:after {
    background-color: rgba(255,255,255,0.6);
    content: "";
}

Best Regards.

Finally! Thanks everything work like it should!
I hope this can help other people too.

Best Regards,
A

Most Welcome 🙂

If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

Thanks for contacting us.
Have a great day 🙂

Topic Closed.
Best Regards.

[Author]

Posts