Search Results for 'filter style'

[Anonymous]

Ok, I deleted the original search form and started over with a new one. I am probably not choosing the right settings to set it up properly. Here is one archive page where it doesn’t work: https://www.beautiful-muslimah.com/create/beautiful-home/ There are supposed to be 3 posts there.

It still works fine on the archive page I need it to work on: https://www.beautiful-muslimah.com/beauty-style/sets/

Here are the settings I chose:
General tab:
Search in the following post types: Posts
Results per page: 10
Auto submit form? Yes
Field relationships: AND
Enable Auto Count: Yes
Update the Search Form on user interaction: Yes
Choose which kinds of pages S&F will try to do this on: Post Type Archives

Display Results tab:
Display results method: Post Type Archive
Enable filtering on Taxonomy Archives? Yes
Load results using Ajax? Yes
Make searches bookmarkable? Yes
Only use Ajax on the results page? Yes
Scroll window to: None
Ajax Container: #main
Pagination Type: Normal
Pagination selector: .pagination a

Posts tab:
Post Status: Published
Exclude Post IDs: (blank)
Sticky Posts: Default
Default Order: Choose an option, Descending
Secondary Sort Order: None, Descending

Tags, Categories & Taxonomies tab:
Categories (category) Include 45 [the ID of the Outfits category]
(all other values blank)

(I didn’t do anything with Post Meta and Advanced tabs.)

Most of these settings are the default settings. I am probably not understanding how to just have the search form affect this one category and leave the rest of the site alone.

Thanks much for your help!
Best,
Callista

[Anonymous]

Hello, I am wondering if it’s possible to style the select box on the filter to match my clients specifications on their blog wordpress site. Here is a screenshot of what they’re looking for – http://puu.sh/F53Qy/fc5a116035.png. Any and all help would be greatly appreciated.

[Anonymous]

So… I am trying to get a basic search field (in a header) to work with a sidebar filter to end up in woocommerce styled pages (the sidebar is not everywhere). Problem one is S&F says I can’t have two different forms that two different forms that use the Woocommerce Shop Display Results option — why not?

In any case, I pretty much got a native search form to work in the header and direct to a woocommerce archive page by redirecting the search to my catalog page which has the sidebar filter. However, it doesn’t work with the sidebar filter. So, I can search, but all the filters ignore the search term.

How can I get the filters to honor (and remember) the query results that the user entered from a WP search? Or how can I have two different forms end up in the same place?

The only thing I can think of would be to add a search to the sidebar and then pre-populate the field with a get_search_query(). But that seems overly hacky to me.

[Trevor]

So, the problem is the template being used by your theme on the theme search page.

I re-used a search page you had made, and that works fine if the search display results method is set to Shortcode:

https://www.runpix.fr/?page_id=21672&_sf_s=46

If you agree that works OK, then it is a matter of finding a better (style) display method. I would suggest this:

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

[Trevor]

As this is Divi you are using, and it looks like you are using the Divi Post Grid element, you need to use the addon plugin for Divi and the method described here:

https://support.searchandfilter.com/forums/topic/divi-4-templates-blog-module/#post-226630

This will require you to change a few settings in the form also.

It also looks like, in the Search & Filter Settings, you have the Combobox script set to Chosen (which is the default). Change that the Select2.

Any styling of the form must be done with Custom CSS. I have (generally) made some guides in this thread:

https://support.searchandfilter.com/forums/topic/edit-typography-and-button/

(I will be adding some more into that thread during today)

To style the Select2 controlled elements, see this thread:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/

[Anonymous]

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

[Ross]

Hi Benjamin

You can do this like:

.searchandfilter input[type="submit"] {
    background-color: #f00;
    border-radius: 8px;
}

If that doesn’t work, then it might be that your CSS is loading before our CSS, so you can use the ID which should overrule the styles (just replace 1960 with the actual ID of your search form):

#search-filter-form-1960 input[type="submit"] {
    background-color: #f00;
    border-radius: 8px;
}

Thanks

[Anonymous]

Hi (sorry for the late reply Christmas and stuff), I’ve got it to work. Thanks for the feedback. I’ve only have this issue:

Also the little loader of the infinite scroll is aligned to the left, how can I center that? Probably very simple but I cant find what container is above .search-filter-scroll-loading so when I set width:100% the loader icon is way out of proportions 🙂

