Customize design/appearence of both search form and results

Anonymous

#230757

Hi,

I need to style the Layout of both the search form and the results.

1. The search form displays all filter options below each other. I want them in columns next to each other.

2. For the search results I want to display nice little boxes with the product title and a picture, also a few in a row and not all below each other.

I searched the forum already, but didn’t really find what I was looking for. Can you please point me in the right direction and provide me the specific documentation for my needs? Thank you!

Regards
Dave

Trevor

#230798

It would require custom CSS, which I can help with.

Are you able to send me a live link/URL to your search page so I can take a look?

Also, any annotated screenshots you can make, or a design image, to help me would be appreciated. You will need to upload images to an external file sharing site, like dropbox, and share the link(s) with me.

Anonymous

#230915

This reply has been marked as private.

Trevor

#231030

This reply has been marked as private.

Anonymous

#231036

Done 🙂

Trevor

#231040

As a quick attempt, maybe this:

.searchandfilter h4 {
  width: 200px;
  display: inline-block;
}
.searchandfilter > ul > li > ul {
  display: inline-block;
  vertical-align: top;
}
.searchandfilter > ul > li > ul > li {
  display: inline-block;
  margin-right: 10px;
}
.searchandfilter li[data-sf-field-input-type=checkbox] input {
  display: none;
}
.searchandfilter li[data-sf-field-input-type=checkbox] > ul > li label:hover {
  cursor: pointer;
  background: #fff;
}
.searchandfilter li[data-sf-field-input-type=checkbox] > ul > li.sf-option-active label {
  background: #fff;
}

Anonymous

#231171

Wonderful thank you. I will tweak it further. And regarding the search results?

Trevor

#231244

You would need to customise the results.php file to add HTML structure, classes and content. To start this, see this link:

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

However, for a more ‘instant’ solution, you might use a page builder or grid plugin, such as shown here (the one shown is free):

https://searchandfilter.com/documentation/3rd-party/post-grid/

Anonymous

#234181

Hi, thanks for your help so far. Was great. One more question came up:

Instead of custom taxonomies I want to use the built in wordpress categories to filter my custom post types. The reason for that is that in categories we can predefine the categories, while with taxonomies it seems that you can just add a new one like with tags. We want to avoid that new tags/categories are created by accident (missspelling for example) so we want to predefine them like its the case with categories.

So if you know a way to stop the “just write it here and we will create a new tag”-option for custom taxonomies I would be happy to continue to use them.

Otherwise I would like to use the categories instead. And here would be my question: I created two parent categories named “colors” and “shapes” and made two subcategories for each.

Now I built a filter with two category fields. For each field I excluded all the categories except one parent category and its subcategories. Everything looks good when I view the filter in the frontend. Here you can take a look:

http://wp.kruch.com/test-produktfilter-2-0

The last two rows called “Farben” (colors) and “Formen” (shapes) are representing this two categories. But the problem now is: If I select a subcategory from Farben and then in the second row a subcategory from Formen it doesn’t use any AND logic. It just replaces the selection of the first field. In other words it seems as if you can use the category-searchfield only once per search form?

I hope I made myself understandable 🙂 Thank you!

Trevor

#234322

The built-in WordPress ‘Categories’ (and Tags) are meant to be used only for Posts, but some users do add them to other Post Types. However, this can cause problems. But, with regard to your desire to limit options, it is possible for users to add their ‘own’ terms in both, so that would not solve your problem.

Instead, you need to use a Custom Field that has its options limited. You can do that with the free Advanced Custom Field plugin.

It has field types (other than plain text), such as Select, Checkbox, Radio Button, etc. where you can limit choices.

With regard to the form, you can use each term source only once, so you cannot use Category twice. Both ‘color’ and ‘shape’ would be ideal to be Custom Fields instead.

[Author]

Posts