Loading overlay covers entire page

  • Resolved theotheo

    (@theotheo)


    3 years, 5 months ago

    When product filters is in loading state a semi transparent overlay covers the entire page with a loader in the middle.

    As you understand and as you may have noticed from other product filtering options in other sites this is not suitable for every design and personal preferences.

    Basically what i want to do is to only have a certain div (woocommerce product loop) covered with that loading overlay and not the entire page. Is there any way i can do this?

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Dmytro Holovnia

    (@dholovnia)

    Hi,

    We had loading overlay covering products only in prev version. It shows average results. Full page is much better. You can change it with custom Javascript and CSS. We don’t have option to make it above products only.

    Regards,
    Dima

    Thread Starter theotheo

    (@theotheo)

    Is there any way you can provide me the javascript and css needed for this (which you probably used in the previous version) or if this is time consuming for you…can you tell me which version of the plugin had overlay over products so that i can search through the plugin’s code and find the solution.

    Thank you!

    Plugin Author Dmytro Holovnia

    (@dholovnia)

    Hi,

    Code structure was changed so old code will not help a lot.

    We are not providing custom code.

    Regards,
    Dima

    Thread Starter theotheo

    (@theotheo)

    Ok, can i have a look? What version was it ?

    Also a recommendation:
    The reason full page overlay is frustrating for me is because every time you select a filter it covers the entire page and you have to wait to select the next filter…

    When disabled which i have done you can select filters one after an other without waiting each time you click on a filter.

    What i would suggest is give an option to users whether they want full page, specific div or disabled loading overlay.

    • This reply was modified 3 years, 4 months ago by theotheo.
    Thread Starter theotheo

    (@theotheo)

    I resolved this on my own using the before/after update options within the plugin under javascript/css.

    Before update:
    jQuery(“ul.products”).addClass(“filters-loading”);

    After update:
    jQuery(“ul.products”).removeClass(“filters-loading”);

    // You can add your class to any div on your page (i used ul.products).
    After having this done you can style .filters-loading class with css.
    Example:
    .filters-loading{
    opacity: 0.7;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Loading overlay covers entire page’ is closed to new replies.