Forums Forums Search Search Results for 'filter style'

Viewing 10 results - 21 through 30 (of 496 total)
  • Author
    Search Results
  • #272388

    In reply to: I hope for help.


    Trevor
    Participant

    You would need to apply custom CSS to the form to suit your precise needs. There are many CSS snippets on our forum:

    https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

    I do sometimes provide these, if I have the available time (but I am rather busy at the moment, sorry).

    For example, to find snippets for the search field, which has the class name sf-field-search, this search should give you posts that style that field:

    https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter+sf-field-search/

    Rounder corners are set with the CSS border-radius attribute.

    #270488

    Trevor
    Participant

    CSS style from WPBakery is causing this, so this CSS will help:

    /* gap between field and next title */
    .wpb_text_column .searchandfilter[data-sf-form-id="8463"] > ul > li {
        margin-bottom: 20px
    }
    /* gap between items in a field */
    .wpb_text_column .searchandfilter[data-sf-form-id="8463"] > ul > li > ul > li {
        margin-bottom: 0px;
    }
    #269850

    Anonymous
    Inactive

    Hi, i would like to create a filter menu like the one seen on https://www.wonderlandmodels.com/models/

    My shop page is https://legendary-models.com/shop/, and i would like to use white background with black text and borders.

    In addition, the search and filter pro form is appearing during checkout process and in the cart, effectively its appearing in all WooCommerce pages, however i would like to display it on product catalog pages only.

    Look forward to reply


    Anonymous
    Inactive

    Hi, I’m trying to filter tire types (products in Woocommerce) from Advanced Custom Fields Pro using Search and Filter Pro – The fields are brand_item, tyre_build, sidewall_style, and tire_rim_diameter. I have read the notes for searching Advanced Custom Fields in Woocommerce, and some searches are working well others are not?

    I have not used Search and Filter Pro before, are there any setup examples that would help me?
    Do I need a separate search form for each group of fields?
    Under Settings and Defaults, how do I set the Post Meta conditions?

    #268882

    Anonymous
    Inactive

    Hi Ross,

    Thanks for the assistance. Very annoying that Flatsome have all those “!important” rules in their default css stylesheet! The css code you provided wasn’t correctly overriding the main theme’s css, so I had to override the file in the child theme and change the value there. Seems to have fixed the massive loader icon and all is working perfectly now!

    On another note… did you recently fix an issue with the dropdown category counts not updating on ajax filtering? I seem to remember before the counts weren’t updating on filter which is why I was using a wider css selector for the ajax container but they seem to be okay now.

    Many thanks,

    #268301

    Anonymous
    Inactive

    Thanks for your detailed answer. That’s motivating.

    Q2 Make a dropdown multi-select of ‘Eten & drinken‘ and ‘Faciliteiten‘
    A2 You want this to be a dropdown with checkboxes? I think that this too will come in V3

    Yes, that would be exactly what I want, just this example.

    Q3 Use stars in stead of the range-bar, because it’s about review-score. The stars should be colored when you pick them.
    A3 I can only think this would require some custom JavaScript to enable the click on the stars to change the slider (that could be hidden). But to add the stars themselves, again, V3 would make this a lot easier

    I want to filter by clicking the stars in the filter. I’m looking forward to V3 to make this happen.

    Q4 Some space between the dropdown with option ‘Relevantie‘ and ‘Filters wissen‘
    A4 Custom CSS would be needed:

    Works great, thanks!

    With V3, you will have more flexibility to style things using classes, but I am not sure how much control we can give you in the Elementor widget settings. But, something for us to consider.

    If this could be done in Elementor that would be great.
    But if it can be done on the WordPress dashboard that’s also helping.

    A5 You don’t mention the spacing you indicated in the screenshot, for ‘Eten & drinken‘ and ‘Faciliteiten‘, like this:

    
    .searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul > li {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    5px is what it is currently set at, so increase those for more gap, decrease for less gap.

    Perfect, this work great by just changing the padding. Thanks!

    Good luck with the developent of V3.

    #267912

    Trevor
    Participant

    So:

    Q1 Move the sort-dropdown to be in the top right (I read that’s not possible in the current version?)
    A1 You are correct, this will come in V3 (due in a few months)

    Q2 Make a dropdown multi-select of ‘Eten & drinken‘ and ‘Faciliteiten‘
    A2 You want this to be a dropdown with checkboxes? I think that this too will come in V3

    Q3 Use stars in stead of the range-bar, because it’s about review-score. The stars should be colored when you pick them.
    A3 I can only think this would require some custom JavaScript to enable the click on the stars to change the slider (that could be hidden). But to add the stars themselves, again, V3 would make this a lot easier

    Q4 Some space between the dropdown with option ‘Relevantie‘ and ‘Filters wissen‘
    A4 Custom CSS would be needed:

    .searchandfilter[data-sf-form-id="3835"] .sf-field-reset {
        margin-top: 15px;
    }

    With V3, you will have more flexibility to style things using classes, but I am not sure how much control we can give you in the Elementor widget settings. But, something for us to consider.

    You don’t mention the spacing you indicated in the screenshot, for ‘Eten & drinken‘ and ‘Faciliteiten‘, like this:

    .searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul > li {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    5px is what it is currently set at, so increase those for more gap, decrease for less gap.

    #267502

    Anonymous
    Inactive

    https://prnt.sc/vodelo Hi, by default I want to active Projections taxonomy when a user comes to this page. Is it possible then how?

    here is my code:

    <?php
    /* 
       Template Name: analysis
    */
    get_header();
    
    	$ourCurrentPage = get_query_var('paged');
        $args = array(  
       'post_type' => 'analysis',
       'post_status' => 'publish',
       'posts_per_page' => 10,
       'taxonomy' => 'projections',
       'paged' => $ourCurrentPage
        );
        $args['search_filter_id'] = 1605;
        $the_query = new WP_Query( $args );?>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.1/venobox.min.css" integrity="sha512-e+0yqAgUQFoRrJ4pZigQXpOE0S7J9IGwmgH801h4H5ODqOCG8/GRfXHQ+9ab754NL79O7wDwdjwY3CcU8sEANg==" crossorigin="anonymous" />
        <style>
            .f1p{display:flex;flex-wrap:wrap;max-width:900px;margin:auto;}.grant-parent{width:30%;margin:1%;padding:15px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;}.heding.ccount{font-size:15px;margin-bottom:0px;}.pagination{width:100%;}
        </style>
                <div class="f1b-main" style="padding-top:30px;">
                    <?php echo do_shortcode('[searchandfilter id="1605"]'); ?>
                    <div class="f1p">
                        <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <?php $image = get_field( 'image' );?>
                        <div class="fl grant-parent">
                            <P class="heding ccount"><?php echo get_field( "date" );?></P>
                            <?php 
                                foreach((get_the_terms( $post->ID, 'analysis' )) as $category){
                                    echo "<p><a class='venobox' data-gall='$category->name' href='$image' data-title='the_title()'><img src='$image' /></a></p>";
                                }
                            ?>
                            <p class="heding ccount" title="<?php the_title(); ?>"><b><?php the_title(); ?></b></p>
                        </div>
    
                        <?php endwhile; ?>
    
                        <div class="pagination">
                            <h2><?php echo paginate_links(array(
                        'total' => $the_query->max_num_pages
                        ));
                        ?></h2>
                        </div>
    
                        <?php else : ?>
                        <div class="not-found">
                            <p><?php  _e( 'Sorry, no products matched your criteria.'); ?></p>
                        </div>
                        <?php endif; ?>
    
                        <?php wp_reset_postdata(); ?>
    
                    </div>
                </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.1/venobox.min.js" integrity="sha512-6mm1Gra+9mSztlk6Q45F1soEHmkduyd2ponCIWNo5pr0lgcr8d79GQjQ3Nw0uRR3/+y/OZGklAi38yE1QSNpCw==" crossorigin="anonymous"></script>
     <script>
     jQuery('input[value="projections"]').trigger( "click" );
     jQuery('.venobox').venobox(); 
        (function($) {
            "use strict";
            jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function() {
                jQuery('.venobox').venobox();
            });
        }(jQuery));
    </script>
    
    <?php do_action( 'kadence_single' );
    get_footer();
    #266877

    Anonymous
    Inactive

    Hi,

    we use the Search & Filter Pro on our website to filter a custom posttype (sneakers) with 5 taxonomies (brand, model, color, target audience, age). We created a custom archive for each of these 5 taxonomies.
    We only created one “search form”.

    In the archive for a specific model for example we call the Search & Filter Pro filters using :

    $sf_current_query = $searchandfilter->get(7183946)->current_query();

    We get a nice list of sneakers that match the current model. But what it also shows if we call the filter using a shortcode (<?php echo do_shortcode( ‘[searchandfilter id=”7183946″]’ ); ?>) – so we can filter on color, target audience and age, the brand and model also are there. From a user experience we find this obsolete so we have hidden it using css override in the archive page :

    <style>
    select[name=”_sft_brand[]”] {
    display : none;
    }
    select[name=”_sft_model[]”] {
    display : none;
    }
    </style>

    Unfortunately this results in our page having a lot of (irrelevant) DOM elements which we would like to exclude. This is because all brands and models are still available in the filter (while hidden using CSS). Please note we have a lot of brands and models and we want to keep the page as clean as possible.

    How can we achieve this? Is there a way we can eliminate the DOM elements of brand and model on this particular taxonomy archive? For example on the model taxonomy we want to filter out the brand and model and on the brand page we want to disable the brand.

    Mark

    PS. Please check https://www.solezilla.nl/model/nike-air-max-90/ for an example

    #266297

    Anonymous
    Inactive

    Hey!
    I’m successfully using your plugin with my Newspaper theme after following your advice to install the additional WP Bakery plugin that is necessary to make it work.
    https://urban-digital.de/smart-city-projekte/

    The only problem now is that I cannot customize the layout of the displayed results. For building the page with my Newpaper theme I inserted the shortcode “[searchandfilter id=”9936″ show=”results”]” to display the results.

    Can you help me please to customize the layout like this?
    https://ibb.co/dgR7cTF

    Thank you!

Viewing 10 results - 21 through 30 (of 496 total)