prestashop 1.7 Move product filters to top of products [needing new method for PS 1.7]

[Attrexx]

Hello. I am trying to move the product filters from the left column to the center one, above the products.
This is a feature many users have requested/used in the past. I used to apply the below method to 1.6 versions, but now we have different module for filters and I don't want to screw things up.

https://www.prestashop.com/forums/topic/301276-moving-filter-block-from-left-column-to-top-of-product-list/

As a bonus, I am going to try and hide the filters on desktop like they hide on mobile, showing at first just a "Show filters" toggle button and displaying them on customer click. If you have a suggestion on that aspect too, it would be awesome.

I would prefer using overrides, but direct method is possible too.

Many thanks and Happy Holidays to all.

[tantan199]

Hi,

 

Our themes happen to have the feature you wanted, check this transformer theme demo  advertising link removed by moderator

Beside that, filters can also be displayed as dropdown menus above the products, like this advertising link removed by moderator

 

Take these steps to achieve that.

1. Removing the Faceted search module from the displayLeftColumn hook on the BO > Positions page to make filters don't show out on the left column.

2. Edit the \themes\classic\templates\catalog\listing\product-list.tpl file,  add this code to it, see attached picture.

{if isset($listing.rendered_facets) && $listing.rendered_facets}
  <div class="horizontal_filters">
    {$listing.rendered_facets nofilter}
  </div>
{/if}

3. The last step is using css code to make everything look nice, you know how to do that you are a web developer. You can also edit the \themes\classic\templates\catalog\_partials\facets.tpl file to change the layout of filters if needed.

 

Regards,

Jonny 

[Pedro]

if i put the filter on top, the prices and weight slider doesn't show.

Any solution for that?
I'm using the original theme.

[Alejandrosi]

Hi, this was really useful.

Does anybody know how to make it toggle down when clicking the FILTER button?

Thanks!