続きを読むためにカートに追加ボタンを変更する方法WooCommerce

公開: 2021-02-23

WooCommerceの変更続きを読むにはカートボタンのテキストに追加 WooCommerceで詳細を読むためにカートに追加ボタンを変更したい場合は、このクイックチュートリアルがガイドとなり、WooCommerceストアで詳細を読むためにすべてのカートに追加ボタンを変更するのに役立ちます。

理想的には、「WooCommerce続きを読む」ボタンをデフォルトのテーマデザインにすることができ、特定のテーマでは、カートに追加ボタンの代わりにこのWooCommerce続きを読むボタンがあります。

WooCommerceストアのその他のカスタマイズでは、詳細を読むために[カートに追加]ボタンを変更する必要がある場合があります。

WooCommerceをカスタマイズしてカートに追加ボタン

[カートに追加]ボタンをさらにカスタマイズしたい場合は、以前、WooCommerceの[カートに追加]ボタンを変更する方法に関するいくつかのチュートリアルを共有しました。

以下は、WooCommerceのカートに追加ボタンをカスタマイズする方法について以前に書いたチュートリアルのほんの一例です。

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

詳細を読むには、[カートに追加]ボタンを変更する方法を見てみましょう。

WooCommerceの変更続きを読むにはカートボタンに追加

このWooCommerceで、[カートに追加]ボタンを変更して、ステップバイステップガイド付きのチュートリアルをさらに読む方法を示したいと思います。

このガイドでは、WooCommerceをインストールし、デフォルトのWooCommerceテーマであるStorefrontテーマを使用しています。

下の画像でわかるように、製品ページの[カートに追加]ボタンはスクリーンショットのとおりです。

単一の製品をカートボタンに追加：WooCommerce変更カートボタンに追加して続きを読む

[カートに追加]ボタンを変更して、以下で共有するコードスニペットを使用して単一の製品ページで詳細を読み、WooCommerceテーマのどこにコードスニペットを配置するかをガイドします。

woocommerceの変更をカートに追加ボタンで詳細を読む

ステップバイステップ：WooCommerce続きを読む」ボタンを置き換えてカートに追加

WooCommerceの単一製品ページで詳細を読むために[カートに追加]ボタンを変更するには、次の手順に従う必要があります。

  1. テーマのバックアップコピーを作成します。最も重要なのは、コードスニペットを配置してWooCommerceをカートに追加ボタンに変更するfunctions.phpファイルを作成して詳細を読むことです。
  2. 子テーマをまだ持っていない場合は、アクティブなテーマの子テーマを作成することをお勧めします。 子テーマの作成方法がわからない場合は、ストアフロントの子テーマの作成方法に関するこのチュートリアルから始めるとよいでしょう。
  3. 子テーマのfunctions.phpファイルを開き、functions.phpファイルの下部に以下のコードを追加します。
 // [カートに追加]ボタンを変更して、単一の製品ページで詳細を読む
	
	add_filter（ 'woocommerce_product_single_add_to_cart_text'、 'njengah_woocommerce_change_add_cart_read_more_product_page'）;
	
	関数njengah_woocommerce_change_add_cart_read_more_product_page（）{
	
		return __（ '続きを読む'、 'woocommerce'）; 
	}
  1. 上記のコードでわかるように、これはコールバック関数を備えたフィルターフックであり、単一の製品ページで[カートに追加]ボタンをチェックして、カスタムテキストに変更します。続きを読む。
  1. 変更を保存し、フロントエンドで[カートに追加]ボタンのテキストが変更されているかどうかを確認して、下の画像の例のように詳細を確認してください。

woocommerceの変更をカートに追加ボタンで詳細を読む

ショップページカートボタンに追加：WooCommerce変更カートボタンに追加して続きを読む

カートに追加ボタンを変更して単一の商品ページで詳細を読むことができたので、以下で共有してガイドするコードスニペットを使用して、カートに追加ボタンを変更してショップページで詳細を確認します。 WooCommerceテーマのコードスニペットを配置する場所：

woocommerceの変更をカートに追加ボタンで詳細を読む

ステップバイステップ：続きを読む」ボタンWooCommerceをショップページに追加

