Customize Search Settings Layout (vertical)

[ldddParticipant]

Hi there,

i would like to customize the layout for search settings basically showing shoe sizes picked as taxonomy under Ajax Search Pro Settings in a different look.

Right now it looks like this on my site:

Layout i would like to create should look more similar to this:

I appreciate any help on this. I am not sure where to start here.

Right now the only settings to control the look and feel of this is under

Frontend Search Settings -> General

– Columns Layout
– Display Mode

For column layout i right now using “Flex”
Display Mode “Checkboxes”

Is column layout “flex” okay here?

Checkboxes should be fine but there are no further options to style them in detail or? Checkboxes for the taxonomy terms here should be aligned horizontal like in example.png and maybe change colors/style of the checkboxes it self.

Is this possible to realize by adding some custom css styling here?

thanks in advance.

[Ernest MarcinkoKeymaster]

Hi!

Well, this requires major customization, I’m not sure if it is possible with custom CSS, it might be.

The column layout does not affect the layout of this single option, it’s used whenever there are more option boxes. Flex should be perfectly fine.

I dug into this in a bit more details, and I may have a very basic solution which could start you off. So, with a small custom code I have managed to do this: https://i.imgur.com/weEkx03.gif

The solution has a custom CSS as well as a small script, that handles adding one additional class to the output. Please note that this is nowhere near an optimal solution, but it can give you an insight on how to start the modification.

Custom CSS

.asp_option_cat {
    display: inline-block !important;
    float: none !important;
    margin: 5px 0px 5px 10px !important;
    padding: 4px 6px !important;
    border: 1px solid black !important;
}

.asp_option_cat.asp_selected_cb {
    box-shadow: 0 0 0 3px black inset !important;
}

.asp_option_cat .asp_option_inner {
    display: none !important;
}

Additional script
Add this custom code to the functions.php in your theme/child theme directory (copy from line 3 only!). Before editing, please make sure to have a full site back-up just in case!

I hope this helps!

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

[Author]

Posts