Filter Form Appearance in Customized Templates

How can I change the appearance of filter forms in customized templates? I want it to look like the default filter form with the sticky wrapper effect.

Please try adding a wrapper (Group block) to the sidebar content and then edit its HTML attributes, if you add this attribute the sticky sidebar effect should be applied:

data-component="sticky"

Please note that this may require further changes, currently not all templates are 100% reproducible via the HivePress/Templates editor.

For anyone in the future, I was able to do this without using the group block.
So I usually will create a template using columns. Column 1 with the filter form and column 2 with the other blocks.


To get the new template to have a sticky filter form, you will first need to add the css classes inner-wrapper-sticky and site-sidebar to the column with your filter form, in this case column 1 on the left. (you have to do this first before entering the code editor because you will encounter a block recovery error after adding the data-component.)

Next, you will need to enter the “Code editor” by going to options in the top right.


Lastly, you need to add the data-component="sticky"code into the div that holds your wp:hivepress/listing-filter-container. Refer to the picture below.

Notice that I didn’t add the data-component code into the div that has the term alignwide. This is important for it to work.
This will probably require extra customizations if you don’t have your template created exactly like mine.

Thank you ihor for providing the data-component code and good luck to anyone who wants this customization. :slight_smile:

3 Likes

Thanks for sharing!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.