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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.