Return to previous page

Add Titles to shop page before category and product sections

This topic has 8 replies, 3 voices, and was last updated 9 months, 1 weeks ago ago by Andrew Mitchell

Gbp

Participant

January 29, 2024 at 10:41

Hi, I am looking for the WooCommerce hook to display a title before the category list and the product list in the shop page.
actually, into the xstore options, I chosed to display category and products but the UX is not clear.
so I want to add a title to do like :
title : CATEGORY
list of categories
margin –
title : products
list of products.

thank you

#381486 Copied Theme version: 9.2.6 WooCommerce version: last

7 Answers
Luca Rossi

Support staff

January 29, 2024 at 14:46
Dear @Gbp,

We hope this message finds you well.

To ensure that both categories and products are displayed on your shop page, kindly follow the steps outlined below:

1. Access the ‘Theme Options’ panel.
2. Navigate to ‘WooCommerce (shop)’ and then to ‘Product Catalog’.
3. Within the ‘Product Catalog’ settings, please select ‘Show categories & products’.
4. Proceed to ‘Categories Appearance’ and choose ‘Apart from products’.

For your reference, here are screenshots illustrating the aforementioned settings:
– [Screenshot 1](https://prnt.sc/MM0uObOQOugi)
– [Screenshot 2](https://prnt.sc/McVhiLcOsfsK)

Additionally, to display headlines for Category and Product sections before the respective items, please insert the following code snippet into your theme’s functions.php file or a custom plugin:
```
add_action('etheme_before_product_loop_start', 'n2t_woocommerce_before_shop_loop', 999);
function n2t_woocommerce_before_shop_loop(){
	echo '<h2 class="custom-category-headline">Categories</h2>';
}

add_filter('woocommerce_after_output_product_categories', 'n2t_woocommerce_after_output_product_categories', 999);
function n2t_woocommerce_after_output_product_categories($value){
	if ( wc_get_loop_prop( 'is_shortcode' ) && ! WC_Template_Loader::in_content_filter() ) {
		return $value;
	}
	if ( get_option( 'woocommerce_shop_page_categories_appearance', '' ) ) {
		if ( woocommerce_get_loop_display_mode() == 'both' ) {
			return '<div class="etheme-woocommerce-categories-products-separator"></div><h2 class="custom-category-headline">Products</h2>';
		}
	}

	return $value;
}
```
We trust that the above instructions will be of assistance to you. Should you require any further support, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#381525 Copied
Gbp

Participant

January 30, 2024 at 09:49

Hi thank you !
It is working but not completely correctly.
the H2 with products is not displayed correctly,
it is not making the correct separation.
Thank you for checking and helping
best

Please contact administrator
for this information.

#381726 Copied
Luca Rossi

Support staff

January 30, 2024 at 10:35
Hi @Gbp,

We’ve changed your custom CSS codes to this:
```
.custom-category-headline {
    margin: 40px 0;
    text-align: center;
    width: 100%;
}
```
Now everything looks good.

Best regards,
The 8Theme Team
#381733 Copied
Gbp

Participant

January 30, 2024 at 11:39

Awesome ! thank you !
going to add the border to the 1st raw of the product, because it is not displayed.

best.

#381738 Copied

Luca Rossi

Support staff

January 31, 2024 at 07:10

Hi @Gbp,

We’ve updated the custom CSS codes per your request:

https://prnt.sc/dT6EVZUtfOYu

Best regards,
The 8Theme Team

#381870 Copied

Gbp

Participant

February 14, 2024 at 13:21

Awesome,
thanks

#383345 Copied

Andrew Mitchell

Support staff

February 14, 2024 at 13:21

Dear Gbp,

Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?

Click here to share your insights: https://themeforest.net/downloads

Your support fuels our journey, and we appreciate it more than words can express.

Best Regards,
The 8Theme Team

#383346 Copied
Tagged: add titles, category sections, enhance woocommerce, product sections, shop page, woocommerce themes, wordpress
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Add Titles to shop page before category and product sections’' has been successfully resolved, and the topic is now closed for further responses

Add Titles to shop page before category and product sections

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection