Custom Styling for filters

[paulsessions65]

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

[paulsessions65]

You cannot access this content.

[paulsessions65]

You cannot access this content.

[Ernest Marcinko]

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.

[paulsessions65]

You cannot access this content.

[Ernest Marcinko]

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;
}

[paulsessions65]

You cannot access this content.

[Ernest Marcinko]

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;
}

[Author]

Posts