WooCommerceで関連商品を非表示にして削除する方法

公開: 2021-07-17

あなたはあなたの店で関連商品を隠す簡単な方法を探していますか？私たちはあなたのために何かを持っています。この記事では、WooCommerceで関連商品を削除するさまざまな方法を紹介します。

WooCommerceで関連商品を削除する理由

関連商品が売り上げを伸ばすのに役立つのなら、なぜそれらを削除したいのでしょうか？ WooCommerceで関連商品を非表示にしたい場合がいくつかあります。たとえば、関連のない商品をいくつか販売している場合は、それらを表示したくない場合があります。さらに、テーマが関連商品セクションでうまく機能しない場合は、ストアから削除する必要がある場合があります。

さらに、一部のテーマやプラグインのCSSコードによって、Webサイトまたはその一部が破損する場合があります。関連製品のセクションと競合する場合は、削除できます。

さらに、商品ページが乱雑であるか、関連商品が多すぎる場合は、表示する商品の数を減らすか、セクションを完全に削除することができます。

それらを削除する方法を示す前に、WooCommerceで関連製品を設定する方法を見てみましょう。

WooCommerceで関連商品を設定する方法

WooCommerceでの関連製品の設定は非常に簡単です。 WordPressダッシュボードで、[製品]に移動し、任意の製品を開きます。 WooCommerce製品エディターで、[製品データ]セクションに移動し、[リンクされた製品]タブを選択すると、アップセルとクロスセルを構成するオプションが表示されます。

woocommerceの関連商品を削除する-リンクされた商品

アップセルとクロスセルはWooCommerceがデフォルトで提供する一種の関連製品ですが、カスタマイズオプションはかなり制限されています。関連商品を表示したい場合は、専用のプラグインを使用できます。

このデモでは、WooCommerceのカスタム関連製品と呼ばれる無料のツールを使用します。プラグインをインストールしてアクティブ化すると、リンクされた製品セクションにもう1つのオプションが表示されます。

WooCommerceで関連商品を非表示にして削除する方法

WooCommerce関連製品を削除する方法はいくつかあります。

プラグイン付き
プログラムで（コーディング）
ページビルダーを使用する
CSSを使用
テーマオプションから

それぞれの方法を詳しく見ていきましょう。

1）プラグインで関連製品を非表示にする

関連製品を非表示にするために使用できるプラグインがいくつかあります。このチュートリアルでは、NSRemove関連製品を使用します。まず、プラグインをインストールしてアクティブ化する必要があります。 [プラグイン]> [新規追加]に移動し、ツールを探して、サイトにインストールします。

woocommerceで関連商品を削除する-ns関連商品プラグイン

プラグインをアクティブ化すると、単一の製品ページからすべての関連製品が正常に削除されたことがわかります。これはプラグアンドプレイプラグインであり、追加の構成は必要ありません。

単一の製品ページのいずれかをチェックすると、関連する製品は表示されません。

woocommerceで関連製品を削除する-NSプラグインがアクティブ化されました

関連製品を再度表示する場合は、プラグインを無効にしてください。 NS Remove Related Productsは軽量のツールであるため、インストールしたままにしておくと、Webサイトの速度やパフォーマンスに影響を与えることはありません。

2）プログラムで関連製品を削除する

コーディングのスキルがあり、コードの編集とファイルの変更に慣れている場合、これは非常に興味深い方法です。このセクションでは、テーマのfunctions.phpファイルを微調整し、オンラインストアからWooCommerce関連製品を削除する方法を説明します。

注：この方法では、テーマのファイルの一部を編集する必要があるため、先に進む前に、WordPress / WooCommerceWebサイトの完全なバックアップがあることを確認してください。 そうすれば、何か問題が発生した場合にサイトを復元できます。

関連製品を削除するには、 functions.phpテーマを編集します。これを行うには、2つの異なる方法があります。

子テーマ経由
サイト固有のプラグイン経由

