Block available only on desktop version

Hello,
How to insert a block but visibile only on desktop version of the page?

Kind regards
Slawek

Comments

  • Hello,
    if you edit the "section" in the Muffin Builder you will be presented with a lot of options. Scroll down the options list to the end, you will see a "visibilty" options. This tells you when should the section be visible or not.
    thanks
  • Thank you for the answer. I tried to add Woocommerce widget (List of products category) on Woocommerce shop page and make it visible only on mobile but I have some other questions:
    1. What block type I should use to insert the list wiget (I tried to used code block with code "" but it shows only the code itself)?
    2. What option I have to edit to present Muffin Builder section on Shop page before list of products (the test of code block I've done on another page because i can't force wordpress to show any Muffin builder block on shop page) ?
    Kind regards
    Slawek
  • 1) If you want to use a widget in the Muffin Builder, you have to use the "Sidebar Widget" item.
    2) You cannot use the Muffin Builder on the shop pages - it's disabled by the default.
    Thanks
  • So how can I add "List of products category" on the top of Products page (just below menu) visible only on mobile?

    Kind Regards
    Slawek
  • You would have to create new page for a shop and attach the shortcode from woocommerce (https://docs.woocommerce.com/document/woocommerce-shortcodes/) below the "lists of products category"

    All of it have to be done with Muffin Builder.
    thanks
  • I created the new page "Produkty2" for a shop and add a list of product category as a WP content item not visible on desktop - and it works fine. But on the new page I find two new problems:
    1. the sidebar dedicated for shop is presented partially, with only one widget of 6 added :-O
    2. Products added as a new item code in Muffin builder is presented in different way than on orginal page. Do I have to indicate the class for the item and where I find the proper code of the class?

    Please compare the two pages:
    www.krainaaloesu-forever.pl/produkty  (oryginal)
    www.krainaaloesu-forever.pl/produkty2 (the new one)

    Kind regards
    Slawek


  • Ad.1 I found the reason - I added other sidebar.
  • Your products are different because you inserted it in wrong item, please use the "Column" item instead.

    The "Code" item is only for embeding codes to display (like JS scripts or CSS)
    Thanks
  • Thank you - putting [produkty] in column item restored the display.

    But finally the solution can't be used because I need to indicate the new page in WooCommerce settings as a products page to properly presenting on single product pages return icon to products page. And when I indicated the new page in Wooocommerce Muffin editor doesn't work.

    Do you have another idea how to put list of product katalog on product page only on mobile?

    Kind regards
  • You can use the shortcode in the Wordpress Editor, it should work fine.
    Thanks
  • But how to hide on desktop in the Wordpress Editor?
  • You want to set some elements from Wordpress Editor on desktop, right?
    Sadly, it will not be possible with solo shortcode.

    You would have to attach it on some <div> element and create a @media query rule for it.
    Thanks
  • Pablo,
    I want to put list of product categories on shop page but visible only on mobile. You recommended to make a new page and use muffin editor to put one block with the list and other with [products]. But this solution has other disadvantages (user will not return to this page from product page).

    So I asking is there any option to put list of product categories before products on shop page but only on mobile. I am looking for a better way of navigation in shop using categories. On desktop I have sidebar visible on the left side, but on mobile it's presented below list of products.   
  • You can use the [products] category attribute, see screenshot:

    If you would like to display it only on mobile, you can use the "response visibility" option in the sections settings.

    Thanks
Sign In or Register to comment.