CODEWITHSUNDEEP
csswordpresswoocommerceproducthook-woocommerce
David Clarke
David Clarke

Reputation: 83

How to add classes to WooCommerce single product pages

I'm trying to add classes to the WooCommerce single product pages, specifically the "product" div on the product page, but other elements too - using hooks and filters.

I'm not great with PHP, I'm more of a front-end developer, but I've been tasked with styling WooCommerce to fit in with a custom Wordpress theme.

I've used the below code before to add classes to the body element in Wordpress through the functions.php file. I found the "product" div on the product page in the WooCommerce templates and copied the filter for this, but it doesn't seem to work.

add_filter( 'wc_product_class','my_product_class' );
function my_product_class( $classes ) {
    $classes[] = 'my-product-class';         
    return $classes; 
}

Any help or pointers to what I should be doing to achieve this would be very much appreciated. I'm adding classes with JS for now, but that's probably not a great idea!

Upvotes: 4

Views: 6719

Answers (1)

7uc1f3r
7uc1f3r

Reputation: 29650

The function wc_get_product_class from includes/wc-template-functions.php contains the newer woocommerce_post_class filter hook

So to add a class/classes on the single product page (The "product" div) you could use:

/**
 * WooCommerce Post Class filter.
 *
 * @since 3.6.2
 * @param array      $classes Array of CSS classes.
 * @param WC_Product $product Product object.
 */
function filter_woocommerce_post_class( $classes, $product ) {
    // is_product() - Returns true on a single product page
    // NOT single product page, so return
    if ( ! is_product() ) return $classes;
    
    // Add new class
    $classes[] = 'my-product-class';
    
    return $classes;
}
add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

Note: the class/classes will also be applied to the related products, generated by a "loop" on the single product page.

To prevent this, use:

function filter_woocommerce_post_class( $classes, $product ) {
    global $woocommerce_loop;
    
    // is_product() - Returns true on a single product page
    // NOT single product page, so return
    if ( ! is_product() ) return $classes;
    
    // The related products section, so return
    if ( $woocommerce_loop['name'] == 'related' ) return $classes;
    
    // Add new class
    $classes[] = 'my-product-class';
    
    return $classes;
}
add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

Upvotes: 10

Related Questions