子テーマの作成方法を説明するステップバイステップガイドを作成しました。サイトの子テーマを生成したら、カスタムコードスニペットを子テーマのfunctions.phpファイルに追加できます。一方、専用のプラグインに依存している場合は、カスタムコードを直接プラグインに追加します。

両方のオプションを簡単に見てみましょう。

2.1）子のテーマ

私たちのブログをフォローしている場合は、テーマが更新されるとすべての変更が失われるため、親テーマファイルを編集することはお勧めしません。つまり、カスタマイズしたファイルは、新しいバージョンの新しいファイルに置き換えられます。

そのため、テーマにカスタムコードを追加する必要がある場合は、子テーマを使用することをお勧めします。子テーマの作成は非常に簡単です。このデモでは、ChildThemifyというプラグインを使用します。

まず、ストアにChildThemifyをインストールしてアクティブ化します。

子themifyプラグインをアクティブ化する

[外観]セクションの下に、[子テーマの作成]という新しいオプションが表示されます。

子テーマを作成する

そこから、親テーマの子テーマを生成できます。

woocommerceで関連商品を削除する-子テーマを作成する

子テーマを作成したら、それをアクティブにして、テーマエディターに移動します。

ここでは、テーマのfunctions.phpファイルに少しコードを追加します。デフォルトでは、WordPressはエディターにstyle.cssファイルを表示しますが、右側の列からfunctions.phpファイルを選択できます。

テーマ機能

ファイルを選択したら、以下からコードをコピーします。

 remove_action（ 'woocommerce_after_single_product_summary'、 'woocommerce_output_related_products'、20）;

次に、それをエディターに貼り付けて、ファイルを更新します。

更新ファイル

それでおしまい！フロントエンドから製品ページを確認すると、関連する製品セクションが表示されなくなっていることがわかります。

2.2）コードスニペット

もう1つの方法は、プラグインを使用してカスタムコードスニペットを追加することです。このチュートリアルでは、市場で入手可能な無料のサイト固有のプラグインの1つであるコードスニペットを使用します。

まず、サイトにプラグインをインストールしてアクティブ化します。

コードスニペットプラグインをインストールする

次に、左側に新しい設定が表示されます。

コードスニペットメソッド

デフォルトでは、プラグインはいくつかのカスタムコードスニペットを表示しますが、それらはアクティブではないため、Webサイトに影響を与えません。

コードスニペットサンプル

WooCommerceで関連商品を削除するために、サイトに新しいスニペットを追加します。

新しいスニペットを追加する

スニペットに名前を付けてから、このコードをコピーします。

 remove_action（ 'woocommerce_after_single_product_summary'、 'woocommerce_output_related_products'、20）;

それを[コード]セクションに貼り付け、[スニペットをどこでも実行]オプションを選択して、アクティブにします。

スニペットを保存

スニペットがアクティブになったら、単一の製品ページを確認すると、関連する製品がそこにないことがわかります。

3）ページビルダーを使用して関連商品を非表示にする

個々のWooCommerce製品ページから関連製品を非表示にするもう1つの興味深いオプションは、専用のページビルダープラグインを使用することです。

このチュートリアルでは、最も人気があり使いやすいページビルダーの1つであるDiviビルダーを使用します。まず、サイトにプラグインをインストールしてアクティブ化する必要があります。プレミアム商品ですので、エレガントテーマサイトから購入する必要があります。

エレガントテーマアカウントからプラグインをダウンロードした後、プラグインをインストールしてアクティブ化します。

diviビルダーをインストールします

Divi Builderには、フロントエンドから直接ページを編集するのに役立つビジュアル編集エクスペリエンスが付属しています。

それでは、WooCommerce関連製品を削除するためにそれを使用する方法を見てみましょう。製品ページを開き、トップバーの[ビジュアルビルダーを有効にする]ボタンをクリックします。

ビジュアルビルダーを有効にする

WordPressはDiviビルダーをロードし、そこからページテンプレートを編集できるようになります。

