- This topic has 7 replies, 3 voices, and was last updated 4 months ago by
David.
-
AuthorPosts
-
November 2, 2020 at 7:20 am #1514437
Ash
I want to move subcategories before the product loop. I found the following
// remove the subcategories from the product loop remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' ); // add subcategories before the product loop add_action( 'woocommerce_before_shop_loop', 'show_product_subcategories', 10 ); function show_product_subcategories() { $subcategories = woocommerce_maybe_show_product_subcategories(); if ($subcategories) { echo '<ul class="subcategories">',$subcategories,'</ul>'; } }
This does the job removes it from the product loop and adds it before. But it loses all grid styling, any ideas please?
Thank you.
November 2, 2020 at 8:37 am #1514815David
StaffCustomer SupportHi there,
the simplest option would be to set your catalog to display just the products in Customizer > Woocmmerece
Then use a Hook to add back the categories using the Woo shortcode:
[product_categories]
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 2, 2020 at 11:05 am #1515042Ash
That just adds all categories though
November 2, 2020 at 2:31 pm #1515294Tom
Lead DeveloperLead DeveloperHi there,
This may be a better question for WooCommerce support – they may have a way to display sub-categories while retaining the product categories layout.
After a quick look, the
parent
shortcode attribute may help: https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-14Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 3, 2020 at 2:28 am #1515735Ash
The above function does the same as this but they made it into a plugin
And then enqueue a css file
ul.product-cats li { list-style: none; margin-left: 0; margin-bottom: 4.236em; text-align: center; position: relative; } ul.product-cats li img { margin: 0 auto; } @media screen and (min-width:768px) { ul.product-cats { margin-left: 0; clear: both; } ul.product-cats li { width: 29.4117647059%; float: left; margin-right: 5.8823529412%; } ul.product-cats li:nth-of-type(3) { margin-right: 0; } }
So I changed the functions ul class to
product-cats
for the css??// remove the subcategories from the product loop remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' ); // add subcategories before the product loop add_action( 'woocommerce_before_shop_loop', 'show_product_subcategories', 10 ); function show_product_subcategories() { $subcategories = woocommerce_maybe_show_product_subcategories(); if ($subcategories) { echo '<ul class="product-cats">',$subcategories,'</ul>'; } }
And then added the css, it’s centered text, removed list type, but still all one column.
There css was for storefront so just need some css for generatepress it to go 4 columns
November 3, 2020 at 7:45 am #1516105David
StaffCustomer SupportTry this CSS:
.woocommerce ul.product-cats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-gap: 20px; } .woocommerce ul.product-cats li { list-style-type: none; margin-left: 0; } @media (max-width: 768px) { .woocommerce ul.product-cats { -ms-grid-columns: 1fr 1fr; grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 1024px) and (min-width: 769px) { .woocommerce ul.product-cats { -ms-grid-columns: (1fr)[3] !important; grid-template-columns: repeat(3, 1fr) !important; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 4, 2020 at 2:42 am #1517341Ash
Thanks David looks much better, I changed it slightly as margin-left wouldnt work and I added text-align.
.woocommerce ul.product-cats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-gap: 30px; text-align: center; margin-left: 0; list-style-type: none; } @media (max-width: 768px) { .woocommerce ul.product-cats { -ms-grid-columns: 1fr 1fr; grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 1024px) and (min-width: 769px) { .woocommerce ul.product-cats { -ms-grid-columns: (1fr)[3] !important; grid-template-columns: repeat(3, 1fr) !important; } }
Subcategories titles are using h2, how can I change the size/weight without affecting h2 site wide?
November 4, 2020 at 4:54 am #1517476David
StaffCustomer SupportYou can target them with this selector:
h2.woocommerce-loop-category__title { font-size: 20px; font-weight: bold; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.