Colour filter

Hi,

two things about the colour filter.

1) I use to have squared color filter however somehow they turned into circles.
What do I have to do to revert this?
Please see image attached.

2)

Like many other fashion sites our products comes in multiple color variations.
That is when the color filter comes in handy. The color filter makes It easy for the user to get a fast overview instead of using minutes browsing through 1000 products.
However, the current Woodmart filter does only show the default image and not change to show ithe variation image according to the filter applied.

As result the user will see 25 white and 25 multicolor products instead of 50 shite products.
I know the user can switch the colors manually in the search result (if a layout with swatches is used) but is not ideal.

What can be done to make the color filter more accurate.

Are there any settings I can change?
If i uploaded each product individually color would march but i would not be able switch colour under each product.

Or are there any plugin that can be recommended to use with Woodmart shop?
I see this filter apparently do what i was hoping our filter would do, but i dont know how this will work with the exsisting code on your theme.
https://iconicwp.com/blog/how-to-use-a-woocommerce-product-filter-plugin/

best regards,
Nicolaj

Attachments:

You must be logged in to view attached files.

Hello,

1) I saw the screenshot you attached. From where did you change the view of the swatches to square because by default they are displayed as circles?

2) Sorry but this is the default functionality and there is no option in Theme Settings to change it.

Sorry but we are unable to suggest you any plugin, because we haven’t tested our theme with such a plugin yet.

You can try adding any plugin that better meets your requirements.

Regard’s.
Xtemos Studio.

Hi Aizaz,

1 ) Honestly i don’t know how it became square, but I liked that especially on the mobile version.Do you really not have any idea how i can get it back?
My best guess is it came from changing shop page widget area / woodmart color filter to large size, but that doesn’t work anymore.

2) Okay fair enough. I will just try install another plugin.
If another plugin works, will i need to remove woodmart filter and image variation coding for smooth performance?

best regards,
Nicolaj

Hello,

1) Please try and add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS to make the color swatches square.

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

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

2) As I mentioned in my previous reply we haven’t tested our theme with such a plugin. You can try installing the plugin at your own risk.

Regard’s.
Xtemos Studio.

hi,

i tryed modify your css as i wanted the swatched be much bigger.
I didnt achive what i wanted only selection and mouse over got bigger. but not the colour itself.
here is what i did

.woodmart-woocommerce-layered-nav .filter-swatch > span {
width: 100px;
height: 50px;
border-radius: 0;
}

.woodmart-woocommerce-layered-nav .filter-swatch > span::after {
width: 100px;
height: 50px;
border-radius: 0;
}

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached. Please replace the first CSS with the following in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woodmart-woocommerce-layered-nav .swatches-large .filter-swatch > span {
	width: 100px;
	height: 50px;
	border-radius: 0;
}

Regard’s.
Xtemos Studio.

Yes that’s it, thanks Aizaz!

Hello,

We are thrilled that you loved your experience with XTEMOS, We put customer experience and satisfaction as our priority, and your words reaffirms the hard work we put in every day.

So thanks for your kind words and we look forward to seeing you again.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts