[Resolved] Subcategories Layout

[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.

[David]

Hi 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/

[Ash]

That just adds all categories though

[Tom]

Hi 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-14

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

[Ash]

The above function does the same as this but they made it into a plugin

https://code.tutsplus.com/tutorials/display-woocommerce-categories-subcategories-and-products-in-separate-lists–cms-25479

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

[David]

Try 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/

[Ash]

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?

[David]

You 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/

[Author]

Posts