Search Results for 'filter style'

[Trevor]

The output, style, layout and appearance of results is handled by your theme, theme archive templates (if your theme uses them), or page builder plugin/functions.

As this varies enormously from site to site, it is not practical to try to make universal examples for you to use.

The simple way to produce a post grid is to use this method:

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

If you have standard versions of WPBakery Page Builder or Elementor pro, we have extensions and guides for them:

https://searchandfilter.com/documentation/3rd-party/wpbakery-page-builder-formerly-visual-composer/
https://searchandfilter.com/documentation/3rd-party/elementor/

If you are considering using a Page Builder plugin, but have not yet purchased one, the more flexible (powerful) choice might be Elementor Pro, but your circumstances may dictate otherwise, so please research before making any decisions, as there are many options to choose from.

[Anonymous]

Hi,

Just bought the Pro version, I think the filtering capabilities are great. I was wondering if one could find custom templates (for usual usage like the one in your website) to use and edit. I’m working with the shortcode but I can’t even put the results in two columns. Any resource where we could see this in more detail? like actual php files with multiple columns or other styles?

Thanks a lot.

[Trevor]

Ah. I guess it works, but I suspect it would not in ajax mode?

If you have access to the PHP template file that is the one that outputs the while loop (inside the products container), you could add some PHP and use that to include some CSS to hide the reset button, like this:

<?php
global $searchandfilter;
$sf_current_query = $searchandfilter->get(1234)->current_query();
if (!($sf_current_query->get_search_term()=="") { <?
<style>
.woof_submit_search_form_container {display: none;}
</style>
<?php } ?>

Note: you would need to change the ID number, and it looks like you don’t have a search box, so this should work.

BTW, I think you need to add style like this also (generally):

.woof_redraw_zone {display: flex;}

This will stop content from below bleeding on to the ‘menu/form’.

[Trevor]

This:

[searchandfilter id="933" action="filter_next_query"]

is not CSS, but a shortcode that triggers some PHP to link the form to the results (to cause it to filter).

Are you saying that the forms still do not work, or that it is the display of the results (format/style) that is the issue?

[Anonymous]

Hi

My website is built using elementor & woocomerce.

I had my search and filter pro working fine until I installed Ele skin for elementor, which uses a template to style my product archive in woo-commerce. For the Ajax filter, I had previously targeted .elementor-widget-posts. I don’t know how to target this properly?

I see someone else on the forum experienced the same issue but I cannot see the solution as it was marked private. ANy help would be greatly appreciated

[Anonymous]

Hi
I try to install filter on my site by using Display Results – Custom. I try to do it like Filter Next Query Shortcode, as you say in documentation I write [searchandfilter id=”22″ action=”filter_next_query”][tourmaster_tour category=”” num-fetch=”6″ pagination=”page” tour-style=”grid” column-size=”3″ thumbnail-size=”full” tour-info=”duration-text, availability” excerpt-number=”20″ tour-rating=”enable” ] but it no work. Can you help me, or say how can I use it by other way.
When I use “Using a Shortcode” it show results as posts archive and it not nice.
If I use “As an Archive” and try to use content/archive-default.php file it work wrong.

I want to show results as here https://tripanatic.com/organizer/napravlenie/

[Trevor]

This search of our forum should give some snippets of how to style the form, but your theme might be overriding the CSS, in which case are you able to send me a live link/URL to your search page so I can take a look? Let me know which elements are resisting styling, and what CSS you had tried that did not work.

The search:

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

[Anonymous]

I am not sure why but I have not been able to use any styling on the forms. I am using Avada theme and have actively styles many things in the site so not sure why I am completely unable to do any styling to the widget filters.

[Trevor]

Here is the modified template code (copy it from the forum post, not the email, as email software will change some characters).

What did I change?

On line 78 is where I moved the form output to. I commented out the line where it had been – line 104. If this new code works, you can remove line 104.

Line 80 is commented out (in HTML – again if this works, remove this line):

<li class="product">

and added back in at line 109 as an echo, and the ending </li> added in at line 123 also as an echo, and the original end </li> now on line 128 is commented out (can also remove).

Try this code then:

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header( 'shop' ); ?>

<?php

/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action( 'woocommerce_before_main_content' );

?>
<header class="woocommerce-products-header">
        <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
                <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
        <?php endif; ?>

        <?php
        /**
         * Hook: woocommerce_archive_description.
         *
         * @hooked woocommerce_taxonomy_archive_description - 10
         * @hooked woocommerce_product_archive_description - 10
         */
        do_action( 'woocommerce_archive_description' );
        ?>
</header>

<?php

if ( woocommerce_product_loop() ) {

        /**
         * Hook: woocommerce_before_shop_loop.
         *
         * @hooked woocommerce_output_all_notices - 10
         * @hooked woocommerce_result_count - 20
         * @hooked woocommerce_catalog_ordering - 30
         */
        do_action( 'woocommerce_before_shop_loop' ); ?>

echo do_shortcode('[searchandfilter id="3791"]');
        <ul class="wpf-search-container products">
<!--        <li class="product"> -->
        <?php

// Get The queried object ( a WP_Term or a WP_Post Object)
$term = get_queried_object();

// To be sure that is a WP_Term Object to avoid errors
if( is_a($term, 'WP_Term') ) :

// Setup your custom query
$loop = new WP_Query( array(
    'post_type'      => 'product',
    'posts_per_page' => -1,
    'post_status'    => 'publish',
    'tax_query'      => array( array(
        'taxonomy' => 'product_cat', // The taxonomy name
        'field'    => 'term_id', // Type of field ('term_id', 'slug', 'name' or 'term_taxonomy_id')
        'terms'    => $term->term_id, // can be an integer, a string or an array
    ) ),
) );
        
//echo do_shortcode('[searchandfilter id="3791"]');

if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
echo '<li class="product">';
the_post_thumbnail( 'thumbnail');
echo '<div style="margin:8px;">';
echo 'movie preview - ';
the_title();
echo "<br>";
$price = get_regular_or_sale_price();
        echo $price;
        echo '&nbsp';
$regularpriceifsale = get_regular_price_if_sale();
        echo $regularpriceifsale;
echo '<br>';
echo '<br>';
echo '</div>';
echo '</li>';
endwhile;
wp_reset_postdata(); // Remember to reset
endif; endif;
?>
<!--                </li> -->
</ul>
<?php

        /**
         * Hook: woocommerce_after_shop_loop.
         *
         * @hooked woocommerce_pagination - 10
         */
        do_action( 'woocommerce_after_shop_loop' );
} else {
        /**
         * Hook: woocommerce_no_products_found.
         *
         * @hooked wc_no_products_found - 10
         */
        do_action( 'woocommerce_no_products_found' );
}

/**
 * Hook: woocommerce_after_main_content.
 *
 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
 */
do_action( 'woocommerce_after_main_content' );

/**
 * Hook: woocommerce_sidebar.
 *
 * @hooked woocommerce_get_sidebar - 10
 */
do_action( 'woocommerce_sidebar' );
?>

<?php get_footer(); ?>

[Trevor]

The ‘old’ style of integration, with Ajax disabled, using the filter_next_query shortcode to link the form to the results, where the form is set to the Custom display results method, should still work.