Is there a way I can set the loader-icon styles and display it in the center of the container?

[Anonymous]

Hi Trevor, thanks for your quick thought.
Yes,both settings for auto count are set to on.
Hide empty is only for “choise” fields, and the first two settings are number fields. Hide empty is set to on for the third field.

– Can it have something to do with the fact that I use 3 wp-queries?
– I don’t see any effect from adding 'search_filter_id' => 153395, to the $args. How can I check if this is set right?

Please see this page, where the only offer should disappear when the first filter is set to less than 3: https://fietspitstop.nl/product/yepp-fietszitje-achter-maxi-easyfit-achter-zwart/

This is the most recent template code:

<?php
/*
 * Template Name: Product
 * Template Post Type: post, page, product, item
*/

get_header(); ?>

<?php
$link = get_post_custom_values("link") [0];

$color = get_post_custom_values("kleur") [0];
//echo get_post_custom_values("product_group")[0];

?>

<div id="content" class="site-content">
	<section id="primary" class="content-area">
		<main id="main" class="site-main">
			<article id="post-2" class="post-2 page type-page status-publish hentry entry">
			<div class = "pdp-full-top">
			    <div class = "pdp-top-container entry-header">
				<h1 class = "pdp-title">
					<?php
$brand = get_post_custom_values("brand") [0];
$line = get_post_custom_values("line") [0];
$type = get_post_custom_values("type") [0];
$variant = get_post_custom_values("variant_value") [0];
echo $brand . " " . $line . " " . $type . " " . $variant;
?>
				</h1>
				<div class = "pdp-image-container"><div class = "pdp-image-helper"></div><?php the_post_thumbnail(); ?>
				</div>
				<div class = "pdp-top-info-container">
					<h2 class = "pdp-sub-title">
						<?php
$product_group = get_the_terms( get_the_ID(), 'productgroep' )[0]->name ;
echo $product_group . ", " . $variant;
?>
					</h2>
					<h5 class = "pdp-choise-criteria">Keuzecriteria</h5>
					<div class = "pdp-price">Prijs vanaf ...
					</div>
				</div>
			    </div>
			</div>
			<div class = "pdp-lister-container entry-content">
			<?php //Filter area ?>
				<div class = "pdp-filter-container">
					<?php echo do_shortcode('[searchandfilter id=""]'); ?>
					<?php echo do_shortcode('[searchandfilter id="153395"]'); ?>
				</div>
				<div class = "pdp-shopping-list-container">
					<?php
//Get all merchants
$ean = get_field("ean");
$args_merchants = array(
    'post_type' => 'merchant_offer',
    'tax_query' => array(
        array(
            'taxonomy' => 'ean',
            'field' => 'slug',
            'terms' => $ean,
            'compare' => '='
        ) ,
    )
);
$offers = new WP_Query($args_merchants);
$all_merchants = [];
while ($offers->have_posts()):
    $offers->the_post();
    $get_merchant = get_post_meta(get_the_ID() , 'merchant_id') [0];
    array_push($all_merchants, $get_merchant);
endwhile;

echo "all merchants: ";
print_r($all_merchants);

//Get filtered merchants
//wp_reset_postdata();
//wp_reset_query();
$args_offers = array(
    'post_type' => 'merchants',
    'search_filter_id' => 153395,
    'tax_query' => array(
        //'relation' => 'AND',
        array(
            'taxonomy' => 'merchant_id',
            'field' => 'slug',
            'terms' => $all_merchants,
            'operator' => 'IN',
        ) ,
    )
);

$query2 = new WP_Query($args_offers);

$filtered_merchants = [];
$post_id_by_merchant = [];

while ($query2->have_posts()):
    $query2->the_post();
    $get_filtered_merchant = get_post_meta(get_the_ID() , 'merchant_id') [0];
    array_push($filtered_merchants, $get_filtered_merchant);
    $post_id_by_merchant[$get_filtered_merchant] = get_the_ID();

endwhile;
//Get filtered offers by filtered merchants
//wp_reset_postdata();
//wp_reset_query();
$args_filtered_offers = array(
    'post_type' => 'merchant_offer', //add filter id somewhere here!
    //'search_filter_id' => 165176,
    'tax_query' => array(
        'relation' => 'AND',
        array(
            'taxonomy' => 'ean',
            'field' => 'slug',
            'terms' => $ean,
        ) ,
        array(
            'taxonomy' => 'merchant_id',
            'field' => 'slug',
            'terms' => $filtered_merchants,
        ) ,
    ) ,
);

