베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

우커머스 외부 상품 링크를 새 창에서 열기

Last Updated: 2021년 10월 28일 | 댓글 남기기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스 우커머스 쇼핑몰에서 외부 상품/연계 상품을 등록할 수 있습니다. 하지만 외부 상품 링크를 클릭하면 같은 창에서 열리기 때문에 방문자가 사이트를 이탈하게 됩니다. 이탈률을 줄이기 위해 우커머스 외부 상품 링크를 새 창에서 열리도록 하고 싶은 경우 플러그인을 사용하거나 커스텀 코드를 사용할 수 있습니다.

우커머스 외부 상품 링크를 새 창에서 열기

우커머스 쇼핑몰에서 상품을 외부/연계 상품으로 설정하여 외부 상품을 등록할 수 있습니다.

우커머스 외부 상품 링크를 새 창에서 열기
우커머스 외부 상품 예시.

외부/연계 상품을 구성할 때 버튼 텍스트를 지정할 수 있고(예: '상품 구매하기', '최저가 상품 보기') 버튼을 클릭했을 때 이동할 외부 상품 URL을 입력할 수 있습니다.

아마존 상품, 쿠팡 상품, 스마트 스토어 상품 등을 우커머스 쇼핑몰에 외부/연계 상품으로 등록할 수 있습니다. 자세한 방법은 "워드프레스 우커머스에서 외부 상품/연계 상품 추가하기 (아마존, 쿠팡 상품 소개)"를 참고해보세요.

그러나 버튼을 클릭하면 브라우저의 새 창이나 새 탭에서 상품 페이지가 열리는 것이 아니라 동일한 창에서 열립니다. 이 때문에 방문자들이 상품 구매하기 버튼을 클릭하여 사이트를 이탈하게 되어 이탈률이 증가할 수 있습니다.

이탈률 증가는 SEO(검색엔진최적화)에 불리하게 작용할 수 있으므로 외부 상품을 새 창/새 탭에서 열리도록 하는 것을 고려할 수 있습니다.

플러그인을 사용하여 외부 상품을 새 탭에서 열기

WooCommerce External Product New Tab 플러그인

우커머스 외부 상품 링크를 새 창/새 탭에서 열도록 하는 워드프레스 플러그인

쉬운 방법으로 WooCommerce External Product New Tab(우커머스 외부 상품 새 탭)이라는 무료 플러그인을 사용할 수 있습니다.

이 플러그인은 우커머스 사이트의 모든 외부/연계 상품 구입하기 버튼 링크를 웹 브라우저의 새 탭에서 열리도록 합니다.

이 플러그인은 별도의 설정 페이지가 없으며, 설치하여 활성화하면 자동으로 작동합니다.

WooCommerce Improved External Products 플러그인

비슷한 기능의 다른 플러그인으로 WooCommerce Improved External Products가 있습니다. 이 플러그인은 WooCommerce External Product New Tab보다 사용자 수가 적은 편이고 평가도 그리 좋지 않습니다. WooCommerce External Product New Tab 플러그인이 작동하지 않을 경우 이 플러그인을 설치하여 테스트해볼 수 있습니다.

커스텀 코드를 사용하여 외부 상품을 새 창에서 열기

플러그인 사용은 최소화하는 것이 바람직합니다. 이런 기능 때문에 굳이 플러그인까지는 사용할 필요가 없을 것 같습니다.

다음과 같은 코드를 차일드 테마(자식 테마)의 함수 파일(functions.php)에 추가하여 외부 상품을 새 창/새 탭에서 열리도록 할 수 있습니다.

function woocommerce_external_add_to_cart() {
   global $product;
   if ( ! $product->add_to_cart_url() ) return;
   echo '<p><a href="' . $product->add_to_cart_url() . '" class="single_add_to_cart_button button alt" target="_blank">' . $product->single_add_to_cart_text() . '</a></p>';
}
// 출처: https://www.businessbloomer.com/woocommerce-open-external-product-link-in-new-tab/

위의 코드가 단순하지만 제대로 작동하지 않을 경우 다음과 같은 코드로도 테스트해보시기 바랍니다.