WooCommerceショップページで詳細を読むために[カートに追加]ボタンを変更するには、次の手順に従って子テーマにコードを追加する必要があります。

  1. テーマのバックアップコピーを作成します。最も重要なのは、コードスニペットを配置してWooCommerceをカートに追加ボタンに変更するfunctions.phpファイルを作成して、ショップページで詳細を確認することです。
  2. 子テーマをまだ持っていない場合は、アクティブなテーマの子テーマを作成することをお勧めします。 子テーマの作成方法がわからない場合は、ストアフロントの子テーマの作成方法に関するこのチュートリアルから始めるとよいでしょう。
  3. 子テーマのfunctions.phpファイルを開き、functions.phpファイルの下部に以下のコードを追加します。
 //商品アーカイブとショップページのカートテキストに追加を変更するには 

	add_filter（ 'woocommerce_product_add_to_cart_text'、 'njengah_woocommerce_change_add_cart_read_more_shop_page'）;  
	
	関数njengah_woocommerce_change_add_cart_read_more_shop_page（）{
	
		return __（ '続きを読む、' woocommerce '）;
		
	}
  1. 上記のコードでわかるように、これはコールバック関数を備えたフィルターフックであり、単一の製品ページで[カートに追加]ボタンをチェックして、カスタムテキストに変更します。続きを読む。
  1. 下の画像の例のように、変更を保存してフロントエンドで[カートに追加]ボタンのテキストが変更され、ショップページとアーカイブページで詳細を確認できるかどうかを確認します。

ショップページと単一製品ページ：WooCommerceの変更カートに追加ボタンで詳細を読む

2つのコードスニペットを組み合わせて[カートに追加]ボタンを変更し、単一の製品とショップページの両方で詳細を読むこともできます。

以下は、子テーマのfunctions.phpファイルに追加して、WooCommerceのカートに追加ボタンのテキストを変更して詳細を読むために必要な結合コードスニペットです。

 // [カートに追加]ボタンを変更して、単一の製品ページで詳細を読む
	
	add_filter（ 'woocommerce_product_single_add_to_cart_text'、 'njengah_woocommerce_change_add_cart_read_more_product_page'）;
	
	関数njengah_woocommerce_change_add_cart_read_more_product_page（）{
	
		return __（ '続きを読む'、 'woocommerce'）; 
	}

    //商品アーカイブとショップページのカートテキストに追加を変更するには 

	add_filter（ 'woocommerce_product_add_to_cart_text'、 'njengah_woocommerce_change_add_cart_read_more_shop_page'）;  
	
	関数njengah_woocommerce_change_add_cart_read_more_shop_page（）{
	
		return __（ '続きを読む、' woocommerce '）;
		
	}

結論

この投稿では、コードスニペットを使用してWooCommerceの[カートに追加]ボタンを変更し、単一の製品ページとアーカイブまたはショップページの両方で詳細を読む方法を説明しました。

どちらの場合も、ショップページまたはアーカイブページと単一の製品ページをターゲットにするための異なるフックを持つフィルターです。

最後に、2つのコードを組み合わせて、functions.phpに追加し、[カートに追加]ボタンを変更して、ショップページと単一の製品ページの両方で詳細を読むことができます。

同様の記事

  1. チェックアウトページで注文IDを取得する方法WooCommerce
  2. WooCommerceマイアカウントページリダイレクトを追加する方法
  3. ストアフロントのWooCommerceテーマでリンクの色を変更する方法
  4. WooCommerce製品画像のズーム効果を削除する方法
  5. WooCommerceの[追加情報]タブを非表示にする方法
  6. WooCommerceストアフロント製品のページネーションを追加する方法
  7. カテゴリを並べ替える方法ショップページWooCommerceストアフロントテーマ
  8. 価格を移動する方法WooCommerceストアフロントフック
  9. WooCommerceCheckoutのデフォルトの国を追加する方法
  10. 3つの簡単なオプションでWooCommerceの関連製品を削除する方法
  11. ストアフロントセットアップ後に商品を追加する方法[初心者向けガイド]
  12. 商品説明の見出しWooCommerceを非表示にする方法
  13. 変更方法カートに追加テキストWooCommerceガイドと例
  14. 2つの簡単なオプションで製品ページWooCommerceからカテゴリを削除
  15. WooCommerceフックリスト»グローバル、カート、チェックアウト、製品
  16. チェックアウトページかどうかを確認する方法WooCommerce
  17. 製品の説明を取得してWooCommerceを表示する方法
  18. WooCommerceチェックアウトページに非表示フィールドを追加する方法