Move a Woocommerce Filter to Top of Mobile View

Hi Troyw,

How are you adding the widget? Is it through a Shortcode, a Block, or a code?

Just through the Left Sidebar Widget!

Can you take a screenshot of how it's added for clarity? Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Hey Fernando,
Please try these.
By the way, I am using the Woocommerce Brands Plugin

I see. Thank you!

If you can add that Widget/Block on a Block Element, you can use a Block Element - Hook hooked to after_header.

Then, add such a snippet:

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 100 === $element_id && !wp_is_mobile() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

Replace 100 with your Element ID.

Getting the Element ID: https://share.getcloudapp.com/YEuDdrnQ

Then, you can opt to hide the other Filter on mobile with this CSS:

@media (max-width: 768px) {
    .inside-left-sidebar aside#woocommerce_brand_nav-8 {
        display: none;
    }
}

Hey Fernando,
I have implemented this as instructed, but all I get is one Brand displayed at the top of the archive page, in mobile view.

When I add the Brands Widget / Block to the Element, it displays the text "No Categories". I cannot edit this.
Here is screenshot;
https://postimg.cc/vxZPtnJ7

This is what i put in the functions.php file;

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 210388 === $element_id && !wp_is_mobile() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

Any ideas?

That's the Block from the plugin right?

Can you add a static text to the Block Element just so we know it's running?

Hey Fernando,
Yes, I used the Brands Block from the Plugin.
I also added the text 'Brands Coming Soon' which is appearing in Mobile view. I put the Brands Plugin below the text and you can see that it is displaying a single brand, but not the filter.

Thanks

If you add the block directly to a page editor, does it work?

Hi team,
So if I add the block to a page editor, it does not work, so not sure how the Element will help for this?
I have been talking to Woocommerce and they can't really understand what I am asking.

To make things easier, how can I just move the Woocommerce left side bar to the top in mobile view?
Thanks

Just to add to this. I am using your Theme Brands Block or at least I assume it is part of GP as it shows under themes;
https://snipboard.io/84wcyN.jpg
Bottom left of image is 'Brands'
If I use your Category Block, it works, but the Brands one does not. Is this your block or is it Woocommerce?

Did you deactivate the Block Element? Can you re-enable it with the Static text, and I'll recheck what's occurring.

Hey Fernando,
No, the element and block are active.
Please see link below and you will see that in Mobile view there is text "Brands Coming Soon" which I added to the element to show it is working. The Brands Block is also active, but not working.

As I said though, I am happy to look at moving the left side bar above content when viewed on mobile and maybe then just hide the search box and keep subcategories and brands? Honestly, whatever is easier.
Thanks

I see. It seems that it really doesn't show outside the sidebar.

As an alternative, we can do what you're thinking of. Try adding this through Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .archive div#content {
        display: flex;
        flex-direction: column;
    }

    div#left-sidebar {
        order: -1;
    }

    aside#woocommerce_product_categories-5, aside#dgwt_wcas_ajax_search-2 {
        display: none;
    }
}