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“ボタンが表示されます。ただし、まだスタイルは適用されていません。 自身でThemeの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、Pluginを使用する。コードによる方法：ここではカスタムフィールドを使用して追加します。まず、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]