Add Product Search to WooCommerce Catelog

Hi there,

Where are you trying to add it?

Best way I can think of is to:

1. Install this plugin: https://wordpress.org/plugins/shortcode-widget/

2. Add the product search widget to that widget area, and note the shortcode.

3. Use a hook to insert the shortcode into that area:

add_action( 'generate_before_main_content', function() {
    if ( function_exists( 'is_shop' ) && is_shop() ) {
        echo '<div class="shop-search">';
            echo do_shortcode( '[your-shortcode'] );
        echo '</div>';
    }
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then you’ll need some CSS to place it – feel free to report back once the above is done and I can help with the CSS.

There should be a couple: https://docs.woocommerce.com/document/woocommerce-product-search/widgets/

Product Filter – Search
Product Search Field

That’s where you need the plugin I mentioned: https://wordpress.org/plugins/shortcode-widget/

That plugin adds a new widget area, which then provides a shortcode that you can use to display the widget anyway (outside of a standard widget area).

Then you can use the code I mentioned above (with your shortcode you aquired above): https://wordpress.org/support/topic/add-product-search-to-woocommerce-catelog/#post-12415031

Ah, I’m sorry! I linked to the wrong plugin.

Try this one instead: https://wordpress.org/plugins/amr-shortcode-any-widget/

This is the CSS:

.shop-search {
    float: right;
}

.shop-search .woocommerce-product-search {
    display: flex;
}

Right now the search is only on your shop page. You may need to update the function to show on categories:

add_action( 'generate_before_main_content', function() {
    if ( function_exists( 'is_shop' ) && is_shop() && is_product_category() ) {
        echo '<div class="shop-search">';
            echo do_shortcode( '[your-shortcode'] );
        echo '</div>';
    }
} );

That’s strange. What if you replace:

is_product_category()

With:

is_product_category( 'all-deals' )

Let me know 🙂

Let’s try this:

add_action( 'generate_before_main_content', function() {
    echo '<div class="shop-search">';
        echo do_shortcode( '[do_widget id=woocommerce_product_search-2]' );
    echo '</div>';
} );

Then this CSS:

.shop-search {
    display: none;
}

.woocommerce.archive .shop-search {
    display: block;
}