Add the “filter” button on product category

[olivier]

Hi,

I want to add the “filter” button to display the “off canvas” panel only on products pages as in your “niche” example; how to do that?

(Also, I do not want to see this button with the mobile display.)

Thank you

[David]

Hi there,

you would create a new Hook Element:

Add this to the content:

<?php
$icon = '';

if ( function_exists( 'generate_get_svg_icon') ) {
	$icon = generate_get_svg_icon( 'menu-bars' );
}
?>

<span class="slideout-toggle woo-filter-toggle hide-on-mobile has-svg-icon"><a href="#"><?php echo $icon; ?> FILTER</a></span>

Select the woocommerce_before_shop_loop hook

Check Execute PHP
Set the Display rule locations to:

Product Archive
Product Category Archives > All Product Categories

In Customizer > General – make sure the Icon Type is set to SVG.

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

[olivier]

Thank you, David, for your quick response. It works fine except for the SGV icon that doesn’t show up ; I respected what you said: “In Customizer > General – make sure the Icon Type is set to SVG.”

Thank you

[Leo]

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

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

[olivier]

Yes of course, I put the link of the test site into private information.

Thank you

[Leo]

Looks like you’ve commented out the code?”
https://www.screencast.com/t/iYH7zraZGYN

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

[olivier]

It’s strange, I didn’t comment on it !

[Leo]

Did you check to execute PHP?

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

[olivier]

I ran PHP again and this time it worked ; thanks for your patience and professionalism

Thank you

[Leo]

No problem 🙂

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

[Author]

Posts