Need help create filters for custom post

[transparentstoriess_vcbS]

Have created vehicles as the custom post type Have not create custom taxonomies will need to according to the attachments

[Ernest Marcinko]

Hi,

The best course of action is usually to have items that can be assigned to multiple items as taxonomy terms. I would suggest the type, model, engine, status as custom taxonomies and the rest as custom fields: year, moved, price – so you can create a range slider or numeric input filters on them. That should give you the best possible architecture and it’s going to be future proof.

[transparentstoriess_vcbS]

Hii Thanks Ernest
Is there any tutorial that i can follow and get an idea how to create the filter/search or any support person that can help me?

[Ernest Marcinko]

Yes, of course! I recommend checking some concrete examples first, it helps you to understand it better:
– The staff search & filter example setup
– Also the woocommerce search setup
Both of these include filters with the same configuration as we used it on our demo website 🙂

For more in-depth explanations of all features:
– You can start from the front-end filters glossary documetnation.
– Check out the taxonomy term filters part, it includes a video
– And also the custom fields filters documentation

If you haver any specific questions, let me know, I’m more than happy to help!

[transparentstoriess_vcbS]

Also Ernest
Can you give me something like step by step to create search and filter similar to what i have sent you?
Its very confusing i have applied filters in backend but they are not showing up on frontend

[transparentstoriess_vcbS]

Also how can i create the search result archive page?

[Ernest Marcinko]

Sure!
So, what you want is to make sure that the settings are visible. Then for each taxonomy create a taxonomy filter, and change the display modes to drop-down (or whichever you prefer). I assume you have the year, type, model etc.. as taxonomies.

Then, assuming the pricing is a custom field (in the examples I will use “price” as the field), then create either a number range or a range slider filter. Both are excellent for price type of inputs.

Also how can i create the search result archive page?
The archive page is controlled by the theme (or page builder if you use any). Unfortunately search plugins can’t affect the layout of that. Most themes have a customizer for every archive, including the search archive. Try looking it up in the search settings or under the templates.

[transparentstoriess_vcbS]

Okk filters are visible now
Just one last thing how can i customize the style like i have sent the screenshot

[transparentstoriess_vcbS]

And where i can see all the theme stylings

[Ernest Marcinko]

The stylings follow the theme, as drop-down boxes are very hard to style.

The most common issue is when the theme overrides the checkbox styles. I can suggest some custom styles to get close to that layout, but since this is not part of regular support, I can’t guarantee anything. This should get you very close to that:

Apply this code to your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

.asp_ss {
    background: hsl(0deg 0% 93.33%) !important;
    margin-top: 24px !important;
    padding: 12px !important;
    border-radius: 8px !important;
}

.asp_ss select.asp_nochosen.asp_noselect2 {
    appearance: menulist;
    background-image: unset;
    border-radius: 3px;
    border: unset !important;
}
.asp_ss .asp_select_label {
    padding-left: 0 !important;
}

div.asp_w.asp_sb.searchsettings input[type='text']:not(.asp_select2-search__field).asp-number-range {
    padding: 2px 8px !important;
}

div.asp_w.asp_sb.searchsettings input[type='text']:not(.asp_select2-search__field).asp-number-range:last-child {
    margin-right: 12px !important;
}

.asp_ss .asp_sr_btn_flex {
    margin-top: 22px !important;
}

[transparentstoriess_vcbS]

Okk its close enough
how can i change the placements of filters
and i have created taxonomy filters but but both have same title segments how can i update for both separately

https://royalblue-barracuda-979403.hostingersite.com/

[transparentstoriess_vcbS]

The mobile view is also not looking good

[Ernest Marcinko]

Okay, let’s try some more rules to center them, that should also fix the mobile layout:

form.asp-fss-flex {
    justify-content: center;
}

div.asp_w.asp_sb.searchsettings input[type='text']:not(.asp_select2-search__field).asp-number-range {
    margin-left: 0 !important;
}

#ajaxsearchprobsettings1_1.searchsettings fieldset.asp_s_btn_container .asp_sr_btn_flex {
    padding-left: 0 !important;
}

[transparentstoriess_vcbS]

Okk i have worked on that
BUt now how can i change the placement of the filters what will appear first

[Ernest Marcinko]

You can change the group ordering here, and also when you re-order them individually it changes the individual order for both taxonomies and custom fields.

[Author]

Posts