Archived topic
Woocommerce category list different to product list
7 replies · Started by David on February 22, 2022
Hello
Is it possible to change the view so it's different on woocommerce when your'e viewing categories, too when your'e viewing a product list.
Here I have a 3 column category list, which I'm happy with...
https://www.zepfdentalinstruments.co.uk/product-category/02-diagnostics/
Password is : zepf123 to view the site.
And when they click through a category I would like to change the product view so it's only 1 column rather than 3.
https://www.zepfdentalinstruments.co.uk/product-category/03-parodontology/0306-knives-hoes-chisels/
Also I need to change the styling so the title isn't on a grey background, but I can't see anything different in the css, to be able to separate them.
Thanks
Dave
Hi Dave,
I believe this filter is what you are looking for:
https://docs.generatepress.com/article/option_generate_woocommerce_settings/#options-%E2%80%98columns%E2%80%99
See example:
https://docs.generatepress.com/article/option_generate_woocommerce_settings/#example
Thanks Leo, Is there an easier way to do this? I would have to list so many categories, doing it this way, plus if a new category is added, it won't use the 1 column unless I add it to the functions.
Basically it needs to use 1 column if the category is showing products and 3 columns if the category is showing sub categories.
Thanks
Dave
Hi Dave,
That's going to require a significant amount of customization.
While we can just do a foreach loop, querying for category term, it will be a nightmare for the database.
Example: if you have 40 category terms, that means there will be 40 queries. The server might struggle with this.
Consider hiring a third-party developer as this will require some heavy programming as there are things to really consider like "if the site eventually has 10 or more categories, do we AJAX the other category term queries so the first load doesn't get too heavy?"
This needs planning w/ a dev. :)
Ok thanks, I'll keep it with 3 columns for now then. How can I add a style, so I can change the background color to white on the products boxes though, but keep it dark on categories.
https://www.zepfdentalinstruments.co.uk/product-category/02-diagnostics/
https://www.zepfdentalinstruments.co.uk/product-category/03-parodontology/0306-knives-hoes-chisels/
Hi there,
you have this CSS that adds the background color:
#wc-column-container .product {
border: 1px solid #e3e3e3;
background: #323232;
}
Change it to:
#wc-column-container .product-category {
border: 1px solid #e3e3e3;
background: #323232;
}
Thanks David
You're welcome