[Support request] Move a Woocommerce Filter to Top of Mobile View

[troyw]

I have added this, but still nothing?

[Fernando]

There are Syntax errors in a couple of lines in your Additional CSS.

You can check your entire code here: https://codebeautify.org/

You’ll need to fix those first.

[troyw]

Hey,
I have clean some of the CSS up, but if I remove some of the lines it suggests, it breaks the edits. I have however tried removing them, but still the Side bar does not appear at the top. The only questionable CSS left is this, but even if i remove it, the Side Bar don’t move?

.inside-navigation .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon {
    order: 2;
    margin: 0;
    width: auto;
    line-height: 55px;
    padding: 0 5px;
}
@media(max-width:768px){
.page-hero {
    background-position-x: 70%;
}
}

It is showing a couple of errors in the CSS you provided, but I have left these obviously.

Not sure what line is causing an issue as I have checked them now?

Any ideas?

[troyw]

There was also some CSS in the Style Sheet which I removed and tested, but still the Left Side panel does not move;

array(
      'show_top_links' => 'true',
      'show_empty_brands' => 'false'
 )
add_action('wp_enqueue_scripts', 'disable_woocommerce_loading_css_js' );

function disable_woocommerce_loading_css_js() {
	if(! is_cart() && ! is_checkout() ) { 				
		wp_dequeue_style('wc-gateway-ppec-frontend'); 

	}
}
add_action('wp_enqueue_scripts', 'disable_woocommerce_loading_css_js', 99 );

function disable_woocommerce_loading_css_js() {
        if(! is_cart() && ! is_checkout() ) {
                wp_dequeue_style('wc-zipmoney-payment-front');
                wp_deregister_script('zipmoney-checkout-sdk');
        }
}

[Fernando]

#menu-menu {
  display: flex;
  align-items: center;

This one has a missing closing bracket. Add a }.

[troyw]

Wow, one little bracket! Thanks Fernando.
How would I now hide the Newsletter Sign up and Social Media widgets and show the Categories instead, in this mobile view?
Thanks

[Fernando]

Try this code instead:

@media (max-width: 768px) {
    .archive div#content {
        display: flex;
        flex-direction: column;
    }

    .archive div#left-sidebar {
        order: -1;
    }

    .archive aside:is(.widget_product_categories, .dgwt-wcas-widget, #text-5, .widget_lsi_widget) {
        display: none;
    }
}

[troyw]

Hey Fernando, that seems to have worked, thank you.

[Fernando]

You’re welcome, Troyw!

[troyw]

Hey Fernando,
Sorry to drag this one back into the limelight.

I am having lots of issues with site performance at the moment, so I am going through all the recent CSS added, to identify issues. While the CSS above resolved the issue, when I check it in https://codebeautify.org/ I get 4 warnings and 3 errors. I have messed around with the CSS in Code Beautify but cannot seem to eliminate these errors. Any ideas how to fix this?

Thanks
`@media (max-width: 768px) {
.archive div#content {
display: flex;
flex-direction: column;
}

.archive div#left-sidebar {
order: -1;
}

.archive aside:is(.widget_product_categories, .dgwt-wcas-widget, #text-5, .widget_lsi_widget) {
display: none;
}
}`

[Fernando]

If you remove this, does it relatively improve your site’s performance?

[troyw]

Hey Fernando,
I’m not noticing any major improvement to the performance without it, but I believe there is some CSS causing my performance issues. As such I am systematically trying to clean up the CSS in the hope I identify the culprit. All the other Additional CSS is clean and without errors.

I’ve tried creating a new Child Theme Style sheet and placed some CSS in there instead of the Simple CSS plugin, but it hasn’t helped. I still can’t seem to identify what is slowing the website down so much lately?

[Fernando]

I tried testing your site and the main issue is your server’s response time. It would be best to reach out to your Hosting Provider regarding this.

I would also recommend using a CDN to improve the speed of the delivery of your site’s resources.

[troyw]

Hey Fernando,
I already talked to the hosting provider who blamed my CSS.
This site already uses Cloudflare CDN. I did this over a year ago.

Do you think increasing the server resources will improve things, its already getting 400% CPU and 8Gb of Memory?

[Fernando]

What performance scores are you getting? I’m getting great scores upon testing your site: https://share.getcloudapp.com/7Kuz0OAv

[Author]

Posts