WooCommerceストアを運営している場合、デフォルトの「カートに追加」ボタンは地味で見逃しやすいと感じることがあります。カスタマイズすることで、テキストを「今すぐ購入」のような説得力のあるものに差し替えたり、ブランドに合わせて色を変えたり、注目を集めるためにアイコンを追加することもできます。
WooCommerceのカートに入れるボタンをカスタマイズすることで、商品やブランドとの関連性が高まり、クリック数や売上を伸ばすことができます。
このガイドでは、WooCommerceのカートに追加ボタンをカスタマイズする簡単な方法を説明します。
WooCommerceのカートに入れるボタンをカスタマイズする手順：
SeedProdでWooCommerceのカートへ追加ボタンをカスタマイズする
最初の方法では、WordPress用の最高のウェブサイト・ビルダーであるSeedProdを使用する。
この強力なプラグインには、ドラッグ＆ドロップ式のページビルダーが含まれており、コードなしでウェブサイトのあらゆる部分をカスタマイズできます。WordPressのカスタムテーマを作成したり、コンバージョンの高いランディングページを作成したり、ポイント＆クリックであらゆるレイアウトをカスタマイズできます。
SeedProdはWooCommerceをサポートしているため、開発者なしでWooCommerceサイト全体をデザインして立ち上げることができます。以下の手順に従って、SeedProdを使用してWooCommerceサイトにカスタムカートに追加ボタンを追加してください。
ステップ1.SeedProdのインストールとアクティベート
SeedProdの価格ページに行き、WooCommerceの機能をアンロックするためにEliteプランを選択します。その後、プラグインをインストールして有効化してください。
次に、SeedProd " Settingsに進み、ライセンスキーを貼り付け、Verify Keyをクリックします。
ステップ2.ウェブサイトキットを選ぶ
次に、SeedProd " Theme Builderに行き、Themesボタンをクリックします。ここには、ワンクリックでインポートできるウェブサイトキットのライブラリがあります。
WooCommerce "と書かれたキットを探してください。
気に入ったデザインを選ぶと、SeedProdがそれをTheme Builderに読み込みますので、すぐにカスタマイズを始めることができます。
ステップ3.カートに入れるボタンをカスタマイズする
ショップページと商品ページです。
ショップページのカートに入れるボタンをカスタマイズする
SeedProd " Theme Builderで ショップページを開き、Edit Designをクリックしてください。
商品グリッドブロックを選択し、ボタン設定を開きます。
- スタイルフラット、2D、ヴィンテージ、ゴースト、リンクを選択。
- テキストラベルを "Buy Now "のような分かりやすいものに変更する。
- デザイン：色、サイズ、ボーダー半径、ホバー効果を「詳細設定」で調整。
ボタンのスタイルに満足したらSaveをクリックします。
商品ページの「カートに入れる」ボタンをカスタマイズする
次に、商品ページテンプレートを開き、デザインの編集をクリックします。商品詳細エリアのカートに入れるボタンを選択し、その設定を編集します。
- テキストと配置：CTAテキストと位置を更新します。
- アイコン：Font Awesomeを使って、テキストの前後にカートまたはチェックのアイコンを追加します。
- 上級者向け：色、タイポグラフィ、スペーシング、ホバースタイルを調整できます。
ボーナスのヒントブログ記事にカートに入れるボタンを追加する
ブログコンテンツで商品を宣伝したい場合は、ブログページテンプレートを開き、画像と商品詳細のある2カラムセクションを追加し、カートに入れるボタンブロックをドラッグします。商品IDを入力し、ボタンが商品に直接リンクするようにします。
ステップ 4.変更を保存して公開する
WooCommerceページの見栄えに満足したら、ストアをライブにする準備ができました。そのためには、Theme Builderに戻り、右上のEnable SeedProd Themeトグルを「On」にします。
カスタマイズしたページをいくつか見てみよう：
ショップページ
製品ページ
アーカイブページ
ブログページ
カスタム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をカスタマイズするその他の方法
カートへ追加ボタンのカスタマイズは、あなたのストアを微調整する多くの方法の一つに過ぎません。その他のWooCommerceカスタマイズについては、以下のガイドをご覧ください：
- WooCommerceの追加情報タブをカスタマイズする方法
- WooCommerceにカートを見るボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで在庫切れの商品を非表示にする方法
WooCommerceのカートに入れるボタンに関するFAQ
display: none;.プラグインによっては、特定の商品だけ無効にできるものもあります。border-radius 角を丸くする。この記事がWooCommerceでカスタムカートに追加ボタンを追加する方法を学ぶのにお役に立てば幸いです。
この記事もいかがですか？WordPressでカスタムナビゲーションのメニューを編集する方法。
WooCommerceのカートへ追加ボタンをカスタマイズする準備はできましたか？
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
