[Resolved] Woocommerce price slider not working in custom sidebar

[Michael]

Hi support

Please can someone have a look at my shop page and let me know if there’s a solution for this:

The price slider works in the default sidebar but the interactive slider element itself is not displaying in my custom sidebar area at the top of the page. I want to use this custom area instead of the traditional sidebar which is only there to demonstrate that the slider works. I think I’ve set up the php snippet for generating a custom sidebar and the GP hook for displaying it correctly, but there might be a trick to this that I missed.

Thanks for an awesome product, Tom – best WP framework I’ve ever used and I’ve been doing this for nearly 15 years!
Regards
Paul

[David]

Hi Paul,

where should the custom widget (sidebar) area be?
The other method could be to use a Widget Shortcode plugin and place it in a GP Hook.

Alternatively can you share the code you have used to register and hook the widget area.

[Michael]

Hi David

My custom sidebar is top center of the shop page content area (‘Filter by Price’) on this page:
https://actondemo23.com/shop. There’s also a right sidebar on this page, which I’ll remove if I can get the custom top sidebar to work. Its just there to prove that the price slider works.

I’ve used the following code:

Snippet to generate custom sidebar:

/**
* Register custom widgetized area.
*/
function price_filter_widget_area() {

register_sidebar( array(
‘name’ => ‘Price Filter Widget Area’,
‘id’ => ‘price_filter_widget_area’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘<h2 class=”widget_title”>’,
‘after_title’ => ‘</h2>’,
) );

}
add_action( ‘widgets_init’, ‘price_filter_widget_area’ );

/**
* End
*/

GP Hook code (Before Content):

<?php
/**
* Display custom widgetized area at top of Shop page.
*/
?>

<?php if( is_shop() ) : ?>
<?php if ( is_active_sidebar( ‘price_filter_widget_area’ ) ) : ?>

<?php dynamic_sidebar( ‘price_filter_widget_area’ ); ?>

<?php endif; ?>
<?php endif; ?>

<?php
/**
* End
*/
?>

Appreciate any help!

Thanks,
Paul

[David]

Hi Paul, try this function:

function awp_widgets_init() {

	register_sidebar( array(
		'name'          => 'Woo Widget Filter',
		'id'            => 'custom_widget',
		'before_widget' => '<aside id="woocommerce_price_filter-99" class="widget inner-padding woocommerce widget_price_filter">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2>',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'awp_widgets_init' );

add_action( 'generate_inside_container','woo_filter_widget' );  
function woo_filter_widget() {
	if ( is_active_sidebar( 'custom_widget' ) && is_shop() xor is_active_sidebar( 'custom_widget' ) && is_product_category() ) : ?>
		<div id="custom-sidebar" itemtype="https://schema.org/WPSideBar" itemscope="itemscope" class="widget-area sidebar"><div class="inside-custom-sidebar">
			<?php dynamic_sidebar( 'custom_widget' ); ?>
		</div></div><!-- #after-header-widget -->
	<?php endif;
}

[Michael]

Hi David

Pure genius! That works perfectly.

Many thanks
Regards
Paul

[David]

Glad to be of help Paul

[Author]

Posts