Style issues with product filter in shop page

Hello,

Have a look at the product filter at this page https://www.villmarksbua.no/butikk/
Just scroll down to the breadcrumb etc. Then click the right Filtre option and view the brand dropdown (Varemerke). Then you will see some extra text and brand images on top of each other.

Brgds
Rune

Hello,

I cannot find the Varemerke in the sidebar. I see in the menu. It seems this is a common page. Woocommerce filters work only on the shop and product category pages.

Best Regards

Hello,

It is not located in the sidebar. It is the custom product filter setup in woodmart settings and html blocks. You can see it just above the main product loop. Have a look at the attached image.

Brgds
Rune

Attachments:

You must be logged in to view attached files.

Ok, i have found the issue. Woodmart does not load the necessary CSS and JS unless there is a Layered Nav widget in the sidebar. I just did a test, added the layered nav widget to the sidebar then the custom product filter was looking just great. So i guess you have to make a fix for this as i am not using layered nav widgets in sidebar.

Brgds
Rune

Hello,

WoodMart has its own widgets to ensure this view.

If you have any questions please feel free to contact us.

Best Regards

Yes, it is woodmarts own widgets. Activated from woodmart settings and using html blocks.
All following woodmart documentation. But as mentioned when done this way the necessary CSS and JS is not loaded.

Take a look at the attached images.

Brgds
Rune

Attachments:

You must be logged in to view attached files.

Hello,

Our developers have fixed the issue. Please check. This fix will be added to the new update.

If you have any questions please feel free to contact us.

Best Regards

Hello,

Yes it looks better but the brand images width and height is not correct so images are cropped. My old website at http://www.arctic-fritid.no had it all correct because it uses the layered nav widgets in sidebar, but now with the latest update images does not fit.

Brgds
Rune

I have now fixed the image issue using the below CSS:

.wd-product-filters .wd-pf-attributes .wd-swatch :is(img, picture) {
object-fit: contain;
}

Brgds
Rune

Hello,

We are glad you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts