WooCommerce でカスタムのカートに追加ボタンを追加する方法

公開: 2022-08-11

WooCommerce でカスタムのカートに追加ボタンを追加する方法を知りたいですか?

WooCommerce ストアのボタンをカスタマイズすると、注意を引くことができ、コンバージョン率と売り上げが向上します。

この記事では、WooCommerce にカスタムのカートに追加ボタンを追加する方法を順を追って説明します。

WooCommerce のカートに入れるボタンをカスタマイズする理由

カートに追加ボタンを編集すると、販売する WooCommerce 製品に合わせるのに役立ちます。デフォルトのカートボタンをそのまま使用すると、商品タイプとはまったく無関係になる可能性があります。

たとえば、カートに追加するテキストを変更して、複数の製品のアイコンまたはチェックボックスに置き換えることができます。または、ボタンの色を変更して、サイトでより目立つようにすることもできます。

チェックアウトページ、カテゴリ、ショッピングカートページなど、WooCommerce サイトの別の場所にカートボタンを表示することもできます。

上記のいずれかを行うには、最小限の手間でカートに追加ボタンを簡単にカスタマイズする方法が必要です.

WooCommerce でカスタムのカートに追加ボタンを追加する方法

幸いなことに、WooCommerce カスタムのカートに追加ボタンを作成するための 2 つの方法を共有します。最初の方法では、簡単で強力な WordPress プラグインを使用します。2 番目の方法では、プラグインを使用せずにカートボタンを手動でカスタマイズする方法を示します。

方法 1: SeedProd を使用してカスタムのカートに追加ボタンを追加する
方法 2: コードを使用してカスタムの [カートに追加] ボタンを追加する

方法 1: SeedProd を使用してカスタムのカートに追加ボタンを追加する

最初の方法では、WordPress に最適な Web サイトビルダーである SeedProd を使用します。

この強力なプラグインには、コードなしで Web サイトの任意の部分をカスタマイズできるドラッグアンドドロップページビルダーが含まれています。カスタムの WordPress テーマを作成したり、コンバージョン率の高いランディングページを作成したり、ポイントアンドクリックでレイアウトをカスタマイズしたりできます。

SeedProd には WooCommerce サポートが含まれているため、これを使用して、開発者なしで WooCommerce サイト全体を設計および立ち上げることができます。以下の手順に従って、SeedProd を使用してカスタムのカートに追加ボタンを WooCommerce サイトに追加します。

ステップ 1. SeedProd をインストールしてアクティブ化する

まず、SeedProd の価格設定ページに移動し、SeedProd プランを選択します。 WooCommerce 機能にアクセスするには、 SeedProd Eliteプランが必要です。

次に、SeedProd アカウントにログインし、[ダウンロード] タブをクリックして、プラグインの .zip ファイルをダウンロードします。同じページでライセンスキーをコピーすることもできます。

これで、プラグインを WordPress Web サイトにアップロードできます。これについてサポートが必要な場合は、WordPress プラグインのインストールと有効化に関するこのガイドに従ってください。

SeedProd をインストールしたら、 SeedProd » 設定ページに移動し、以前に保存したライセンスキーを貼り付けます。

次の手順に進む前に、[ Verify Key ] ボタンをクリックしてください。

注: SeedProd では、カスタムのカートに追加ボタンを 2 つの方法で WooCommerce に追加できます。

ランディングページの使用
カスタム WooCommerce テーマの作成

このチュートリアルでは、すべての WooCommerce ショップページが自動的に作成されるため、カスタム WooCommerce テーマを作成します。

ステップ 2. Web サイトキットを選択する

次のステップとして、 SeedProd » Theme Builderページに移動します。ここで、WooCommerce テーマのさまざまな部分を構築し、各テンプレートのデザインをカスタマイズできます。

これを行うには、各パーツを最初から作成するか、事前に作成された Web サイトキットを使用します。簡単で速いので、2 番目のオプションを使用します。

Web サイトキットを選択するには、[テーマ] ボタンをクリックします。

次の画面に、利用可能な Web サイトキットが表示されます。 WooCommerce 互換キットには、タイトルの横に「WooCommerce」が表示されます。

次に、好きなデザインにカーソルを合わせ、チェックマークアイコンをクリックしてテーマビルダーにインポートします。

このガイドでは、 Pottery Shop WooCommerce Website Kit を使用しています。

Web サイトキットをインポートすると、テーマの個々の部分が次のようなリストに表示されます。