$query3 = new WP_Query($args_filtered_offers);
//Build shopping list
 ?>
						<div class = "pdp-shopping-list" id = "pdp-shopping-list">
<br><?php
echo "filtered merchants: ";
print_r($filtered_merchants);
?>
<br><?php
echo "query 2: ";
print_r($query2);
?>
							<div class = "row header">
								<div class = "item"></div>
								<div class = "item">Winkel</div>
								<div class = "item">Reviews</div>
								<div class = "item">Basisprijs</div>
								<div class = "item">Totaalprijs</div>
								<div class = "item"></div>
							</div>
						<?php if ( have_posts() ) : while ($query3->have_posts()):
    $query3->the_post();
    setlocale(LC_MONETARY, 'nl_NL');
    $current_merchant_id = $post->merchant_id;
    $stars = floatval(get_post_meta($post_id_by_merchant[$current_merchant_id], 'reviewsterren', true));
    $review_amount = get_post_meta($post_id_by_merchant[$current_merchant_id], 'aantal_reviews', true);
?>
							    <div class = "row">
								<div class = "item logo"><?php echo get_the_post_thumbnail($post_id_by_merchant[$current_merchant_id]); ?></div>
								<div class = "name"><?php echo get_post_meta($post_id_by_merchant[$current_merchant_id], 'name', true) ?></div>
								<div class = "review-container"><div class="stars" style="--rating: <?php echo $stars ?>;" aria-label="Rating of this product is <?php echo $stars ?> out of 5."></div><div class = "reviews"><?php echo $review_amount . " reviews" ?></div></div>
								<div class = "item price-actual"><?php echo money_format("€%.2n", $post->price_actual); ?></div>
								<div class = "item price-total"><?php echo money_format("€%.2n", $post->total_price); ?></div>
								<div class = "item view"><button class = "button"><a href="<?php echo $post->link; ?>" target="blank">Bekijken</a></button>
							    </div>
							</div>
							
						<?php
endwhile; else : ?>
	<p><?php esc_html_e( 'Geen producten gevonden.' ); ?></p>
<?php endif; ?>
						</div>
<?php
//wp_reset_postdata();
//wp_reset_query();
?>

				</div>
			</div>
		</main>
	</section>
</div>

Thanks in advance.

[Anonymous]

Hi,

I have these taxonomies:
– Product
– Merchant
– Merchant offer

I created a custom post template to make it possible to view all merchant offers for a product, with the possibility to filter on both merchant meta fields (review, payment methods..) as on merchant offer meta fields (price, delivery time..)
Now I see that the S&F Pro plugin shows filter options for every existing post instead of the current viewed product. When you see my code below (this is my very first php-code, so when it is looking strange, that’s why), do you have a hint how to show only filter options for the current viewed product?

<?php
/*
 * Template Name: Product
 * Template Post Type: post, page, product, item
*/

get_header(); ?>

<?php
$link = get_post_custom_values("link") [0];

$color = get_post_custom_values("kleur") [0];
//echo get_post_custom_values("product_group")[0];

?>

<div id="content" class="site-content">
	<section id="primary" class="content-area">
		<main id="main" class="site-main">
			<article id="post-2" class="post-2 page type-page status-publish hentry entry">
			<div class = "pdp-full-top">
			    <div class = "pdp-top-container entry-header">
				<h1 class = "pdp-title">
					<?php
$brand = get_post_custom_values("brand") [0];
$line = get_post_custom_values("line") [0];
$type = get_post_custom_values("type") [0];
$variant = get_post_custom_values("variant_value") [0];
echo $brand . " " . $line . " " . $type . " " . $variant;
?>
				</h1>
				<div class = "pdp-image-container"><div class = "pdp-image-helper"></div><?php the_post_thumbnail(); ?>
				</div>
				<div class = "pdp-top-info-container">
					<h2 class = "pdp-sub-title">
						<?php
