hook woocommerce widget to shop&category woocommerce_before_shop_loop

[melvin wang]

Hi Team,

I’ve done 2 days research and still abit confuse so I’m submitting you a ticket. I would like to hook these 2 woo widgets to woocommerce_before_shop_loop.
1. Filter product by Attribute
– Title: Filter by, Attribute: Hotel Rating, Display type – Dropdown, Query type – AND
2. Filter product by price

Is that possible to do? If yes could you kindly teach me what’s the code to write in the Hook Element, preferable with some css suggestion.

Truly appreciate.

TQ

Regards,
Melvin

[David]

Hi there,

first you would need to register an nw widget area with this PHP Snippet:

function woo_custom_sidebar() {
    register_sidebar(array(
        'name' => 'Woo Shop Widget',
        'id' => 'wooshopwidget',
        'description' => 'Woo Shop Widget',
        'before_widget' => '<div class="wooshopwidget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'woo_custom_sidebar' );

More info here:
https://developer.wordpress.org/reference/functions/register_sidebar/

Then you can hook the widget area into your site:

<?php if(!dynamic_sidebar('wooshopwidget')) ; ?>

I am not sure how those filter widgets will behave within that hook.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[melvin wang]

Hi David,

Thanks for your response, I’ve tried and it looks weird.

Thus I decided to use the idea in the other thread about off-canvas navigation as filter. I will close this for now.

Thanks for your support

Regards,
Melvin

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts