wc_body_class() │ WC 1.0

Adds WooCommerce classes related to the current page to the <body> tag.

The function is automatically called on the body_class filter. Therefore, there is no need to use this function directly anywhere - everything is done through the body_class hook.

In addition to other classes, the function always adds the class woocommerce-no-js and triggers the wc_no_js() function in the footer, which in turn changes this class to woocommerce-js. Thus, WC determines whether JS is working in the browser.

No Hooks.

Returns

Array. Enhanced array of classes for the body tag.

Usage

wc_body_class( $classes );
$classes(array) (required)
Array of classes passed to the body_class hook.

Examples

0

#1 Add a body class of the product type for the product page 

add_filter( 'body_class', 'add_class_to_product_page' );

function add_class_to_product_page( $classes ){

	if ( is_product() ) {
		$product = wc_get_product();

		$classes[] = 'product-type-' . $product->get_type();
	}

	return $classes;
}

wc_body_class() code WC 10.3.6

woocommerce/includes/wc-template-functions.php 
function wc_body_class( $classes ) {

	global $wp;

	$classes = (array) $classes;

	if ( is_shop() ) {

		$classes[] = 'woocommerce-shop';

	}

	if ( is_woocommerce() ) {

		$classes[] = 'woocommerce';
		$classes[] = 'woocommerce-page';

	} elseif ( is_checkout() ) {

		$classes[] = 'woocommerce-checkout';
		$classes[] = 'woocommerce-page';

	} elseif ( is_cart() ) {

		$classes[] = 'woocommerce-cart';
		$classes[] = 'woocommerce-page';

	} elseif ( is_account_page() ) {

		$classes[] = 'woocommerce-account';
		$classes[] = 'woocommerce-page';

		$account_page_id = get_option( 'woocommerce_myaccount_page_id' );

		if ( ! empty( $account_page_id ) && ( get_post_field( 'post_name', $account_page_id ) === basename( $wp->request ) && is_user_logged_in() ) ) {
			$classes[] = 'woocommerce-dashboard';
		}
	}

	if ( is_store_notice_showing() ) {
		$classes[] = 'woocommerce-demo-store';
	}

	foreach ( WC()->query->get_query_vars() as $key => $value ) {
		if ( is_wc_endpoint_url( $key ) ) {
			$classes[] = 'woocommerce-' . sanitize_html_class( $key );
		}
	}

	if ( wp_is_block_theme() ) {

		$classes[] = 'woocommerce-uses-block-theme';

	}

	if ( wc_block_theme_has_styles_for_element( 'button' ) ) {

		$classes[] = 'woocommerce-block-theme-has-button-styles';

	}

	$classes[] = 'woocommerce-no-js';

	add_action( 'wp_footer', 'wc_no_js' );

	return array_unique( $classes );
}

CSS classes

WooCommerce