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