Floating filter with icon

Hi, you def. need to make the show filter floating and with a icon like on the Porto theme. Much easier to find for the customers.

Can this be done with css or how can I get it?

Hello,

If you mean filters in the sidebar on the left or on the right, you need to do the following:

1. Theme Settings > Shop > Set the layout

2. Appearance > Widget > insert filters in Shop widget area

If you mean something different, please specify.

Best Regards

Sorry, totally forgot: It if in mobileview I mean… In desktop view the filters is of course easy to see in the left sidebar.

Please see pic from porto theme just attached

Attachments:

You must be logged in to view attached files.

Hello,

Please add this CSS snippet to the Theme Settings > Custom CSS:

@media (max-width: 1024px) {
	div.woodmart-show-sidebar-btn {
			position: fixed;
			top: 30%;
			left: 0;
			z-index: 30;
			height:50px;
			width:50px;
			justify-content: center;
			-webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);
			box-shadow: 0 0 3px rgba(0,0,0,.15);
			background-color:white;
			font-size: 16px;
			font-weight: 400;
	}

	.woodmart-show-sidebar-btn:before {
		content: "\f115";
		font-family: "woodmart-font";
	}

	.woodmart-show-sidebar-btn span {
		display:none!important;
	}
}

Best Regards

That is so awesome! You should add this to the next theme update with the posibility to change the size, color and icon.

I guess the “f115” is the icon? Is there somewhere I can see a list so I can change it?

Correction. I see that the code is the icon, but from fontawesome I cannot choose all. I would very much like this: https://fontawesome.com/icons/sliders-h?style=solid Should I upload the icon somewhere?

I see the theme support font awesome 4.7 icons, but why cant I then use “fa-sliders”

https://fontawesome.com/v4.7.0/icon/sliders/

Hello,

Please find and replace this CSS:

.woodmart-show-sidebar-btn:before {
    content: “\f115”;
    font-family: “woodmart-font”;
}

for this one:

.woodmart-show-sidebar-btn:before {
   font-family: “FontAwesome”;
   content: “\f1de”;
}

Best Regards

THANKS!

You are welcome!

Hallo again,

Now request have been made a part of the theme (via update), but what do I do now to change the icon to the same https://fontawesome.com/v4.7.0/icon/sliders/ ?

Also, it would be cool if it didnt show the “show sidebar” until the user scrolles down the page. So it showes the slider icon right away in mobile view. (Like it did before when I used your css)

Hello,

What icon do you want to change, please provide the screen?

Also, it would be cool if it didnt show the “show sidebar” until the user scrolles down the page.

There is no option to do that.

Best Regards

Nevermind the “Show sidebar” I would just like to change this icon (see pic) to https://fontawesome.com/v4.7.0/icon/sliders/

Attachments:

You must be logged in to view attached files.

Hello,

Please try this code:

.woodmart-sticky-sidebar-opener:after {
    content: "\f1de";
    font-family: fontawesome;
}

Best Regards

[Author]

Posts