Styling and Filters

Need help on 2 more problems and rest all is sorted:

1. The filters I had set earlier through widget is not filtering the search but instead, taking the user directly into the click category (example, searched “lights” and click on category “Cars & Bikes” which should have filtered product of this category, instead of filter, it resetted the filter and took the user directly in the cars & bike parent category showing child categories instead.

When searching for lights

After clicking on the filters set below

2. A button “Filter” below price filter color is messed up (by me) which I am unable to fix, could you point me to the right option in the theme settings?

Hi,

The category widget is not a filter, it goes to the category ignoring the search. On the search page, you can filter products only by attributes. This is the functionality from Woocommerce and, unfortunately, it can’t be changed via theme.

You can check how it works in the default Woocommerce theme – Storefront https://themes.woocommerce.com/storefront/shop/

Kind Regards

Thank you Bogdan, I have removed category from the filter section, have set rest of it.

I have more styling correction/fix requests:

Swatches on “product layout” is not highlighted very well and can confuse users what to do.

This is also a challenge with color swatch of WHITE color where background and white color both blends in each other, is there a way to add black/grey borders around the color swatch to make it stand out?

Hi,

1. Try to use the following custom code to change text swatches on a single product:

.elementor-widget-wd_single_product_add_to_cart .wd-swatch.text-only:after {
	display: none;
}

.elementor-widget-wd_single_product_add_to_cart .wd-swatch.text-only {
	border: 2px solid #E5E5E5;
	padding: 4px 6px;
	transition: all .25s ease;
}

.elementor-widget-wd_single_product_add_to_cart .wd-swatch.text-only:hover,
.elementor-widget-wd_single_product_add_to_cart .wd-swatch.text-only.active-swatch {
	border-color: #072142;
}

2. To illustrate the white swatch you have used not clear white color rgb(244,242,239). If you replace its value to the clear white color rgb(255,255,255) – the border around the white swatch will apear (https://prnt.sc/nqpj1T_2oDtm).

Kind Regards

Thanks Bogdan.

1 – Where do I put this code? In the functions.php?

2- I had intentionally changed pure white to greyish white as white was not at all visible. This was when the theme was v6.2. Maybe point no. 1 will solve this problem as well however I would prefer if there is a way to put grey/black border around the color swatch option.

1. CSS code snippets need to be added to the Global Custom CSS area in Theme Settings.

2. You can add the following custom code to add a border to all product swatches, but it has limitations:

– space between border and swatch can’t be added.
– border-color can be only one for all swatches.
– custom code will also change the border around image swatches in sidebar widgets.

body .wd-swatch.swatch-with-bg,
body .filter-swatch.with-bg {
	border: 1px solid #000 !important;
}

You can change border color by replacing #000 with your own value.

Kind Regards

Thanks Bogdan, used both the CSS which has solved my problem. This thread can be marked resolved.

You are welcome!

[Author]

Posts