Custom Styling for filters

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Custom Styling for filters

This topic contains 7 replies, has 2 voices, and was last updated by

 
Keymaster
1 year, 5 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #28658

    Participant

    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.
    #28661

    Participant
    You cannot access this content.
    #28672

    Participant
    You cannot access this content.
    #28679

    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 :)


    #28683

    Participant
    You cannot access this content.
    #28684

    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 :)


    #28687

    Participant
    You cannot access this content.
    #28703

    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 :)


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.