Icon & dropdown filter on shop page

[Kent Nguyen]

Hi,

Is there any way to change the “column icon”. The existing one is too strong & bold for my site. Also, Can we change the Filter dropdown to the Square corner instead of round one.

I attach the image of the icon for your reference and a site below.

https://www.bardot.com/bardot/clothing/

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please add below custom CSS in Claue > Theme Option > General Layout > Custom CSS

.wc-col-switch a::before {
	width: 8px;
	height: 18px;
}
.wc-col-switch a {
	height: 24px;
}
.wc-col-switch a.one {
	width: 14px;
}
.wc-col-switch a.one::before {
	width: 8px;
}
.wc-col-switch a.two {
	width: 24px;
}
.wc-col-switch a.two::before {
	box-shadow: 10px 0 0 #878787, 10px 0 0 #878787;
}
.wc-col-switch a.two:hover::before, .wc-col-switch a.two.active::before {
	box-shadow: 10px 0 0 #222, 10px 0 0 #222;
}
.wc-col-switch a.three {
	width: 34px;
}
.wc-col-switch a.three::before {
	box-shadow: 10px 0 0 #878787, 20px 0 0 #878787;
}
.wc-col-switch a.three:hover::before, .wc-col-switch a.three.active::before {
	box-shadow: 10px 0 0 #222, 20px 0 0 #222;
}
.wc-col-switch a.four {
	width: 44px;
}
.wc-col-switch a.four::before {
	box-shadow: 10px 0 0 #878787, 20px 0 0 #878787, 30px 0 0 #878787;
}
.wc-col-switch a.four:hover::before, .wc-col-switch a.four.active::before {
	box-shadow: 10px 0 0 #222, 20px 0 0 #222, 30px 0 0 #222;
}
.wc-col-switch a.six {
	width: 64px;
}
.wc-col-switch a.six::before {
	box-shadow: 10px 0 0 #878787, 20px 0 0 #878787, 30px 0 0 #878787, 40px 0 0 #878787, 50px 0 0 #878787;
}
.wc-col-switch a.six:hover::before, .wc-col-switch a.six.active::before {
	box-shadow: 10px 0 0 #222, 20px 0 0 #222, 30px 0 0 #222, 40px 0 0 #222, 50px 0 0 #222;
}

For the filter, could you tell me the details.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Kent Nguyen]

Hi ,

Please see the attached file . I want to make the squared box instead of round corner. Also, all the default Button, could you please make it squared corner.

Thanks and regards

Kent

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please add more custom css code

.woocommerce-ordering, .cart .yith-wcwl-add-to-wishlist {
	border-radius: 0;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Kent Nguyen]

Hi,

The drop down box is now ok. But the column icon is not changed. Please advise.

Regards,

Kent

[Harry]

Hi Kent,

I’m sorry we use another way for switch column icon so can’t change like your screenshot. I gave you css to make icon thinner.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Kent Nguyen]

Ok Thnx a lot

[Author]

Posts