SeedProd は、概要、カート、チェックアウト、連絡先ページなどのコンテンツページを自動的に作成します。これらのページを表示するには、WordPress ダッシュボードから [ページ] » [すべてのページ] に移動し、SeedProd のドラッグアンドドロップページビルダーでカスタマイズします。

WooCommerce のカートに追加ボタンをカスタマイズして、カスタマイズプロセスを開始しましょう。

ステップ 3. カートに入れるボタンをカスタマイズする

以下では、ショップ、製品、製品アーカイブ、およびブログのページに WooCommerce のカスタムのカートに追加ボタンを追加する方法を示します。

カスタムショップページのカートに入れるボタンを追加する

まず、WooCommerce ショップページを編集することから始めます。これを行うには、 Shop Pageテンプレートパーツを見つけて、[デザインの編集] リンクをクリックします。

WooCommerce ショップページが SeedProd のドラッグアンドドロップページビルダーで開き、コードなしでデザインをカスタマイズできます。

ライブプレビューをクリックして、任意のページ要素を編集し、その設定をカスタマイズできます。同様に、左側のパネルからブロックをドラッグしてページにドロップし、さらにコンテンツを追加できます。

デフォルトでは、Shop Page テンプレートはProducts Gridsブロックを使用します。それをクリックすると、商品リストの外観を制御するための設定が表示されます。

たとえば、列の数を変更したり、製品 ID、クエリ、またはタイプで製品をフィルタリングしたり、表示される順序を変更したりできます。

また、[詳細設定] タブをクリックして、フォントスタイル、色、境界線など、その他のカスタマイズオプションを表示することもできます。

[ボタン] セクションでは、数回クリックするだけで、WooCommerce のカートに追加ボタンをカスタマイズできます。たとえば、[ボタンスタイル] ドロップダウンで、次を選択できます。

平らな
二次元
ビンテージ
幽霊
リンク

さらに、ボタンの色、タイポグラフィ、サイズ、境界線の半径を変更できます。

カスタマイズオプションを試して、ビジネスニーズに合った外観を見つけてください。次に、右上隅の [保存] ボタンをクリックして変更を保存し、[X] アイコンをクリックしてテーマビルダーに戻ります。

商品ページのカートに入れるボタンの変更

次に、単一の商品ページでカートに追加ボタンをカスタマイズする方法を見てみましょう。 製品ページテンプレートを見つけて、[デザインの編集] リンクをクリックして開く必要があります。

今回は、SeedProd のビジュアルエディター内に単一の製品の詳細が表示されます。

デフォルトでは、次のように表示されます。

商品イメージ
商品名
商品価格
簡単な説明
カートに入れるボタン
製品データタブ

各要素をクリックして設定を表示することで、各要素をカスタマイズできます。たとえば、カートに追加ボタンをクリックすると、ボタンのテキストをより魅力的なものに変更できます。

ボタンの配置を変更したり、Font Awesome アイコンライブラリからアイコンを追加したりすることもできます。

[詳細] タブでは、以前と同様に、ボタンの色、タイポグラフィ、影、および間隔を変更できます。

商品アーカイブのカートボタンを編集する

製品アーカイブのカートに追加ボタンを変更するには、ショップページと同様のプロセスに従います。 Product Archivesテンプレートパーツを見つけ、[デザインの編集] リンクをクリックしてビジュアルエディターで開くだけです。

このページで SeedProd が使用するブロックは、製品のアーカイブブロックです。ユーザーが製品カテゴリの見出しをクリックするか、ストアの検索バーを使用すると、このページが表示されます。

このブロックは、ライブビジュアルエディターでプレビューを表示しません。ただし、ブロックの設定を開いて、フロントエンドに表示されるブロックをカスタマイズすることはできます。

たとえば、列の数を変更したり、アイテムを数で表示したり、フィルターで並べ替えたりできます。さらに、次のようなクエリによるフィルタリングを有効にすることができます。

属性によるクエリ
タグで選択
カテゴリ別に選択
製品 SKU で選択
グループで選択
可視性で選択

次に、[詳細設定] タブで、色、フォント、間隔、サイズなどを変更して、カートに追加ボタンをカスタマイズできます。

ブログページにカスタムのカートに入れるボタンを追加する

ブログページは、カートに追加ボタンを表示できるもう 1 つの場所です。こうすることで、ブログ投稿後に製品を推奨して売り上げを伸ばすことができます。

SeedProd でこれを行うには、ブログページテンプレートを見つけて、[デザインの編集] リンクをクリックします。

