Sidebar widget before content (mobile)


#1

Hello,

Please, is there any way to move one widget from sidebar over products? I want my page (on mobile) to start with widget from sidebar, then page (products list) and then the rest of widgets.

Thank you


#2

Hello there,

To accomplish it, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {
      if ( matchMedia( 'only screen and (max-width: 991px)' ).matches ) {
        if( $('#secondary.widget-area').length ) {
          $('#secondary.widget-area').remove().clone().insertBefore($('#primary.content-area'));  
        }
      }
    });
  1. Update

Regards,
Kharis


#3

Please can we change this JS so it will only show 1st and 2nd show up and rest under?

Page is motostrbek.sk/obchod

Thank you


#4

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {

      #secondary.widget-area > .widget {
        display: none;  
      }

      #secondary.widget-area > .widget:nth-of-type(1),
      #secondary.widget-area > .widget:nth-of-type(2) {
        display: block;  
      }  
      
    }

Regards,
Kharis


#5

Thank you, this works, but it disables other widgets, is there any way that it would work as it is, but it would also show rest of my widgets under my products? Thank you


#6

Hello there,

Other widgets reside in the same room. Moving the rest ones requires a lot of code change that really out of the scope of support service we can offer here in the forum. For advanced coding works, you might want to hire a WordPress coder. You could see them at codeable.io or upwork.com.

Regards,
Kharis


#7

Okay thank you very much. I will use that css, you sent but I need some more help with it.

Can I somehow set it with id? Because order of widgets is changing thruout the page. Depends on whats showing.

I need to show these ids

woo_vpf_filter-3
woocommerce_product_search-3
yith_wc_category_accordion-3

class says:
widget woo_vpf_filter
widget woocommerce_product_search
widget yith_wc_category_accordion

Also one more question : Is it possible it would show these three on every page except id=796 and on id=796 would only show widget yith_wc_category_accordion?
Thank you