[Resolved] Is it possible to add horizontal product filter top of the products?

[Ethan]

I’d like to add a product filter top of the products on my shop page. I tried many plugins but they all add widget to the sidebars. Is it possible to add filter top of the products?

[Elvin]

Hi,

You can use the Hook Element and place WooCommerce’s product filter shortcode:
https://docs.woocommerce.com/document/product-filters/

As for which hook to use on your Hook element, you can refer to this documentation for the hook location areas on your page.
https://docs.generatepress.com/article/hooks-visual-guide/

A wise man once said:
"Have you cleared your cache?"

[Ethan]

Hi @Elvin

Thanks a lot for the answer. I folowed thos esteps and created the filters exactly where I want.

However there is one thing I cannot manage to do and wondering if you could help.

I want “FILTER DEALS” and “CURRENT PRICE” filters to be next to each other (rather than top of each other). Their width can be smaller (something like width= 45% maybe)

I want to achieve a layout like below:

“Filter Deals” – “Current Price”
————-RESET————–

I’d appreictae if you could help.

[David]

Hi there,

@media(min-width: 600px) {
    .wcpf-filter-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: content;
    }
    .wcpf-field-item {
        flex: 0 0 48%;
    }
    .wcpf-field-item.wcpf-field-button {
        flex: 1 0 100%;
    }
}

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

[Ethan]

you guys are angels! thanks @David , thanks @Elvin

[David]

Glad we could be of help

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

[Author]

Posts