[Resolved] widgets css help

[johnaps]

Hello!
I am trying to add the built in woocommerce widgets in my site on category pages for filtering product results…

Problem is when i activate sidebar/content on sidebar layout in the prebuilt “1100px Content Container Width for Product Category Archive” hook of gp, then my whole page gets messed up… (in this hook i have set Content Width: 1269px)

I want to add some filtes to the left on the available space, and some on the right on the blank space as well…
But without breaking my current “geometry” of elements…
Can you help me out?

(live-site-alternative-link: https://sofianos-orthopedika.gr/%CE%BA%CE%B1%CF%84-%CE%BF%CE%AF%CE%BA%CE%BF%CE%BD-%CE%BD%CE%BF%CF%83%CE%B7%CE%BB%CE%B5%CE%AF%CE%B1/%CE%B2%CE%BF%CE%B7%CE%B8%CE%AE%CE%BC%CE%B1%CF%84%CE%B1-%CE%BA%CE%B1%CF%84%CE%AC%CE%BA%CE%BB%CE%B9%CF%83%CE%B7%CF%82/%CE%B1%CE%B5%CF%81%CF%8C%CF%83%CF%84%CF%81%CF%89%CE%BC%CE%B1/)

Thanks in advance!!

[Leo]

Hi there,

Using the Sidebar/Content/Sidebar layout would be your only choice I think.

Problem is when i activate sidebar/content on sidebar layout in the prebuilt “1100px Content Container Width for Product Category Archive” hook of gp, then my whole page gets messed up… (in this hook i have set Content Width: 1269px)

What’s messed when you do that? Can you activate it so I can see?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

ok. look here
https://staging-sofianosorthopedikagr.kinsta.cloud/%CE%BA%CE%B1%CF%84-%CE%BF%CE%AF%CE%BA%CE%BF%CE%BD-%CE%BD%CE%BF%CF%83%CE%B7%CE%BB%CE%B5%CE%AF%CE%B1/%CE%BD%CE%BF%CF%83%CE%BF%CE%BA%CE%BF%CE%BC%CE%B5%CE%B9%CE%B1%CE%BA%CE%AC-%CE%BA%CF%81%CE%B5%CE%B2%CE%AC%CF%84%CE%B9%CE%B1/%CE%BD%CE%BF%CF%83%CE%BF%CE%BA%CE%BF%CE%BC%CE%B5%CE%B9%CE%B1%CE%BA%CE%B1-%CE%BA%CF%81%CE%B5%CE%B2%CE%B1%CF%84%CE%B9%CE%B1/

vs live

https://sofianos-orthopedika.gr/%CE%BA%CE%B1%CF%84-%CE%BF%CE%AF%CE%BA%CE%BF%CE%BD-%CE%BD%CE%BF%CF%83%CE%B7%CE%BB%CE%B5%CE%AF%CE%B1/%CE%BD%CE%BF%CF%83%CE%BF%CE%BA%CE%BF%CE%BC%CE%B5%CE%B9%CE%B1%CE%BA%CE%AC-%CE%BA%CF%81%CE%B5%CE%B2%CE%AC%CF%84%CE%B9%CE%B1/%CE%BD%CE%BF%CF%83%CE%BF%CE%BA%CE%BF%CE%BC%CE%B5%CE%B9%CE%B1%CE%BA%CE%B1-%CE%BA%CF%81%CE%B5%CE%B2%CE%B1%CF%84%CE%B9%CE%B1/

Do you know how can we fix this?

[Leo]

Can you disable your caching plugin first so we can inspect the code properly?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

Caching is disabled on staging by default. I also disabled wp rocket for you, although it wouldnt cache anything already as kinsta disables caching of external plugins by default… You can look again now, thanks!!

[Leo]

Any chance you can temporarily comment out all your custom CSS?

And are you using a child theme? If so can you switch to a parent theme temprarily?

The source of code all showing up quite odd on your page.

Thank you.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

I am using child, all these breaking of css was caused when i activated sidebar/container/sidebar layout… i cant easily comment all custom css as it is quite a lot…
I dont know if it will help you, but i switched to gp default theme…

[Tom]

The main issue here is there isn’t enough room for 4 columns in that little content area.

The overflow issue you’re seeing is fixed in GPP 1.10. However, even the fix (if you add the below CSS) won’t look good, as there isn’t enough room:

.woocommerce .wc-columns-container.wc-columns-4 .products, 
.wc-related-upsell-columns-4 .related ul.products, 
.wc-related-upsell-columns-4 .up-sells ul.products {
    grid-template-columns: repeat(4,minmax(0, 1fr));
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[johnaps]

Hello Tom! Thank you for your input! Isnt there any workaround to this? I should have a way to implement these filters right? Maybe enlarging the containers width? Or changing the products grid to have 3 columns instead of 4? Can you think of anything that would make this possible? Thank you in advance! Fingers crossed

[johnaps]

I made the container full width and it is better now with the space…
I think the only option is to make the filters to open with a button in smaller media…
Can i “hide” filters to open behind a button in smaller media with css? Or shouldnt i try it at all?

[Tom]

I would personally just change the number of columns: Customize > Layout > WooCommerce

I’m not too sure what you mean regarding the filter button – can you explain a bit more?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[johnaps]

i mean like most sites, when you view prod category pages the filters are shown only if the user press a button… (sometimes they are off canvas, and sometimes they are drop down…)

[johnaps]

the above comment for filters to be shown in the click of a button only applies for mobile screens i mean…
I think i fixed it without changing columns to 3, i just used sidebar/content layout…

I would like to know though if it is possible to make filters show with a button on mobile screens and in tablet screens the filters get bellow products, i would like to make them go up top above products…

[Tom]

Are you wanting to do something like our Niche site in the library?: https://gpsites.co/niche/shop/

If so, it uses our Off Canvas Panel set to: On

Then you need to add a new Hook Element with this content:

<span class="slideout-toggle woo-filter-toggle hide-on-mobile"><a href="#">FILTER</a></span>

Set the hook to: woocommerce_before_shop_loop

You’ll also need to check “Execute PHP”.

Then set the Display Rules to `Product Archive” and “Product Category Archive”.

Now you’ll need some CSS:

.woo-filter-toggle {
    padding: 10px 0;
    margin-right: 20px;
    float: left;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 20px;
}

.woo-filter-toggle a {
    color: #000;
}

.main-navigation ul li.slideout-toggle {
    display: none !important;
}

.woo-filter-toggle a:before {
    padding-right: 2px;
    position: relative;
    top: 1px;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[johnaps]

Yes Tom!! This is exactly what i want!

I did everything you said, but there seems to be 3 problems that showed up.

1. the filters button disappears for smaller media bellow 768px
2. i would want for above 1150px to only show the filters on the left side bar with no filters button to be visible. And bellow 1150px to only show the filters button for the filters (with no filters on the sidebar to be shown)
3. and last problem because of my customization i guess the button right now opens my superfly menu and not the filters

Thank you for your time and help, i dont have words for this really!

[Author]

Posts