Hello,

The situation

I’m designing and developing a platform (Custom WordPress Theme) for hiring a boat in and around Amsterdam and i was in need of a filter. I found Search & Filter Pro and it’s working out alright for now, thank you for the awesome plugin.

Now i’m trying to get a certain html output to compliment the design and functionality. Could you give me some support on this one please? Here are some visuals of how it should look like:

Image: Design filter – Price-range
https://imgur.com/7WzF3Uz

Image: Design filter – Amount people on a boat
https://imgur.com/rARSOgI

Image: Design filter – Checkbox with provisions on a boat
https://imgur.com/a/H2Ry4

The question
How can i achieve custom html output of the filter?
For example: I would like to change the heading <h4> of each filter-component into a <button>. When i click on a button (old-heading) -> the associated filter appears. Second: I would like to add some text (user instruction) inside each filter component etc., just like the design indicates the text and functionality.
After that i can play around with some JavaScript and it’s done.

What i did so far

I’m using Genesis Frame work and ACF for templates. So i added some custom fields as post meta purpose to all the boats: price amount (number), people amount (number) and provisions (checkboxes). After some struggles i got the filter working.

Image: Current filter – Not active
https://imgur.com/bC9VGkf

Image: Current filter – Active
https://imgur.com/Zv0qqzU

The code of the custom-filter template

This is the small-template.php i made for displaying the results As an Archive:

/**
 * Template Name: Ship filter output
 * Description: Used as a page template to show post contents for the filter.
 */

remove_action ('genesis_loop', 'genesis_do_loop'); // Remove the standard loop
add_action( 'genesis_loop', 'filter_loop' ); // Add custom loop

function filter_loop() {

	echo do_shortcode('[searchandfilter id="2484"]');

	?>
	<div class="grid archive__grid">
	<?php

	if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		
 				
 		<article class="archive__ship border--2px">
 			... my code here ...
		</article>

 		<?php endwhile;
 		genesis_posts_nav();

	endif;
	wp_reset_postdata();

	?>
 	</div>
 	<?php
 
}

genesis();

Could you help me please?