Customising the Category View

Hi Guys

I’d like to view both the Products and Subcategories when viewing a Category in the Shop. I have set this sample Category to BOTH. However the Products just seem to flow (flex) along with the Subcategories, I’d like to vertically seperate them.

I’ve been doing some custom css on the Subcategory items on this page. You can see the example in the private link.

I need the categories and the products to be separated, at the moment the products are simply sitting up with the subcategories and it looks odd. There needs to be some vertical separation.

The problem I’m finding is that it appears the DOM is simply appending the the products to the list of categories.

How can I separate them? What file would I need to edit so that I can make changes to the DOM output.

I’ve attached two images, before and after (what i want it to look like)

Attachments:

You must be logged in to view attached files.

Hi,

It is how the WooCommerce loop products and categories and there is no option to separate them. You can see that it works in the same way on default themes as well.

Kind Regards

Do you know where in the Woocommerce code the categories and products are being looped together?

Maybe this article will help you https://code.tutsplus.com/tutorials/display-woocommerce-categories-subcategories-and-products-in-separate-lists–cms-25479

That’s perfect! thanks for sending me that link!

Looks like someone has already asked for this feature to be added to the Theme. I’d like to second this. Could you please add this to the theme functionality?

https://xtemos.com/forums/topic/display-woocommerce-categories-subcategories-in-separate-list/

We will consider this feature request but can’t say when exactly it will be implemented.

Would like to join this feature request

[Author]

Posts