// This will take care of the Buy Product button below the external product on the Shop page.
// 다음은 상점 페이지에서 외부 상품 아래에 상품 구매하기 버튼을 처리합니다.

 add_filter( 'woocommerce_loop_add_to_cart_link',  'ts_external_add_product_link' , 10, 2 );

// Remove the default WooCommerce external product Buy Product button on the individual Product page.
// 개별 상품 페이지에서 우커머스 외부 상품의 기본 상품 구매하기 버튼을 제거합니다.

 remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
  // Add the open in a new browser tab WooCommerce external product Buy Product button.
 add_action( 'woocommerce_external_add_to_cart', 'ts_external_add_to_cart', 30 );
 
function ts_external_add_product_link( $link ) {
          global $product;
          if ( $product->is_type( 'external' ) ) {
                    $link = sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s" target="_blank">%s</a>',
                    esc_url( $product->add_to_cart_url() ),
                    esc_attr( isset( $quantity ) ? $quantity : 1 ),
                    esc_attr( $product->id ),
                    esc_attr( $product->get_sku() ),
                    esc_attr( isset( $class ) ? $class : 'button product_type_external' ),
                    esc_html( $product->add_to_cart_text() )
                    );
          }
          return $link;
 }
function ts_external_add_to_cart() {
                    global $product;
                    if ( ! $product->add_to_cart_url() ) {
                    return;
                    }
                    $product_url = $product->add_to_cart_url();
                    $button_text = $product->single_add_to_cart_text();
/**
 *  The code below outputs the edited button with target="_blank" added to the html markup.
 * 아래의 코드는 target="_blank로 수정된 버튼을 html 마크업에 추가하여 출력합니다.
 */
                    do_action( 'woocommerce_before_add_to_cart_button' ); ?>
                    <p class="cart">
                    <a href="<?php echo esc_url( $product_url ); ?>" rel="nofollow" class="single_add_to_cart_button                                                           button alt" target="_blank">  
                    <?php echo esc_html($button_text ); ?></a>
                    </p>
                    <?php do_action( 'woocommerce_after_add_to_cart_button' );
 }

// 출처: https://www.tychesoftwares.com/how-to-make-woocommerce-external-product-links-open-in-a-new-tab/

위의 방법이 잘 작동하지 않을 경우 다음과 같은 코드로도 테스트해볼 수 있습니다. 다음 코드는 오래되었기 때문에 잘 작동하지 않을 가능성이 높지만 시도는 해볼 수 있을 것입니다.

function ns_open_in_new_tab($args, $product) 
{
    if( $product->is_type('external') ) {
        // Inject target="_blank" into the attributes array
        $args['attributes']['target'] = '_blank';
    }    

    return $args;
}
add_filter( 'woocommerce_loop_add_to_cart_args', 'ns_open_in_new_tab', 10, 2 );

// 출처: https://stackoverflow.com/questions/37801817/open-external-woocommerce-products-in-new-tabs-adding-attribute-target-blank

다음은 워드프레스 엔폴드 (Enfold) 테마에서 제시하는 코드입니다. 엔폴드 테마를 사용하는 경우 아래 코드를 차일드 테마 함수 파일의 맨 아래에 추가하여 작동하는지 테스트해 보세요.

// Open external product links in a new tab or a new browser in Enfold WordPress theme

function addCustomScript(){
?>
<script>
function a() {
jQuery('.products.columns-4 .button.product_type_external').attr('target', '_blank');
}

jQuery(window).load(function() {
a();
});
</script>
<?php
}
add_action('wp_footer', 'addCustomScript');

위의 코드를 다른 테마에서도 응용할 수 있을 것 같습니다. 다만, 위의 코드를 추가하면 사이트의 모든 페이지에서 jQuery 스크립트를 로드하므로 사이트 속도에는 약간의 영향을 미칠 수 있습니다. 상점 페이지와 상품 페이지에서만 로드되도록 조건문을 추가하는 것을 고려해볼 수 있습니다.

if ( is_product() || is_shop() ) {
// 코드
}

참고



댓글 남기기

Leave a Comment