- This topic has 27 replies, 3 voices, and was last updated 1 year, 1 month ago by
Tom.
-
AuthorPosts
-
March 11, 2020 at 12:06 pm #1192206
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?Thanks in advance!!
March 11, 2020 at 1:38 pm #1192302Leo
StaffCustomer SupportHi 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/March 11, 2020 at 2:00 pm #1192315johnaps
vs live
Do you know how can we fix this?
March 11, 2020 at 4:20 pm #1192384Leo
StaffCustomer SupportCan 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/March 11, 2020 at 4:28 pm #1192392johnaps
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!!
March 11, 2020 at 4:32 pm #1192395Leo
StaffCustomer SupportAny 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/March 11, 2020 at 4:37 pm #1192399johnaps
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…March 11, 2020 at 4:51 pm #1192405Tom
Lead DeveloperLead DeveloperThe 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-developmentMarch 11, 2020 at 8:41 pm #1192461johnaps
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
March 12, 2020 at 4:36 am #1192707johnaps
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?March 12, 2020 at 8:19 am #1193034Tom
Lead DeveloperLead DeveloperI 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-developmentMarch 12, 2020 at 8:49 am #1193073johnaps
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…)
March 12, 2020 at 10:02 am #1193135johnaps
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…
March 12, 2020 at 6:50 pm #1193376Tom
Lead DeveloperLead DeveloperAre 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-developmentMarch 13, 2020 at 6:16 am #1193714johnaps
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 filtersThank you for your time and help, i dont have words for this really!
-
AuthorPosts
- You must be logged in to reply to this topic.