WordPress WooCommerce ショッピングモールでは、外部の商品/連携商品を登録することができます。 しかし、外部の商品のリンクをクリックすると、同じウィンドウで開くので、訪問者がサイトを離脱することになります。 直帰率を減らすために WooCommerce 外部商品リンクを新しいウィンドウで開くようにしたい場合、プラグインを使用したり、カスタムコードを使用することができます。
[この記事は2023年3月10日に最終更新されました。 ]
WooCommerce 外部商品リンクを新しいウィンドウで開く
WooCommerce ショッピングモールで商品を外部/連携商品に設定して、外部の商品を登録することができます。
外部/連携商品を設定するときにボタンテキストを指定できます（たとえば、「商品を購入する」、「最低価格を見る」）、ボタンをクリックしたときに移動する外部商品のURLを入力できます。
アマゾンの商品、クパン商品、スマートストア商品などを WooCommerce ショッピングモールに外部/連携商品として登録できます。 詳しくは、「WordPress WooCommerceで、外部の商品/連携商品を追加する（アマゾン、クパン商品紹介）「を参考にしてください。
しかし、ボタンをクリックすると、ブラウザの新しいウィンドウまたは新しいタブで商品ページが開かれるのではなく、同じウィンドウで開きます。 このため、訪問者が商品を購入するボタンをクリックしてサイトを離脱するようになっ直帰率が増加することができます。
直帰率の増加は、SEO（検索エンジン最適化）に不利に作用することができるので、外部の商品を新しいウィンドウ/新しいタブで開くようにすることを検討することができます。
プラグインを使用して、外部の商品を新しいタブで開く
WooCommerce External Product New Tabプラグイン
簡単な方法で WooCommerce External Product New Tab(WooCommerce 外部商品の新しいタブ）という無料のプラグインを使用することができます。
このプラグインは、 WooCommerce サイトのすべての外部/連携で商品を購入するボタンのリンクを、Webブラウザの新しいタブで開くようにします。
このプラグインは、別の設定ページがなく、設置して有効にすると、自動的に動作します。
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.
// 개별 상품 페이지에서 WooCommerce 외부 상품의 기본 상품 구매하기 버튼을 제거합니다.
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次は、 WordPress Enfold (Enfold）テーマで提示するコードです。 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() ) {
// 코드
}付録：カスタムコードの更新
コード方式の場合、上記のコードが機能しないという方がいらっしゃってJavaScriptでコードを直接作成してみました。 フラットサム(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
});上記のコードを WPコードなどのプラグインを使用してフッタ領域に追加したり、テーマ関数ファイルに次のコードを追加したりできます。
function addCustomScript(){
?>
<script>
// 상기 코드
</script>
<?php
}
add_action('wp_footer', 'addCustomScript');
コメントを残す