Page templates issues

FiboFilters won’t be displayed for products that are fetched and displayed within page templates, The reasons are:

  1. FiboFilters doesn’t know that a particular product loop should be considered the main product loop to which filters should be applied.
  2. It’s not possible to change FiboFilters configuration in a hook later than template_redirect. In case of page templates, this hook is applied much later in the process.

How to associate filters with products loaded so late in page templates, then? Please follow these steps:

Step 1

Force a “Late init” mode. In our example, we’re using a premade template named Custom Landing Page in the page-templates/custom-landing-page.php file. We’re going to enforce the “Late init” mode on the template:

add_filter( 'fibofilters/request/late_init', function () {
    if ( is_page_template( 'page-templates/custom-landing-page.php' ) ) {
       return true;
    }

    return false;
} );

ⓘLearn how to add this snippet to your WordPress.

Step 2

Indicate product IDs or product objects that should be included during the filtering process:

add_filter( 'fibofilters/request/late_init/base_products', fn() => $products );

ⓘLearn how to add this snippet to your WordPress.

Step 3

The finished template should look like that:

<?php
/**
 * Template Name: Custom Landing Page
 */

get_header(); ?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <?php if ( have_posts() ) { ?>
                <header class="woocommerce-products-header">
                    <h1 class="woocommerce-products-header__title page-title"><?php the_title(); ?></h1>
                </header>

                <?php echo do_shortcode( '[fibofilters layout="horizontal" min_screen=1 max_screen=99999]' ); ?>
                <?php echo do_shortcode( '[fibofilters_applied_filters]' ); ?>

                <?php
                $products = wc_get_products( [
                    'limit'    => - 1,
                    'category' => [ 'caps' ],
                ] );

                add_filter( 'fibofilters/request/late_init/base_products', fn() => $products );

                if ( $products ) {
                    wc_get_template( 'loop/loop-start.php' );
                    ?>
                    <?php foreach ( $products as $product ) {
                        $post_object = get_post( $product->get_id() );
                        setup_postdata( $GLOBALS['post'] = &$post_object );
                        wc_get_template_part( 'content', 'product' );
                    ?>
                    <?php } ?>

                    <?php wc_get_template( 'loop/loop-end.php' ); ?>
                    <?php wp_reset_postdata();
                }

                echo do_shortcode( '[fibofilters_show_more_products_btn]' );
 
            } else {
                get_template_part( 'content', 'none' );
            }
            ?>
        </main><!-- #main -->
    </div><!-- #primary -->

<?php
get_footer();

Note:
All filters and UI elements should be added to a template using shortcodes. In the example above we’re displaying:

  1. Horizontal filters above products, with this shortcode:
    [fibofilters layout="horizontal" min_screen=1 max_screen=99999]
  2. Applied filters below, with this shortcode:
    [fibofilters_applied_filters]
    It contains all currently selected filter values.
  3. Show more products button below the product loop, with this shortcode:
    [fibofilters_show_more_products_btn].

You can find more information about adding filters to a non-WooCommerce page in our post about filters location/custom location.