WooCommerce 단일 제품 페이지에 클래스를 추가하는 방법

Question

WooCommerce 단일 제품 페이지, 특히 제품 페이지의 "제품"div에 클래스를 추가하려고하지만 다른 요소도 후크와 필터를 사용하여 추가하려고합니다.

나는 PHP에 능숙하지 않고 프론트 엔드 개발자에 가깝지만 사용자 정의 Wordpress 테마에 맞게 WooCommerce 스타일을 지정하는 작업을 받았습니다.

functions.php파일을 통해 Wordpress의 body 요소에 클래스를 추가하기 전에 아래 코드를 사용했습니다 . WooCommerce 템플릿의 제품 페이지에서 "제품"div를 발견하고 이에 대한 필터를 복사했지만 작동하지 않는 것 같습니다.

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

이것을 달성하기 위해해야 ​​할 일에 대한 도움이나 조언은 대단히 감사하겠습니다. 지금은 JS로 클래스를 추가하고 있지만 그다지 좋은 생각은 아닙니다!

Answer 1

의 함수 는 최신 필터 후크 wc_get_product_class를 includes/wc-template-functions.php포함합니다.woocommerce_post_class

따라서 단일 제품 페이지 ( "제품"div)에 클래스 / 클래스를 추가하려면 다음을 사용할 수 있습니다.

/**
 * 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 );

---

참고 : 클래스 / 클래스는 단일 제품 페이지의 "루프"에 의해 생성 된 관련 제품에도 적용됩니다.

이를 방지하려면 다음을 사용하십시오.

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 );