- This topic has 7 replies, 3 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
November 2, 2020 at 7:20 am #1514437Ash
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 #1514815DavidStaffCustomer 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]
November 2, 2020 at 11:05 am #1515042AshThat just adds all categories though
November 2, 2020 at 2:31 pm #1515294TomLead 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-14November 3, 2020 at 2:28 am #1515735AshThe 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 #1516105DavidStaffCustomer 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; } }
November 4, 2020 at 2:42 am #1517341AshThanks 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 #1517476DavidStaffCustomer SupportYou can target them with this selector:
h2.woocommerce-loop-category__title { font-size: 20px; font-weight: bold; }
-
AuthorPosts
- You must be logged in to reply to this topic.