How to change filter icon to button?

[consciouscrafties]

Hi there,

I’d like to change the woocommerce filter icon to be a button with wording similar to ‘Filter by Category’ (see screenshot)

How do I do that?

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

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

.filter-trigger:after {
	content: 'Filter by Category';
	margin-left: 7px;
}

Best regards

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

[consciouscrafties]

Hi that added the words ‘filter by category’ alongside the existing filter icon (see screenshot) rather than removing the filter icon and replacing with a pretty ‘filter by category’ button.

Also on mobil it’s still just the filter icon.

Thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please change prev code to

@media only screen and (min-width: 1025px) {
.filter-trigger:after {
	content: 'Filter by Category';
}
.filter-trigger i { display: none;}
}

@media only screen and (max-width: 1024px) {
.filter-trigger:after { display: none;}
}

Best regards
}

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

[consciouscrafties]

Hi Harry,
That sadly removed the icon button and text and left me with a blank space (the button wasn’t hiding either as I hovered over that section.
Any ideas? I know a site that uses your theme has a button there.
Many thanks,
Karen

[Harry]

Hi Karen,

I still saw the old code apply on your site. please remove old code and add new

Best regards

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

[consciouscrafties]

I changed it back to the old code as otherwise my customers would have no way of filtering the categories. Promise it does disappear with the new code

[Harry]

Hi Karen,

I added new code on your site now the icon hide on desktop and show on mobile and the text hide on mobile.

Best regards

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

[consciouscrafties]

Hi is it not possible to make this a button? I have seen on other sites using Claue this is a nice pretty button.

[Harry]

Hi Karen,

I still not clear your issue.

1. You want add text and hide icon button on desktop?

2. Because the text long so you want remove the text on mobile and only show icon button on mobile.

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

[consciouscrafties]

Hi Harry,

I would like a button on both desktop and mobile like the attached (that I could change the colour of to match my site branding)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please add more code in Claue > Theme Option > General Layout > Custom CSS

.filter-trigger {
	padding: 5px 15px;
	background: #F49CC4;
	color: #fff !important;
	font-size: 18px;
}

Best regards

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

[consciouscrafties]

Thank you Harry that looks great! Also thank you for putting our pink colour in there too 🙂

Is it possible to have the same button with wording on mobile devices too?

Many thanks,

Karen

[Harry]

Hi Karen,

On mobile if you show the text in will break layout.

Please change all prev code to

.filter-trigger {
	padding: 5px 15px;
	background: #F49CC4;
	color: #fff !important;
	font-size: 18px;
}
.filter-trigger:after {
	content: 'Filter by Category';
}

@media only screen and (max-width: 736px) {
.filter-trigger { font-size: 14px;}
}

Best regards

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

[Author]

Posts