우커머스 외부 상품 링크를 새 창에서 열기
워드프레스 우커머스 쇼핑몰에서 외부 상품/연계 상품을 등록할 수 있습니다. 하지만 외부 상품 링크를 클릭하면 같은 창에서 열리기 때문에 방문자가 사이트를 이탈하게 됩니다. 이탈률을 줄이기 위해 우커머스 외부 상품 링크를 새 창에서 열리도록 하고 싶은 경우 플러그인을 사용하거나 커스텀 코드를 사용할 수 있습니다.
[ 이 글은 2023년 3월 10일에 최종 업데이트되었습니다. ]
우커머스 외부 상품 링크를 새 창에서 열기
우커머스 쇼핑몰에서 상품을 외부/연계 상품으로 설정하여 외부 상품을 등록할 수 있습니다.
외부/연계 상품을 구성할 때 버튼 텍스트를 지정할 수 있고(예: '상품 구매하기', '최저가 상품 보기') 버튼을 클릭했을 때 이동할 외부 상품 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() ) {
// 코드
}부록: 커스텀 코드 업데이트
코드 방식으로 하는 경우 위에 제시된 코드가 작동하지 않는다고 하는 분이 계셔서 자바스크립트로 코드를 직접 만들어 보았습니다. 플랫섬(Flatsome) 테마에서 테스트했습니다. 다른 테마에서도 잘 작동할 것입니다.
// Updated code for opening an external product link in a new tab in WooCommerce product pages
const buyButton = document.querySelector('.single_add_to_cart_button');
buyButton.addEventListener('click', function(event) {
event.preventDefault(); // prevent the default form submission
const form = buyButton.closest('form');
window.open(form.getAttribute('action'), '_blank'); // open link in new tab
});위의 코드를 WPCode와 같은 플러그인을 사용하여 푸터 영역에 추가하거나, 테마 함수 파일에 다음과 같은 코드를 추가할 수도 있을 것입니다.
function addCustomScript(){
?>
<script>
// 상기 코드
</script>
<?php
}
add_action('wp_footer', 'addCustomScript');