12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Apr 9, 2020

How to modify or add classes to WooCommerce product titles

Sridhar Katakam

Oxygen’s Products List uses [products] shortcode for outputting WooCommerce products.

The default class for the titles of these products is woocommerce-loop-product__title.

Sample HTML output:

<h2 class="woocommerce-loop-product__title">V-Neck T-Shirt</h2>

If you are looking to replace this with a different class name, add the following in a Code Snippet:

add_filter( 'woocommerce_product_loop_title_classes', 'custom_woocommerce_product_loop_title_classes' );
/**
 * Replace default WooCommerce product title class with a custom one.
 *
 * @param string $class Existing class(es).
 * @return string Modified class(es).
 */
function custom_woocommerce_product_loop_title_classes( $class ) {
	return 'new-class'; // set your desired class here.
}

Sample HTML output:

<h2 class="new-class">V-Neck T-Shirt</h2>

If you are looking to instead add your own class(es) to the default class, use this code snippet:

add_filter( 'woocommerce_product_loop_title_classes', 'custom_woocommerce_product_loop_title_classes' );
/**
 * Append custom class(es) to the default WooCommerce product title class.
 *
 * @param string $class Existing class(es).
 * @return string Modified class(es).
 */
function custom_woocommerce_product_loop_title_classes( $class ) {
	return $class . ' new-class and-another'; // set your additional class(es) here.
}

Sample HTML output:

<h2 class="woocommerce-loop-product__title new-class and-another">V-Neck T-Shirt</h2>

References

/wp-content/plugins/woocommerce/templates/content-product.php

/wp-content/plugins/woocommerce/includes/wc-template-functions.php

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right