次に、関連製品要素をクリックすると、いくつかのオプションが表示されます。このセクションを削除するには、削除ボタンを選択するだけです。

4）CSSで関連製品を削除する

テーマファイルを編集したり、プラグインを使用したりしたくない場合は、単一の製品ページから関連製品を非表示にするのに役立つ簡単なCSSスニペットがあります。

まず、 WordPressダッシュボードで、 [外観]> [カスタマイズ]に移動します。

woocommerceで関連商品を削除する-カスタマイザー

[追加のCSS]セクションを開きます。

woocommerceで関連製品を削除する-追加のcss

そして、次のCSSコードを追加します。

 。関連製品 {
 表示：なし;
 }

WordPressカスタマイザーには、以下に示すように、すべての更新をリアルタイムで確認できるライブプレビューウィザードが付属しています。

ご覧のとおり、CSSを使用して関連製品を非表示にするのは非常に簡単です。コードを貼り付けた後、構成を更新するだけで、準備は完了です。

5）テーマオプションから製品を削除する

一部のプレミアムテーマには、WooCommerceストアをカスタマイズするためのオプションを含む専用のテーマパネルが付属しています。ほとんどの場合、関連製品を削除するオプションは、単一の製品ページオプションの下にあります。

さらに、一部のWordPressテーマには、有効/無効にできる関連製品セクションを含む専用のテンプレートが付属しています。テーマを確認するか、サポートチームに連絡して確認することをお勧めします。

ボーナス：関連製品を個別にオフにする方法

これは、WooCommerce関連製品を製品ページから削除するための高度な方法です。コードスニペットを追加して、WooCommerceダッシュボードにチェックボックスを追加します。このチェックボックスをオンにすると、各製品の関連製品を有効/無効にできます。

子テーマのfunctions.phpファイルに、またはサイト固有のプラグインを使用して、次のコードを追加する必要があります。このデモでは、Code Snippetsプラグインを使用するため、プラグインの設定に移動して新しいスニペットを作成するだけです。

名前を付けて、以下を貼り付けます。

コードの説明

このコードは、製品ページにチェックボックスを追加します。このチェックボックスをオンにすると、関連する製品セクションが削除されます。チェックボックスを「関連商品を削除」と呼んでいますが、ラベルの行を変更することでカスタマイズできます。

 // 1.商品ページにチェックボックスを追加して、関連商品を削除します
add_action（ 'woocommerce_product_options_general_product_data'、 'quadlayers_add_related_products_checkbox'）; 
関数quadlayers_add_related_products_checkbox（）
 {woocommerce_wp_checkbox（array（
 'id' => 'hide_related'、
 'クラス' => ''、
 'ラベル' => '関連商品を削除'
 ）。
 ）;
 }

コードの次の部分は、チェックボックスをカスタムフィールドに保存します。

 // 2。チェックボックスフィールドを保存します

add_action（ 'save_post_product'、 'quadlayers_save_related_products_checkbox'）;
 function quadlayers_save_related_products_checkbox（$ product_id）{
 グローバル$ pagenow、$ typenow;
 if（ 'post.php'！== $ pagenow || 'product'！== $ typenow）return;
 if（defined（ 'DOING_AUTOSAVE'）&& DOING_AUTOSAVE）return;
 if（isset（$ _POST ['hide_related']））{
 update_post_meta（$ product_id、 'hide_related'、$ _ POST ['hide_related']）;
 } else delete_post_meta（$ product_id、 'hide_related'）;
 }

最後に、コードのこの部分では、作成したチェックボックスがオンになっているかどうかを確認し、オンになっている場合は、関連する製品セクションを削除します。

 // 3。単一の商品ページで関連商品を非表示にする

add_action（ 'woocommerce_after_single_product_summary'、 'quadlayers_hide_related_products_checkbox'、1）;
 関数quadlayers_hide_related_products_checkbox（）{
 グローバル$ product;
 if（！empty（get_post_meta（$ product-> get_id（）、 'hide_related'、true）））{
 remove_action（ 'woocommerce_after_single_product_summary'、 'woocommerce_output_related_products'、20）;
 }
 }

