WooCommerceの購入ボタンの下にお問い合わせボタンを追加する方法

多くの外国貿易向け独立サイトを構築する方が、製品システムにWooCommerceというPluginを使用しています。一方、一部のBtoBサイトでは、製品ページにコンタクトボタンやお問い合わせボタンを追加したいと考えています。以前、いくつかのお問い合わせボタンPlugin、本記事ではコードを使用してWooCommerceのカートボタンの下にカスタムボタンを追加する方法。

効果は上図の通りで、カートボタンの下に、ボタンテキストとリンクをカスタマイズ可能なボタンを追加します。

使用方法：

以下のコードをコピーし、あなたのThemeの関数ファイルfunctions.phpに貼り付けてください

add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

function my_extra_button_on_product_page() {
  global $product;
  echo '<a class="naibabutton" href="https://blog.naibabiji.com">Contact us immediately</a>';
}

保存後、サイトのフロントエンドに„Contact us immediately“ボタンが表示されます。ただし、まだスタイルは適用されていません。

テーマのCSS内で.naibabuttonのスタイルを自分でカスタマイズしてください。方法がわからない場合は、以下のコードを直接コピーして追加してください。

.naibabutton {
    color: #111;
    background-color: rgba(0,0,0,0.1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #009688;
    padding: 10px;
}

調査するのが面倒？有償で解決します。私に連絡

Amazonリダイレクトボタンを追加する

多くの外国貿易企業はAmazonの店舗を持っているため、自社の独立サイトの製品紹介ページにAmazonの店舗へのボタンを追加したいと考えています。この機能を実現するには3つの方法があります。

1. 製品の簡単な説明を記入する際にボタンを挿入します。

2. 上記で共有した問い合わせボタンの方法と同様に、コードを追加します。

3. プラグインを使用します。

コードによる方法：

ここではカスタムフィールドを使用して追加します。まずWooCommerceの製品ページにカスタムフィールド（例：amazon_link）を追加し、amazon_linkの値にAmazonのURLを入力します。

次に、以下のコードをテーマファイルに追加します。直接使用できます。Code Snippetsプラグイン追加。

add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

function my_extra_button_on_product_page() {
global $product;
if ( get_post_meta(get_the_ID(), 'amazon_link', true) ){
echo '<a class="amazon-button" href="'.get_post_meta(get_the_ID(), 'amazon_link', true).'" target="_blank">Buy on Amazon</a>';
}

}
add_action( 'wp_head', function () { ?>
<style>
.product-desc li:before {
content: "\f112";
font: normal normal normal 16px/1 LineAwesome;
color: #f0494c;
}
.product-desc li {
list-style: none;
padding-bottom: 7px;
}
.product-desc ul {
padding-left: 0px;
}
</style>
<?php } );

保存が完了すると、Amazon URLを入力した商品のフロントエンドにAmazonボタンが追加表示されます。追加していない商品には表示されません。

プラグイン方式：

[vk-content]

インストールするQuick Buy Now Button for WooCommerceのプラグインをインストールすると、WooCommerce製品を編集する際に対応する設定ボックスが表示されます。

「buy on amazon」と入力し、リダイレクト先をカスタムページに設定し、URLを入力します。製品を公開すると、Amazonにリダイレクトするボタンが表示されます。自分でリンクを変更しない場合は、クイック購入ボタンが追加されます。

[/vk-content]