Custom Styling for filters

[paulsessions65Participant]

Hi, I’m trying to style the categories so that they display next to each other rather than stacking.
I’d also like to remove the heading ‘Filter by Categories’ and the checkboxes so just the Category text remains as selectable elements.
Lastly, I’d like the list to default to ‘All’ on page load.
Is it possible to do all of these options?

Thanks

Attachments:

You must be logged in to view attached files.

[paulsessions65Participant]

You cannot access this content.

[paulsessions65Participant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi,

That exact layout is not possible, but you can change the display mode of the filter via this option: https://i.imgur.com/Sqk8Yd5.png
That should contain all the things you were looking for.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[paulsessions65Participant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Well, if you don’t like a drop-down layout, then a different approach is to use a custom CSS to simply display the items horizontally:

.asp_simplebar-content {
    display: flex;
    justify-content: left;
}

.asp_option_label {
    white-space: nowrap;
}

.asp_filter_tax {
    width:  100% !important;
    min-width: 100% !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[paulsessions65Participant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi Paul,

Could be doable, but will require a custom script as well.

Try adding this custom code to the functions.php in your theme/child theme directory. Before editing, please make sure to have a full site back-up just in case!

add_action("wp_footer", "asp_mark_options_checked");
function asp_mark_options_checked() {
	?>
	<script>
	jQuery(function($){
		$('.asp_w input[type=checkbox]').on('asp_chbx_change', function(){
			console.log($(this).prop('checked'));
			if ( $(this).prop('checked') ) {
				$(this).closest('.asp_option').addClass('asp_selected_option');
			} else {
				$(this).closest('.asp_option').removeClass('asp_selected_option');
			}
		});
	});
	</script>
	<?php
}

This will add the asp_selected_option class to the option container, where the checkbox is checked. Now you can use that to change the properties of the selected one via CSS:

.asp_selected_option .asp_option_label {
    color: cyan !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts