Search Results for 'filter style'

[Trevor]

I don’t need that, thanks. What you want cannot, yet, be done, on the results page. We have received feature requests to allow the one form to be broken into parts to be placed (and styled) in different places (and differently styled) on the page.

We have taken those requests on board for our forthcoming V3 (which we hope to release in summer 2020 – but that may flex a little as we polish the code and UI). For example, you might have a form in WooCommerce that has a Search Box (text field), a Sort Order drop down, and then other fields (Product Categories, Product Tags, Variations, etc). You will be able to place the Search Box in the header, and the Sort Order above the products, and the rest of the form in the sidebar.

But, that is not possible right now.

As to taking a theme search (like one might see in a header or main menu) and directing that to our search form, this is possible, as long as, on the results page, the Search & Filter form also has a text search. Also, on the search results page, the two forms will NOT ‘talk’ to each other (see my earlier comments about splitting the form up).

[Trevor]

A number of issues there. Many of the elements of a form are styled by the browser and the operating system and are not affected by CSS.

As browsers go through regular updates, they change their styling of these things to suit latest ‘fashions’. I noticed recently that Chrome made such a change.

You have Elementor, but not Elementor Pro? I understand one is paid, so not everyone will use it.

If you are making custom CSS, you need to get the specificity correct, otherwise it will not override existing CSS. This means using the browser web developer inspector to see what current selectors in the CSS set a particular attribute, and using that with added specificity, usually like:

.searchandfilter[data-sf-form-id="1428"] .select2-container {
  margin: 5px;
}

So, I would need to see what you are trying to change (a live link/URL), and with what CSS.

[Anonymous]

Hi,

I have an issue showing the categories in a filter.
I use the input type radio (this in order to style is as a button) to show the categories.
It shows the categories with 11 to 14 items, one categorie has 189 items and it don’t show (shows 0)

On Tags, Categories & Taxonomies I Exclude two other categories based on their ID
Anny idea why the filter is not showing the 189 items?

[Trevor]

The titles of filters are optionally added by you the designer. It is this setting (which you should leave blank, and, by default, it is blank):

https://www.screencast.com/t/W8BjhumkF

You might find the filters better styled if you add the select2 script to them, as described here:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

The only other thing I notice is that the fields are all the same width, for which you would need custom and responsive CSS. This search on our forum should give you some snippets to look at:

https://support.searchandfilter.com/forums/search/.select2-container/

[Trevor]

Ah. Now I see. That style is applied by your device and browser to all form select boxes. It is not done with CSS.

The only way to take control of ‘select’ elements is to use a JavaScript plugin library to replace them. For WordPress, the best choice is to use Select2. See this post:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

[Trevor]

I do not think so, as the ‘Divi 100 Article Card’ plugin must therefore be using JavaScript to apply itself to the Post archive display.

The chances are it is letting the page load, then, on document ready, is running the javascript.

You might ask the plugin author if there is a way to reapply the style after an Ajax refresh of just the grid/results is made. We have some code that function could be placed inside:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>

[Trevor]

We have received feature requests to allow the one form to be broken into parts to be placed (and styled) in different places (and differently styled) on the page.

We have taken those requests on board for our forthcoming V3 (which we hope to release in summer 2020 – but that may flex a little as we polish the code and UI). For example, you might have a form in WooCommerce that has a Search Box (text field), a Sort Order drop down, and then other fields (Product Categories, Product Tags, Variations, etc). You will be able to place the Search Box in the header, and the Sort Order above the products, and the rest of the form in the sidebar.

But, that is not possible right now.

As to taking a theme search (like one might see in a header or main menu) and directing that to our search form, this is possible, as long as, on the results page, the Search & Filter form also has a text search. Also, on the search results page, the two forms will NOT ‘talk’ to each other (see my earlier comments about splitting the form up).

You need to decide where you want to send the search (either a page with a slug or not), and use a WordPress rewrite in your child theme functions.php file.

There is an example here (the site shown uses a slug name for the search results page, which looks nicer):

https://support.searchandfilter.com/forums/topic/using-default-wp-search-bar-to-show-sf-results-page/#post-243811

Here there is an example of one that doesn’t use a slug:

https://support.searchandfilter.com/forums/topic/how-to-maintain-search-string-while-filtering/#post-205209

[Anonymous]

Hi Trevor, thanks very much. The example you can see online has the following CSS

/*============================================================================================*/
/*SEARCH AND FILTER COUSTOM FORM AND WIDGET */
/* Style for the basic form and as it appears in the widget */
/*============================================================================================*/

form#search-filter-form-243.searchandfilter {
  margin-top:0px;
}
#top select {
  font-family:'AvenirNextCondensedRegular', sans-serif;
  padding-top:0px;
}
a.search-filter-reset {
    font-family:'AvenirNextCondensedRegular', sans-serif;
}
#search-filter-form-243 .searchandfilter label {
  font-size: 23px;
}

.searchandfilter ul li:first-child {
  padding-top:0px;
}
.searchandfilter ul li.sf-field-reset {
  padding-top:18px;
}
.searchandfilter a.search-filter-reset {
  margin-left:9px!important;
}
#top .entry-content-wrapper select {
 background:none; 
 border-radius: 0px;
}
#top #search-filter-form-243 select {
  border: none;
  background-color: transparent!important;
  margin-bottom: 5px!important;
  padding-left:0px!important;

}
#top select {
  font: 1em 'AvenirNextCondensedRegular', sans-serif!important;
}

@media only screen and (max-width: 767px) {
  .searchandfilter ul li {
    display: inline;
  }
  .widget #search-filter-form-243  li{
  font-size: 18px!important;
  }
 
  .searchandfilter select.sf-input-select {
    min-width:120px;
  }

}

I don’t find the way to take off the border-radius from the options container (I mean when you click on a select the dropdown container has a border with a radius which I don’t want). Also the font inside this container is not the one I chose (AvenirNextCondensedRegular) but it’s an Helvetica. There is no way to change it. Can you help me? Thanks!

For the rest, I will wait for V3.

[Anonymous]

I did it inside scripts tag and inside file.js (add script src to this file like normal), nothing happened, the console is empty.

I use this on woocommerce shop page, but every js working there – I’d checked hierarchy scripts but nothing change.

this is my script for the show and hide filters – maybe there is a problem but I can’t find it.

$(document).ready(function () {
    // show/hide filters in specify buttons
    $("form#search-filter-form-120 ul").first().addClass("all-filters");
    $('p.button-filter').each(function () {
        $(this).on('click', function () {
            $(this).addClass('active').siblings().removeClass(
                'active');
            if ($(this).hasClass('active') && $(this).hasClass('button-filter-1')) {
                // if (window.location.href.indexOf('?sort_order=') > 0) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-sort_order")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
                // }
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-2')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-product_cat")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-3')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_family")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-4')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_finish")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-5')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_colour")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-6')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_material")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-7')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_size")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-8')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-post-meta-_price")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-9')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_availibility")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            }
        })

    });
});

here is my results.php page

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      https://searchandfilter.com
 * @copyright 2018 Search & Filter
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( $query->have_posts() )
{
	?>

<div id="ajax-reload" class="row">

    <?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
    <?php
                global $product;
	$pid = $product->get_id();
	// Get wishlist for current user. ?>
    <div class="col-md-6 col-xl-4 product-block">

        <div class="container-img">
            <a href="<?php the_permalink(); ?>">
                <?php 
				if ( has_post_thumbnail() ) {

					//the_post_thumbnail("small");

					 $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
                            echo '<div style="background: url('. $url.');" class="img-product-item">'; ?>

                <a
                    id="wish-list-icon"><?php echo do_shortcode('[yith_wcwl_add_to_wishlist product_id=' . $pid . ']' )?></a>

        </div>

        <div class="overlay">
            <img src="<?php the_field('pictogram_products') ?>" alt="" class="pictogram-img">
            <div class="text">
                <h2 class="name-product-overlay"><a href="<?php the_permalink()  ?>"><?php the_title(); ?></a></h2>

                <?php $price = get_post_meta( get_the_ID(), '_regular_price', true); 
                

                $price_sale = get_post_meta( get_the_ID(), '_sale_price', true); // Retrive products sale price
  // Formatted price by adding decimal
  $formatted_price_sale = wc_price( $price_sale );
  $formatted_price = wc_price( $price ); // Formatted price by adding decimal ?>

            </div>
            <div class="cart-area-product">
                <?php echo '<a class="disabled-link">
	
	<div class="like-price-buy">
		<a href="'. do_shortcode('[add_to_cart_url id=' . $pid . ']' ) .'" data-product_id="'. $pid .'" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">
        <svg xmlns="http://www.w3.org/2000/svg" width="18.417" height="22.521" viewBox="0 0 18.417 22.521">
        <g id="Group_22" data-name="Group 22" transform="translate(1 1)">
          <path id="Path_104" data-name="Path 104" d="M663.582,1530.458v-4.788a3.42,3.42,0,0,1,3.42-3.42h0a3.42,3.42,0,0,1,3.42,3.42v4.788" transform="translate(-658.794 -1522.25)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
          <path id="Path_105" data-name="Path 105" d="M666,1542.25v13.681H649.582V1542.25h17.095" transform="translate(-649.582 -1535.41)" fill="none" stroke="#636363" stroke-miterlimit="10" stroke-width="2"/>
          <line id="Line_4" data-name="Line 4" x2="8.795" transform="translate(3.664 12.459)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
          <line id="Line_5" data-name="Line 5" x2="8.795" transform="translate(3.664 15.391)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        </g>
      </svg>
      <span class="order-now-products">Order now</span>
        </a>
        <span class="price">'. do_shortcode('[product_price id='. $pid. ']' ).'</span>

	</div>
	</a>'; // Print new html with title and price ?>
            </div>
        </div>
        </a>
    </div>

    <div class="product-info-small">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </div>

    <?php }	?>
    <p><?php the_category(); ?></p>
</div>

<?php
	}
	?>
</div>

<div class="pagination">

    <div class="nav-previous"><?php next_posts_link( 'Load more', $query->max_num_pages ); ?>
    </div>

    <div class="nav-next"><?php previous_posts_link( 'Load previous' ); ?></div>
    <?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
</div>
<?php
}
else
{
	echo "No Results Found";
}
?>

if it helps will great.

[Anonymous]

Hello,

I need to add a div wrapper to <select> items in filters area, in order to further style by css.

Can you tell me where I can find the templates or files where the select fields live?

Thanks,
Florin