WooCommerceを作成する方法製品IDごとにカートボタンに追加

公開: 2021-02-24

woocommerceは製品IDでカートボタンに追加します Wi製品IDでWooCommerceのカートに追加ボタンを作成し、フォーム、ウィジェット、投稿、ページ、さらにはテンプレートでボタンを使用することができます。 理想的には、WooCommerceの[カートに追加]ボタンは、さまざまなカスタムオプションに合わせてカスタマイズできます。

WooCommerce製品IDでカートボタンに追加

前回の投稿では、WooCommerceの[カートに追加]ボタンをリンクに変更する方法と、WooCommerceの[カートに追加]ボタンを変更して詳細を確認する方法について説明しました。
これらは、WooCommerceのカートに追加ボタンをカスタマイズする方法の詳細を学ぶのに役立つ他の以前のチュートリアルです。

  • [カートに追加]ボタンをLinkWooCommerceに置き換える方法
  • 続きを読むを非表示にしてカートボタンに追加する方法WooCommerce
  • WooCommerceショップページの[カートに追加]ボタンのテキストを変更する方法
  • 変更方法カートに追加テキストWooCommerceガイドと例
  • WooCommerceでプログラムでカートに商品を追加する方法
  • WooCommerceを変更する方法 'カートに追加'通知
  • ログアウトしたユーザーの価格を非表示にしてカートに追加する方法WooCommerce

上記のチュートリアルのリストからわかるように、WooCommerceの[カートに追加]ボタンをカスタマイズして、さまざまなコンテンツのレイアウトやデザインを実現する方法がいくつかあります。

たとえば、WooCommerceの価格表を作成する場合、価格表の召喚状ボタンに追加できるカートに追加ボタンを作成する必要がある場合があります。

WooCommerce製品IDでカートボタンに追加

シンプルな商品を作成するWooCommerce商品IDでカートボタンに追加

製品IDでWooCommerceのカートに追加ボタンを作成するには、カートに追加ボタンを作成する特定の製品の製品IDを知っている必要があります。 製品IDは、このチュートリアル– WooCommerce製品IDの取得方法で説明されているように、すべての製品の概要ページで簡単に見つけることができます。

カートリンクへのdd

これで、ボタンを表示する場所のボタンコードに追加しないカート追加URLを作成できます。 この場合、以下のコードのように、単純な製品のカートに追加リンクを作成できます。

https://example.com/?add-to-cart=840

サイトのURLは、URLのexample.comの部分を置き換える必要があり、特定の製品IDは、上記の例で使用されている製品ID840を置き換える必要があります。

以下のコードのように、これをHTMLボタンコードに追加できます。

数量WooCommerceでシンプルな商品を作成商品IDでカートボタンに追加

カートに追加するURLに数量を追加することもできます。これは、URLにロジックを追加するために使用されるさまざまなURLパラメーターを使用して行うことができます。

この場合、上記の手順で作成したコードを拡張して、次のように、数量2の商品IDでカートボタンに追加する簡単な商品WooCommerceを作成できます。

https://example.com/?add-to-cart=840&quantity=2

ご覧のとおり、アンパサンド記号と数量という単語を追加し、同じ商品のボタンがクリックされたときにカートに追加するアイテムの数を2に等しくしました。

このURLをHTMLコードに追加し、WooCommerceを作成するには、以下のコードを使用する必要がある数量の製品IDでカートに追加ボタンを作成します。

WooCommerceを作成し、カートにリダイレクトして製品IDでカートに追加ボタン

WooCommerceストアの顧客がサイトをナビゲートしやすくするために、リダイレクトを作成することは非常に重要です。 過去に、WooCommerceリダイレクトを作成する多くの方法を強調しました。

特に、私はこれらのブログ投稿で共有しました– WooCommerceはチェックアウト後にリダイレクトを作成し、WooCommerceはログアウト後にリダイレクトを作成し、チェックアウト後にリダイレクトを実装するのに役立つWooCommerceリダイレクトをチェックアウトプラグイン後に作成しました。

カートに追加した後、WooCommerceがカートにリダイレクトする

WooCommerceの[カートに追加]ボタンを使用して、製品IDでカートへのリダイレクトを作成することもできます。 上記の手順で共有したコードを次のように変更することで、これを実現できます。

https://example.com/cart/?add-to-cart=840

ご覧のとおり、ユーザーが製品をカートに追加した後、ユーザーがカートにリダイレクトされるように、カートをURLに追加しました。 HTMLボタンコードを含む完全なコードは次のとおりです。

カートに追加した後、WooCommerceはチェックアウトにリダイレクトします

WooCommerceの[カートに追加]ボタンを使用して、製品IDでチェックアウトへのリダイレクトを作成することもできます。 上記のURLにチェックアウトを追加して、ステップで共有したコードを次のように変更することで、これを実現できます。

https://example.com/checkout/?add-to-cart=840

ご覧のとおり、 URLにチェックアウトを追加して、ユーザーが製品をカートに追加した後にチェックアウトにリダイレクトされるようにしています。 HTMLボタンコードを含む完全なコードは次のとおりです。



結論

このチュートリアルでは、製品IDごとにWooCommerceのカートに追加ボタンを作成するさまざまな方法に焦点を当てました。また、カートに追加ボタンにリダイレクトを追加する方法と、製品の数量を追加に追加する方法も確認しました。カートボタンへ。

これで、WooCommerceのカートに追加ボタンを製品IDで作成し、価格表、フォーム、およびテンプレート内で使用できるようになることを願っています。 上記のコードに追加したボタンクラスを使用して、カートに追加ボタンをさらにカスタマイズすることもできます。 それでもサイトをカスタマイズしている場合は、 Ultimate WooCommerce HideGuideで共有したアイデアを活用できます。

ストアフロントテーマがインストールされていて、それをさらにカスタマイズしたいWooCommerceユーザーのために、デフォルトのWooCommerceテーマであるストアフロントを使用してサイトのカスタムルックを作成する方法をガイドする80以上のWooCommerceストアフロントテーマカスタマイズのヒントの素晴らしいコレクションを共有しました。

同様の記事

  1. WooCommerceの条件付きチェックアウトフィールドを作成する方法
  2. WooCommerceログインログアウトショートコードを作成する方法
  3. ボタンの色の店先のテーマを変更する方法
  4. WooCommerceの製品タイトルを取得する方法
  5. ログアウトしたユーザーの価格を非表示にしてカートに追加する方法WooCommerce
  6. カートの更新ボタンを非表示にする方法WooCommerceカートページ
  7. [カートに追加]ボタンをLinkWooCommerceに置き換える方法
  8. WooCommerceでゼロの場合に価格を非表示にする方法
  9. WooCommerceストアフロントの子テーマを作成する方法[完全ガイド]
  10. WooCommerce MarketingHub管理オプションを非表示にする方法
  11. WooCommerceのチェックアウトページまたは注文ページで製品IDを取得する方法
  12. WooCommerceでチェックアウト後に注文の詳細を取得する方法
  13. WooCommerceにログインした後にカートにリダイレクトする方法
  14. WooCommerceマイアカウントページリダイレクトを追加する方法
  15. 例で説明されたWooCommerceログインリダイレクトフック
  16. WooCommerceでチェックアウトを一時的に無効にする方法
  17. WooCommerceストアフロントブログの設定方法