ベストセラー人気 WordPress テーマTop 30 詳細

[WordPress] WooCommerce 商品ページに「買い物を続ける」ボタンを追加する

Last Updated:2016年7月28日| コメントを残す

WordPressの WooCommerce カート(Cart)ページに「買い物を続ける」ボタンを追加する方法は、 この記事で扱っています。 この記事では、個別の商品ページに「買い物を続ける」ボタンを追加する方法を説明します。

いくつかの方法を考えてみることができるようになります。 まずフィルター、アクションフックを使用する方法です。

個々の商品ページにボタンを追加する方法として、次のコードを使用することができます。

// Add a button to the right of the “add to cart” button in the single product page in WooCommerce
// "장바구니" 버튼 오른쪽에 버튼 추가하기
add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {
echo '<button type="submit" class="button alt">쇼핑 계속하기</button>';
}

classは、現在使用中のテーマに応じて適宜変更します:

そしてショッピング(ショップ)のページのURLは、次のコードを使用することができます。

$shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );

この両方を適切に組み合わせ、ボタンフォームが出てくるでしょう。 ボタンにハイパーリンクを適用する方法は、 ここを参照することができます。

ところが、上記のようにすると、ボタンを押すと、必要に応じて移動していないことです。 おそらく「買い物かご」ボタンを押すと同じリンクに移動することができます。 この場合は、次のように タグを使用して実装することができます。

// Add a "Continue Shopping" button in WooCommerce product page
add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {
$shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
echo '<a href="' . $shop_page_url . '" class="button alt">쇼핑 계속하기</a>';
}

その後、CSSでレイアウトを適切に調整してくれるようです。

a.single_add_to_cart_button.button.alt.continue {
display: inline-block;
float: left;
margin-left: 5px;
}

button.single_add_to_cart_button.button.alt {
float: left;
}

.product_meta::before {
content: "";
display: block;
clear: both;
margin-top: 40px;

}

たとえば、テーマに合わせて適切に classを調整してくれて、上記のようなCSSスクリプトを適用すると、次のようにボタンが追加されます。

Add Continue Shopping in WooCommerce

上記のような方法で、他のボタンも追加することができます。 float:rightのような属性を適切に "買い物を続ける"ボタンを"カート「前方に移動させることもできます。

別の方法としてjQueryを使用することができます。

var lnk = 'http://www.example.com/shop/'; // 상점 페이지 URL
jQuery('<a class="single_add_to_cart_button button alt continue">쇼핑 계속하기</a>').insertAfter('button.single_add_to_cart_button.button.alt').attr('href', lnk);

上記のようなjQueryのスクリプトを適用してCSSで適切に調整してくれればされます。

メモ:


コメントを残す

コメント

WordPress Naver カフェを訪れる

ありがとうございます!