limit product titles letters on upsell and related products.

You can use this CSS code with Oceanwp child Theam or using add CSS plugin.

/product title character limit product archive pages/
.woocommerce ul.products li.product li.title h2, .woocommerce ul.products li.product li.title a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-align: left; /you can remove this/
}

/product title character limit product widgets/
.woocommerce ul.product_list_widget li a{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.3; /you can remove this/
}

Hello @sapthaka,

This hook: woocommerce_product_upsells_title; is not available in WooCommerce and OceanWP and couldn’t find any solution with the function.

Perhaps you could change it to all products not in upsells only, via this function:

function custom_related_products_title_length( $title, $id ) {
	if ( get_post_type( $id ) !== 'product' ) {
		return $title;
	} else {
		return wp_trim_words( $title, 4, '...' );
	}
}
add_filter( 'the_title', 'custom_related_products_title_length', 10, 2 );

However, you can customize the theme, but it needs familiarity with PHP and woocommerce hooks; So, the solution to achieve it is customization. To do this, first, you need to use the child theme. You can copy the meta file from the partials folder in the child theme following the same path and then do necessary changes.

For more information about that, please follow the steps below:

By using FTP or cPanel access (if didn’t use the localhost), Go to this directory:
wp-content\themes\oceanwp\partials
Find your template which you want to customize and copy that template file(in your case, for example, you need to change the date on the blog page, so you need to use the blog template(s): https://i.postimg.cc/brv9gn9s/image.png).

Then head over to the same path on the child theme. There isn’t an entry folder as a default on your child theme, so you need to create a new one(one time).

Example: If you want to change the HTML tags structure in the single blog post featured image for standard post format, all you need in this step is the following:

1. Head over to your WP root > wp-content > themes > oceanwp > partials> single > media path.
2. Then, find the “blog-single.php” file and copy this file.
3. After that, go back to the themes folder (wp root > wp-content > themes) and go to the oceanwp-child-theme-master folder.
4. Create a new folder with the “partials” name in the child theme.
5. Go to the /partials/ folder and create a new folder with the “single” name.
6. Go to the /single/ folder and create a new folder with the “media” name.
7. Go to the /media/ folder and paste the “blog-single.php” file here.

* Please check this screenshot: https://i.postimg.cc/sxjYTWyt/image.png.
* Download child theme: https://docs.oceanwp.org/article/90-sample-child-theme

Note: It’s working with the /woocommerce/ folder or root of the theme files.

Best Regards

Hello @sapthaka,

I’m glad that you were able to resolve that.

Best Regards

Thank you so much @skalanter (Shahin). You helped me many times.

You’re most welcome, and I’m glad we could help.