Thank you Trevor in advance for your help ~

I’m having some trouble setting this up. My goal is to have a filterable archive and filterable search. For example, 1] if user is on category=groceries (archive-product.php), they can filter groceries results and 2] if user searches “coffee” in search box on the homepage they can filter search.php results.

I use custom loops on my archive-product.php and search.php, both using WP_Query.

Based on your documentation – custom search results I should:

1] Attach Search & Filter to a query
But how to add this to my loops?

$args = array('post_type' => 'post');
$args['search_filter_id'] = 123;
$query = new WP_Query($args);

2] Enter the results URL where the query/results will be found
I’m confused about what to enter here in order for archive and search filters to work.

Here is my relevant search.php code:

<?php
$s=get_search_query();
$args = array(
                's' =>$s
            );
    // The Query
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
        echo "The search results:";
        while ( $the_query->have_posts() ) {
           $the_query->the_post();
                 ?>
                    <ul>
                        <?php
the_post_thumbnail( 'thumbnail');
the_title();
wp_reset_postdata(); // Remember to reset
?>				
</ul>

Here is my archive-product.php:

<?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' );
get_sidebar();

/**
 * 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' ); ?>

	<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',
	['search_filter_id'] => 123;
    '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
    ) ),
) );

if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
the_post_thumbnail( 'thumbnail');
the_title();
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(); ?>