デフォルトでは、ブログページには最新のブログ投稿のリストが表示されますが、カスタマイズして、他の好きなコンテンツを含めることができます。

このページに新製品を紹介するセクションを追加しましょう。まず、列ブロックをページにドラッグし、列のレイアウトを選択します。

次に、画像ブロックを選択し、製品画像を追加します。

2 番目の列では、商品のタイトルと説明に見出しブロックと段落ブロックを使用できます。次に、[カートに追加]ボタンをドラッグして、ユーザーが商品をショッピングカートに追加できるようにします。

ブロックをクリックして設定を開き、カスタムのカートに追加ボタンのテキストを追加します。

その特定の製品の製品 ID も必要です。 WordPress ダッシュボードからProducts » All Productsに移動し、ID 値をコピーすることで見つけることができます。

その後、カートに追加ボタンの製品 ID フィールドに ID を貼り付けることができます。これにより、[カートに追加] URL をクリックした後、特定の商品がカートに追加されます。

[保存] ボタンをクリックして変更を保存することを忘れないでください。

ステップ 4. 変更を保存して公開する

WooCommerce ページの外観に満足したら、ストアを公開する準備が整いました。これを行うには、テーマビルダーに戻り、右上隅にある[SeedProd テーマを有効にする] トグルを [オン] の位置に切り替えます。

カスタマイズしたページのいくつかを見てみましょう。

ショップページ

商品ページ

アーカイブページ

ブログページ

方法 2: コードを使用してカスタムの [カートに追加] ボタンを追加する

次に紹介する方法は、WordPress Web サイトのコードを変更することです。ウェブサイトが壊れる可能性があるため、初心者の場合は通常、これを行うことはお勧めしません。

とはいえ、既存のウェブサイトのデザインを完全に上書きしたくない人がいることは理解しています。

開始する前に、子テーマを作成して、WordPress テーマを更新したときに変更が失われないようにすることをお勧めします。また、何か問題が発生した場合に安全に復元できるように、WordPress サイトをバックアップする必要があります。

このメソッドのコードスニペットを処理するため、WPCode などのコードスニペットプラグインをインストールすることをお勧めします。つまり、テーマファイルを直接編集する必要はありません。

すべての準備が整ったら、WooCommerce でカスタムのカートに追加ボタンを手動で追加することができます。

商品ページのカートに入れるボタンのテキストを変更する

まず、WooCommerce でカートに追加ボタンのテキストを変更する方法を見ていきます。たとえば、ボタンのテキストを「このアイテムを購入」に変更したい場合があります。

これを行うには、WPCode でカスタムコードスニペットを作成し、次の PHP コードを貼り付けます。

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

変更を保存すると、単一の製品を表示すると、新しいカートに追加ボタンのテキストが表示されます。

カートに入れるボタンの色を変更する

カートに入れるボタンの色を変更したい場合は、カスタム CSS を追加する必要があります。これを行うには、WordPress ダッシュボードから[外観] » [カスタマイズ] » [追加の CSS]に移動します。

次の CSS コードを貼り付けます。

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

次の CSS コードスニペットを貼り付けて、製品アーカイブページに同じことを行うことができます。

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

そこにあります！

この記事が、WooCommerce でカスタムのカートに追加ボタンを追加する方法を学ぶのに役立つことを願っています.

この投稿も気に入るかもしれません: WordPress でメニューをカスタムナビゲーション用に編集する方法。

WooCommerce のカートに追加ボタンをカスタマイズする準備はできましたか?

今日から SeedProd を始めましょう

読んでくれてありがとう。 YouTube、Twitter、Facebook でフォローして、ビジネスの成長に役立つコンテンツを入手してください。

WooCommerce でカスタムのカートに追加ボタンを追加する方法

WooCommerce のカートに入れるボタンをカスタマイズする理由

WooCommerce でカスタムのカートに追加ボタンを追加する方法

方法 1: SeedProd を使用してカスタムのカートに追加ボタンを追加する

ステップ 1. SeedProd をインストールしてアクティブ化する

ステップ 2. Web サイト キットを選択する

ステップ 3. カートに入れるボタンをカスタマイズする

ステップ 4. 変更を保存して公開する

方法 2: コードを使用してカスタムの [カートに追加] ボタンを追加する

商品ページのカートに入れるボタンのテキストを変更する

カートに入れるボタンの色を変更する

ステップ 2. Web サイトキットを選択する