우커머스 상품 CSS Class 와 Divi 테마빌더

우커머스는 기본적으로 상품 페이지에서 상품에 해당하는 CSS Class 를 제공하여 JS/CSS 에서 selector로 활용할 수 있게 해 줍니다.

플러그인들 중에서는 이를 이용하여 룰을 만들어 두는 경우가 종종 있는데요,

예를들어 Side Cart 와 같은 플러그인에서는 외부/연계 상품(External Product)에 대해서는 우회하기 위해서 ‘.post-type-external’ 의 css class 를 가진 경우를 확인하여 제외시키고 있습니다.

테마 빌더에서 개별 상품 Content  Body 를 포함하고있는 절 또는 행 하나의 고급 설정에 Class 이름에 ‘%wc_product_class%’ 를 추가해 두고, 아래 스니펫을 이용하면 해당 부분을 우커머스 상품 class 로 치환합니다.

add_filter( 'et_pb_module_shortcode_attributes', function($props, $attrs, $render_slug) {
    if ( strpos( $props['module_class'], '%wc_product_class%') === false ) {
        return $props;
    }
    $wc_class = '';
    if ( function_exists('is_product') && is_product() ) {
              $product = $GLOBALS['product'];
              if ( !$product && !empty($GLOBALS['post']) ) {
                  $product = wc_get_product($GLOBALS['post']->ID);
              }
              if ( is_a($product, 'WC_Product') ) {
                  $classes = [];
    		//$classes[] = 'product';
                  //$classes[] = 'product-type-external';
    		$wc_classes = wc_get_product_class('', $product);
    		$classes = array_merge($classes, $wc_classes);
    		$classes = array_filter( array_unique( $classes) );
    		$wc_class = implode( ' ', $classes );
              }
    }
    $props['module_class'] = str_replace( '%wc_product_class%', $wc_class, $props['module_class'] );

    return $props;
}, 10, 3 );