$product_group = get_terms(array(
    'taxonomy' => 'productgroep',
    'hide_empty' => false,
)) [0]->name;
echo $product_group . ", " . $variant;
?>
					</h2>
					<h5 class = "pdp-choise-criteria">Keuzecriteria</h5>
					<div class = "pdp-price">Prijs vanaf ...
					</div>
				</div>
			    </div>
			</div>
			<div class = "pdp-lister-container entry-content">
			<?php //Filter area ?>
				<div class = "pdp-filter-container">
					<?php echo do_shortcode('[searchandfilter id="165176"]'); ?>
					<?php echo do_shortcode('[searchandfilter id="153395"]'); ?>
				</div>
				<div class = "pdp-shopping-list-container">
					<?php
//Get all merchants
$ean = get_field("ean");
$args_merchants = array(
    'post_type' => 'merchant_offer',
    'tax_query' => array(
        array(
            'taxonomy' => 'ean',
            'field' => 'slug',
            'terms' => $ean,
            'compare' => '='
        ) ,
    )
);
$offers = new WP_Query($args_merchants);
$all_merchants = [];
while ($offers->have_posts()):
    $offers->the_post();
    $get_merchant = get_post_meta(get_the_ID() , 'merchant_id') [0];
    array_push($all_merchants, $get_merchant);
endwhile;
//Get filtered merchants
wp_reset_postdata();
wp_reset_query();
$args_offers = array(
    'post_type' => 'merchants',
    'search_filter_id' => 153395,
    'tax_query' => array(
        'relation' => 'OR',
        array(
            'taxonomy' => 'merchant_id',
            'field' => 'slug',
            'terms' => $all_merchants,
            'operator' => 'IN',
        ) ,
    )
);
$query2 = new WP_Query($args_offers);

$filtered_merchants = [];
$post_id_by_merchant = [];

while ($query2->have_posts()):
    $query2->the_post();
    $get_filtered_merchant = get_post_meta(get_the_ID() , 'merchant_id') [0];
    array_push($filtered_merchants, $get_filtered_merchant);
    $post_id_by_merchant[$get_filtered_merchant] = get_the_ID();
endwhile;
//Get filtered offers by filtered merchants
wp_reset_postdata();
wp_reset_query();
$args_filtered_offers = array(
    'post_type' => 'merchant_offer', //add filter id somewhere here!
    'search_filter_id' => 165176,
    'tax_query' => array(
        'relation' => 'AND',
        array(
            'taxonomy' => 'ean',
            'field' => 'slug',
            'terms' => $ean,
        ) ,
        array(
            'taxonomy' => 'merchant_id',
            'field' => 'slug',
            'terms' => $filtered_merchants,
        ) ,
    ) ,
);

$query3 = new WP_Query($args_filtered_offers);
//Build shopping list
 ?>
						<div class = "pdp-shopping-list">
							<div class = "row header">
								<div class = "item"></div>
								<div class = "item">Winkel</div>
								<div class = "item">Reviews</div>
								<div class = "item">Basisprijs</div>
								<div class = "item">Totaalprijs</div>
								<div class = "item"></div>
							</div>
						<?php while ($query3->have_posts()):
    $query3->the_post();
    setlocale(LC_MONETARY, 'nl_NL');
    $current_merchant_id = $post->merchant_id;
    $stars = floatval(get_post_meta($post_id_by_merchant[$current_merchant_id], 'reviewsterren', true));
    $review_amount = get_post_meta($post_id_by_merchant[$current_merchant_id], 'aantal_reviews', true);
?>
							    <div class = "row">
								<div class = "item logo"><?php echo get_the_post_thumbnail($post_id_by_merchant[$current_merchant_id]); ?></div>
								<div class = "name"><?php echo get_post_meta($post_id_by_merchant[$current_merchant_id], 'name', true) ?></div>
								<div class = "review-container"><div class="stars" style="--rating: <?php echo $stars ?>;" aria-label="Rating of this product is <?php echo $stars ?> out of 5."></div><div class = "reviews"><?php echo $review_amount . " reviews" ?></div></div>
								<div class = "item price-actual"><?php echo money_format("€%.2n", $post->price_actual); ?></div>
								<div class = "item price-total"><?php echo money_format("€%.2n", $post->total_price); ?></div>
								<div class = "item view"><button class = "button"><a href="<?php echo $post->link; ?>" target="blank">Bekijken</a></button>
							    </div>
							</div>
							
						<?php
endwhile; ?>
						</div>
<?php
wp_reset_postdata();
wp_reset_query();
?>

				</div>
			</div>
		</main>
	</section>
</div>

Thanks again in advance.
Best regards,
Roeland van Oostenbrugge