WooCommerceストアを運営している場合、デフォルトの「カートに追加」ボタンは素っ気なく、見つけにくいと感じるかもしれません。カスタマイズすることで、「今すぐ購入」のようなより説得力のあるテキストに変更したり、ブランドに合わせて色を変更したり、アイコンを追加して注目を集めることもできます。
WooCommerceのカートに追加ボタンをカスタマイズすると、製品やブランドとの関連性が高まり、クリック数と売上の増加に役立ちます。
このガイドでは、WooCommerceのカートに追加ボタンをストアに合わせてカスタマイズし、クリック数を増やすための簡単な方法を説明します。
WooCommerceのカートに追加ボタンをカスタマイズする手順：
SeedProdでWooCommerceのカートに追加ボタンをカスタマイズする
最初の手法では、WordPressの最高のウェブサイトビルダーであるSeedProdを使用します。
この強力なプラグインには、コードなしでウェブサイトのあらゆる部分をカスタマイズできるドラッグアンドドロップページビルダーが含まれています。カスタムWordPressテーマを作成したり、コンバージョン率の高いランディングページを作成したり、ポイントアンドクリックでレイアウトをカスタマイズしたりできます。
SeedProdにはWooCommerceサポートが含まれているため、開発者なしでWooCommerceサイト全体を設計および起動するために使用できます。SeedProdを使用してWooCommerceサイトにカスタムカート追加ボタンを追加するには、以下の手順に従ってください。
ステップ1. SeedProdのインストールと有効化
SeedProdの料金ページにアクセスし、WooCommerce機能をアンロックするためにEliteプランを選択してください。次に、プラグインをインストールして有効化します。
次に、SeedProd » 設定に移動し、ライセンスキーを貼り付けて、キーの検証をクリックします。
ステップ2. ウェブサイトキットの選択
次に、SeedProd » テーマビルダーに移動し、テーマボタンをクリックします。ここで、ワンクリックでインポートできるウェブサイトキットのライブラリが表示されます。
オンラインストア向けに設計されているため、「WooCommerce」とマークされたキットを探してください。
気に入ったデザインを選択すると、SeedProdがテーマビルダーにロードし、すぐにカスタマイズを開始できます。
ステップ3. カートに追加ボタンのカスタマイズ
それでは、最も重要なショップページと商品ページのカートに追加ボタンを編集しましょう。
ショップページのカートに追加ボタンをカスタマイズする
SeedProd » テーマビルダーで、ショップページを開き、デザインの編集をクリックします。
商品グリッドブロックを選択し、ボタン設定を開きます。
- スタイル：フラット、2D、ビンテージ、ゴースト、またはリンクを選択します。
- テキスト：ラベルを「今すぐ購入」のような、より明確なものに変更します。
- デザイン：[高度な設定]で色、サイズ、境界線の半径、ホバー効果を調整します。
ボタンのスタイルに満足したら、[保存]をクリックします。
商品ページのカートに追加ボタンをカスタマイズする
次に、商品ページテンプレートを開き、デザインを編集をクリックします。商品詳細エリアのカート追加ボタンを選択して、設定を編集します。
- テキストと配置：CTAテキストと位置を更新します。
- アイコン：Font Awesomeを使用して、テキストの前後にカートまたはチェックアイコンを追加します。
- 詳細設定：色、タイポグラフィ、スペーシング、ホバー効果を調整します。
ボーナスのヒント：ブログ記事にカート追加ボタンを追加する
ブログコンテンツで商品を宣伝したい場合は、ブログページテンプレートを開き、画像と商品詳細の2列セクションを追加してから、カート追加ボタンブロックをドラッグします。商品IDを入力すると、ボタンが直接商品にリンクされます。
ステップ4.変更を保存して公開する
WooCommerceのページの外観に満足したら、ストアを公開する準備ができました。そのために、テーマビルダーに戻り、右上隅にあるSeedProdテーマを有効にするトグルを「オン」の位置に切り替えます。
カスタマイズしたページを見てみましょう：
ショップページ
商品ページ
アーカイブページ
ブログページ
コードでカスタムWooCommerceカート追加ボタンを追加する
コードがお好みですか？スニペットを使用してボタンのテキストと色を変更できます。安全のため、テーマファイルを直接編集する代わりに、WPCodeのようなプラグインを使用してこれらを追加してください。
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');
}
スニペットを保存してから、単一の商品を表示して新しいボタンテキストを確認します。
WooCommerceでカート追加ボタンの色を変更する方法
外観 » カスタマイズ » 追加CSSに移動し、このCSSを追加して、単一商品ページのボタンの色を変更します。
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}商品アーカイブまたはショップグリッドのボタンをスタイル設定するには、このセレクターを使用します：
.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
WooCommerceをカスタマイズするその他の方法
カート追加ボタンのカスタマイズは、ストアを調整するための多くの方法の1つにすぎません。その他のWooCommerceのカスタマイズについては、次のガイドを参照してください：
- WooCommerce追加情報タブをカスタマイズする方法
- WooCommerceにカート表示ボタンを追加する方法
- WooCommerceでショップページタイトルを変更する方法
- WooCommerceで在庫切れの商品を非表示にする方法
WooCommerceカート追加ボタンのFAQ
display: none;. Some plugins also let you disable it for specific products.border-radius for rounded corners.この記事が、WooCommerceでカスタムカート追加ボタンを追加する方法を学ぶのに役立ったことを願っています。
こちらの投稿もおすすめです： カスタムナビゲーションのためにWordPressのメニューを編集する方法。
WooCommerceの「カートに追加」ボタンをカスタマイズする準備はできましたか？
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
