Archived topic
Move a Woocommerce Filter to Top of Mobile View
33 replies · Started by troyw on February 5, 2023
I have added this, but still nothing?
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.
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?
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');
}
}
#menu-menu {
display: flex;
align-items: center;
This one has a missing closing bracket. Add a }.
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
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;
}
}
Hey Fernando, that seems to have worked, thank you.
You're welcome, 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;
}
}`
If you remove this, does it relatively improve your site's performance?
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?
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.
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?
What performance scores are you getting? I'm getting great scores upon testing your site: https://share.getcloudapp.com/7Kuz0OAv