(to reproduce that page, add some products and categories to woocommerce, then in woocommerce settings->products choose “Show Both” for “Shop Page Display” and for “Default Category Display”)
I have found my little dirty solution, but it breaks something in the page styling and it is not well formatted.
The original resulting html that woocommerce produces is like this:
<ul class="products">
<li class="product-category product first">category title</li>
<li class="product-category product">category title</li>
<li class="product-category product">category title</li>
<li class="product-category product">category title</li>
<li class="post-2882 product type-product status-publish has-post-thumbnail last shipping-taxable purchasable product-type-simple instock">product title</li>
<li class="post-2942 product type-product status-publish has-post-thumbnail first shipping-taxable purchasable product-type-simple product-cat-due product-cat-sotto instock">product title</li>
<li class="post-2943 product type-product status-publish has-post-thumbnail shipping-taxable purchasable product-type-simple product-cat-due instock">product title</li>
<li class="post-2944 product type-product status-publish has-post-thumbnail shipping-taxable purchasable product-type-simple product-cat-due product-cat-quattro product-cat-tre product-cat-uno instock">product title</li>
</ul>
As you can see, everything is wrapped between ul!
So I have edited the file woocommerce/includes/wc-template-functions.php and where is the code:
if ( $product_categories ) {
foreach ( $product_categories as $category ) {
if ( $category->parent != $parent_id ) {
continue;
}
if ( $args['hide_empty'] && $category->count == 0 ) {
continue;
}
if ( ! $product_category_found ) {
// We found a category
$product_category_found = true;
echo $before;
}
wc_get_template( 'content-product_cat.php', array(
'category' => $category
) );
}
}
I have added two lines (one after the first “echo” and one at the end):
if ( $product_categories ) {
foreach ( $product_categories as $category ) {
if ( $category->parent != $parent_id ) {
continue;
}
if ( $args['hide_empty'] && $category->count == 0 ) {
continue;
}
if ( ! $product_category_found ) {
// We found a category
$product_category_found = true;
echo $before;
echo '<h1>Categories</h1>';
}
wc_get_template( 'content-product_cat.php', array(
'category' => $category
) );
}
}
echo '</ul><hr><h1>Products</h1><ul class="products">';
In this way I can have a title before categories and before products with a line break that separates them. But the resulting html is not properly formatted because it results:
<ul class="products">
<h1>Categories</h1>
<li class="product-category product first">category title</li>
<li class="product-category product">category title</li>
<li class="product-category product">category title</li>
<li class="product-category product">category title</li>
</ul>
<hr>
<h1>Prodotti</h1>
<ul class="products">
<li class="post-2882 product type-product status-publish has-post-thumbnail last shipping-taxable purchasable product-type-simple instock">product title</li>
<li class="post-2942 product type-product status-publish has-post-thumbnail first shipping-taxable purchasable product-type-simple product-cat-due product-cat-sotto instock">product title</li>
<li class="post-2943 product type-product status-publish has-post-thumbnail shipping-taxable purchasable product-type-simple product-cat-due instock">product title</li>
<li class="post-2944 product type-product status-publish has-post-thumbnail shipping-taxable purchasable product-type-simple product-cat-due product-cat-quattro product-cat-tre product-cat-uno instock">product title</li>
</ul>
Where h1 tag is inside ul tag! Besides when the page hasn’t categories to show, the html results like this:
<ul class="products"> </ul>
<hr>
<h1>Prodotucts</h1>
<ul class="products">
<li class="post-2944 product type-product status-publish has-post-thumbnail first shipping-taxable purchasable product-type-simple product-cat-due product-cat-quattro product-cat-tre product-cat-uno instock">product title</li>
And then every time I update woocommerce plugin I have to modify the file.
Any suggestion?