すべてのコードを一緒に貼り付けて、変更を保存します。それが機能するかどうかを確認するときが来たので、製品ページに移動して、公開されている製品のいずれかを選択します。

woocommerceで関連商品を削除する-商品を編集する

エディタ内に、[関連製品を非表示]という新しいオプションが表示されます。

ボーナス-非表示関連製品

このチェックボックスを有効にすると、関連商品セクションはその商品ページに表示されません。したがって、フロントエンドを確認すると、次のように表示されます。

woocommerceで関連商品を削除する-woocommerceダッシュボードオプション

これは、特定の製品ページに関連製品セクションのみを表示する柔軟性を持つための優れたオプションです。これについての詳細は、これを見ることができます。

1ページに表示できる関連商品の数を変更する

これは、ページごとに表示する関連製品の数を変更するためのもう1つの興味深いオプションです。これは、よりクリーンな関連製品セクションがある場合、または少数の関連アイテムのみを表示する場合に役立ちます。

これを行うには、子テーマのfunctions.phpに次のコードを追加するか、CodeSnippetsプラグインを使用します。

 / **
 *関連商品の数を変更する
* /
 関数woo_related_products_limit（）{
 グローバル$ product;
 $ args ['posts_per_page'] = 6;
 $ argsを返します。
 }
 add_filter（ 'woocommerce_output_related_products_args'、 'quadlayers_related_products_args'、20）;
 関数quadlayers_related_products_args（$ args）{
 $ args ['posts_per_page'] = 3; // 3つの関連製品
$ args ['columns'] = 1; // 1列に配置
$ argsを返します。
 }

コードを詳しく見ると、1列に3つの関連製品が表示されていることがわかります。要件に応じてコードを調整し、変更を保存するだけです。フロントエンドに反映されたすべての変更が表示されます。

結論

全体として、関連製品は売り上げを伸ばすのに役立ちます。ただし、それらを非表示にする必要がある場合があります。

このガイドでは、WooCommerceで関連商品を削除するさまざまな方法を見てきました。

プラグインの使用
プログラムで（コーディング）
専用のページビルダーを使用する
CSSスニペットを使用
テーマオプションから

関連製品セクションを非表示にする最も簡単な方法は、プラグインを使用することです。プラグインをアクティブ化するだけで、関連製品が自動的に非表示になります。一方、コーディングに慣れている場合は、functions.phpファイルを編集するか、小さなCSSスクリプトを追加できます。

または、個々のページから関連商品を削除する場合は、ページビルダーを使用して削除できます。最後に、プレミアムテーマがある場合は、テーマパネルから関連製品を非表示にするオプションが提供されているかどうかを確認します。ページビルダーをインストールすると、それを使用してストア内の関連商品を非表示にできます。

ストアを最大限に活用するためのその他のヒントについては、次のガイドをご覧ください。

WooCommerce製品を追加する方法
WooCommerce製品ページをカスタマイズする
WooCommerceショップページを編集する方法

WooCommerce関連の商品をストアから削除しましたか？どの方法を使用しましたか？以下のコメントセクションでお知らせください。

WooCommerceで関連商品を非表示にして削除する方法

関連製品とは何ですか？

WooCommerceで関連商品を削除する理由

WooCommerceで関連商品を設定する方法

WooCommerceで関連商品を非表示にして削除する方法

1）プラグインで関連製品を非表示にする

2）プログラムで関連製品を削除する

2.1）子のテーマ

2.2）コードスニペット

3）ページビルダーを使用して関連商品を非表示にする

4）CSSで関連製品を削除する

5）テーマオプションから製品を削除する

ボーナス：関連製品を個別にオフにする方法

コードの説明

1ページに表示できる関連商品の数を変更する

関連商品を使用してコンバージョン率を上げる方法

結論