- This topic has 33 replies, 3 voices, and was last updated 2 years, 6 months ago by
.
-
Posts
-
Hey team,
I have been talking to Woocommerce who have suggested I ask you. I am using the Woocommerce Brands Plugin to sort Brands. The Filter appears in the Left Sidebar Widget in Desktop view. This is great, however in Mobile view, all the sidebar widgets appear at the bottom of the page. This is also fine, however I would like the Brands filter to display at the top, when viewed on a mobile.
How would I do this?
Thanks
Customer Support
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 PluginI 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
100with 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/vxZPtnJ7This 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
Customer Support
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?
ThanksJust 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.
ThanksI 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; } }
- You must be logged in to reply to this topic.
