우커머스는 기본적으로 상품 페이지에서 상품에 해당하는 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 );
0개의 댓글