WooCommerceで価格を非表示にする方法(製品価格を非公開にする)

デフォルトでは、WooCommerceはストアを訪れるすべての人に製品価格を表示します。これはほとんどのオンライン小売業者にとって機能しますが、一部のビジネスでは、誰が価格設定を見るかについてより多くの制御が必要になります。

オンラインストアのオーナーを支援する中で、WooCommerceで価格を非表示にすることが不可欠なケースをいくつか目にしました。

例えば、卸売業者は、検証済みの法人顧客にのみ特別な価格を表示する必要があります。一方、B2B企業は、適切な価格で適切なソリューションを提供できることを確認するために、事前に顧客のニーズを話し合うことを好む場合があります。

さまざまなソリューションをテストした後、WooCommerceで価格を非表示にするための信頼できる3つの方法を見つけました。これらの方法は、卸売業者から高級企業まで、あらゆる種類のビジネスに有効です。

WooCommerceで価格を非表示にする方法

製品価格を非表示にする前に考慮すべきこと

WooCommerceで価格なしで販売することが理にかなっている状況をいくつか見てきました。

例えば、多くの卸売業者は、小売顧客にバルク割引を見られないように価格を非表示にしています。また、カスタム家具メーカーは、各作品の材料やデザインに基づいた独自のコストがあるため、価格を削除することがよくあります。

また、一部の高級ブランドは、真剣な購入者のみに価格を表示することで、排他的な会員限定のショッピング体験を作成することを好むことも知っています。

残念ながら、WooCommerceには価格を非表示にするための組み込みオプションがありません。しかし、さまざまなソリューションをテストした結果、うまく機能する信頼性の高い3つの方法が見つかりました。

下のクイックリンクを使用して、WooCommerceで価格を非表示にするための希望する方法にスキップできます。

準備はいいですか?さあ始めましょう!

方法1:コードを使用してすべての/特定の商品の価格とカートボタンを非表示にする

この方法では、ストアのすべての製品、または特定のアイテムのみの製品価格とカートボタンを非表示にする方法を説明します。このアプローチは、顧客に直接価格について問い合わせてもらいたい場合や、価格を表示するためにアカウントにログインしてもらいたい場合に役立ちます。

さまざまなオプションをテストした結果、価格を非表示にする多くのプラグインは非常に高価であるか、使用するには複雑すぎることがわかりました。そのため、迅速に作業を完了できる簡単なコードソリューションを考案しました。

この方法は、簡単な 1 回限りのセットアップに慣れており、専用の卸売またはカタログプラグインにある広範な管理機能が必要ない場合に理想的です。

「コードソリューション」という言葉は intimidating に聞こえるかもしれませんが、心配しないでください。これは初心者向けの簡単な方法です。

コードをサイトに追加することをコピー&ペーストと同じくらい簡単にするプラグインである WPCode を使用します。このプラグインは多くのサイトで使用しており、安全で信頼できることがわかりました。

WPCode WordPressコードスニペットプラグイン

無料版は、価格を非表示にするのに最適です。ただし、カスタムソリューションを作成するためのAIコードジェネレーターのような追加機能が必要な場合は、Pro版を検討する価値があるかもしれません。

両方のバージョンは、WPCodeレビューで広範囲にテストしました。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドをご覧ください。

次に、以下のいずれかのチュートリアルに従ってください。

オプション1:特定の商品に対して価格&カートボタンを非表示にする(ログアウトユーザー)

価格を非表示にする最も簡単な方法は、WPCodeの無料コードスニペットライブラリにある既製のスニペットを使用することです。このコードは、ユーザーがログインしていない場合に特定の製品から価格とカートボタンを非表示にします。

WPCodeに既に慣れている場合は、WPCodeのスニペットライブラリで見つけることができます。

それ以外の場合、プラグインの使用が初めての場合は、以下のリンクをクリックしてください。

特定の製品の非ログインユーザー向けの価格とカートに追加を非表示にする

次に、「サイトに追加」ボタンをクリックして開始します。

WPCodeコードスニペットをサイトに追加する

この時点で、無料のWPCodeアカウントを作成するか、既にお持ちの場合はログインする必要があります。

登録中に、WordPressウェブサイトをWPCodeライブラリに接続するように求められます。

WPCodeコードスニペットをデプロイするためにログインする

ログイン後、スニペットを追加したいウェブサイトを選択します。

次に、「デプロイ」をクリックします。

WPCodeコードスニペットを展開するウェブサイトの選択

システムはWordPress管理エリアに戻り、セットアップを完了します。

ここで、「スニペットを確認してインストール」をクリックします。

WPCodeコードスニペットの追加を確認

これにより、コードスニペットエディターに移動し、ニーズに合わせてコードをカスタマイズするために 2 つの簡単な変更を行います。

まず、製品IDを変更する必要があります。このコード行を探してください。

$not_purchasable_products = array( 23, 22 );

これらの数値を、ご自身の製品IDに置き換えてください。

それらが何であるかわからない場合は、WooCommerceで製品IDを見つける方法に関する記事をお読みください。

たとえば、商品63、64、65の価格を非表示にしたい場合は、次のように記述します。

$not_purchasable_products = array( 63, 64, 65 );

次に、価格の代わりに表示されるメッセージをカスタマイズできます。

ここに必要なコードがあります:

function wws_hide_price_not_logged_in( $price_html, $product ) {
    if ( is_non_purchasable_products_for_visitors( $product ) ) { 
        $price_html = '<div><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">' . __( 'Login with wholesale account to see prices', 'wws' ) . '</a></div>';
    }
    return $price_html;

このテキスト「卸売アカウントでログインして価格を表示」は、「価格を表示するにはログイン」や「価格についてはお問い合わせください」など、好きなように変更できます。

例を挙げます。

function wws_hide_price_not_logged_in( $price_html, $product ) {
    if ( is_non_purchasable_products_for_visitors( $product ) ) { 
        $price_html = '<div><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">' . __( 'Login to see prices', 'wws' ) . '</a></div>';
    }
    return $price_html;

ユーザーがこのリンクをクリックすると、サインインするために WooCommerce ログインページ に移動します。

最後に、トグルを「非アクティブ」から「アクティブ」に切り替えます。次に、「更新」をクリックします。

WPCodeを使用してWooCommerceの価格を非表示にするための既製のコードスニペットを追加する

これで、商品ページにアクセスして変更を確認してください。

価格とカートボタンが非表示になり、カスタムメッセージに置き換えられていることに気づくでしょう。

WooCommerceの価格を表示するためにユーザーにログインを求める

カスタムメッセージが、選択した商品ページに表示されるようになります。

オプション2:すべてのユーザーに対して価格とカートボタンを非表示にする

WooCommerceストアを訪れるすべての人に対して価格とカートボタンを非表示にしたい場合は、別のコードスニペットを追加する必要があります。この方法は、ユーザーがログインしているかどうかにかかわらず機能します。

まず、WordPressダッシュボードのCode Snippets » + Add Snippetに移動します。「Add Your Custom Code (New Snippet)」をクリックし、「+ Add Custom Snippet」ボタンをクリックします。

WPCodeにカスタムスニペットボタンを追加

その後、いくつかのコードタイプを選択できるようになります。

ここでは、「PHPスニペット」を選択するだけです。

WPCodeでPHPスニペットを選択

次に、コードスニペットにタイトルを付ける必要があります。「WooCommerceのすべての価格を非表示にする」のような簡単なもので構いません。

次に、「コードプレビュー」セクションで、以下のコードをコピーしてそこに貼り付けます。

/**
 * Hide Price & Add to Cart for All Users for All Products
 */

/**
 * Function to check if products should be non-purchasable.
 * This will always return true to apply to all products.
 */
function is_non_purchasable_products( $product ) {
    // Always return true to make all products non-purchasable for all users
    return true;
}

/**
 * Set product as not purchasable
 */
function wws_set_not_purchasable( $is_purchasable, $product ) {
    if ( is_non_purchasable_products( $product ) ) {
        // Set product as not purchasable
        $is_purchasable = false;
    }
    return $is_purchasable;
}

/**
 * Replace price with 'Contact us for pricing' message linking to the contact page
 */
function wws_hide_price( $price_html, $product ) {
    if ( is_non_purchasable_products( $product ) ) {
        // Get the URL for the contact page by slug
        $contact_page = get_page_by_path( 'contact' );
        if ( $contact_page ) {
            $contact_url = get_permalink( $contact_page );
        } else {
            // Default to '/contact' if the page is not found
            $contact_url = site_url( '/contact' );
        }

        // Set the price HTML to the contact message
        $price_html = '<div><a href="' . esc_url( $contact_url ) . '">' . __( 'Contact us for pricing', 'wws' ) . '</a></div>';
    }
    return $price_html;
}

/**
 * Hide the 'Add to Cart' button
 */
function wws_hide_addcart( $add_to_cart, $product, $args ) {
    if ( is_non_purchasable_products( $product ) ) {
        // Remove the 'Add to Cart' button
        $add_to_cart = '';
    }
    return $add_to_cart;
}

// Add filters to apply the above functions
add_filter( 'woocommerce_is_purchasable', 'wws_set_not_purchasable', 10, 2 );
add_filter( 'woocommerce_get_price_html', 'wws_hide_price', 10, 2 );
add_filter( 'woocommerce_loop_add_to_cart_link', 'wws_hide_addcart', 10, 3 );

このコードは、ストアからすべての価格とカートボタンを削除し、代わりに訪問者をあなたのお問い合わせページに誘導する「価格についてはお問い合わせください」リンクに置き換えます。

簡単なヒント: このコードスニペットは、'/contact' URL のページに自動的にリンクします。リンクを機能させるには、サイトにその正確な URL スラッグを持つページが公開されていることを確認する必要があります。連絡先ページの URL が異なる場合は、コードで更新できます。

コードを貼り付けたら、トグルを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」をクリックします。

WPCodeでWooCommerceの価格をすべてのユーザーに非表示にするカスタムコードを作成する

スニペットを保存してアクティブにすると、変更がライブになります。

これで、ストアにアクセスして、すべての価格とカートボタンが連絡先ページへのリンクに置き換えられていることを確認できます。

ユーザーにストアオーナーに連絡してWooCommerceの価格を確認するように依頼する

詳細については、WordPressにカスタムコードを簡単に追加する方法に関する初心者向けガイドをご覧ください。

方法 2: 卸売業者以外の顧客から製品価格を非表示にする

この方法は、通常の訪問者から価格を非表示にしたいが、承認された顧客には特別な卸売価格を表示したいビジネスに最適です。

このアプローチは、卸売バイヤーに排他的な価格設定を維持したいメーカー、販売代理店、およびB2B企業に特に適しています。

また、以前のコードソリューションがお好みでない場合にも最適です。なぜなら、ユーザーフレンドリーなWholesale Suiteのプラグインを使用するからです。

始める前に、このプラグインスイートが提供するすべての機能とその仕組みを理解するために、詳細なWholesale Suiteレビューを読むことをお勧めします。

ステップ1:必要なWholesale Suiteプラグインをインストールする

この方法を機能させるには、プレミアムなWholesale Suiteバンドルが必要です。

スイートを購入したら、コアプラグインである「WooCommerce Wholesale Prices Premium」と「WooCommerce Wholesale Lead Capture」の2つをインストールして有効にする必要があります。

「Wholesale Prices Premium」プラグインは、一般のお客様から価格を非表示にし、卸売バイヤーに表示できるようにするものです。

「Wholesale Lead Capture」プラグインは、潜在的な卸売顧客がアカウントを申請できるプロフェッショナルな登録システムを作成します。必要に応じて、WPForms を使用して登録フォームを作成することもできます。

これらのWordPressプラグインをインストールしたら、ダッシュボードのWholesale » Licenseに移動します。

Wholesale Suite プラグインにライセンスを追加する

ここで、プレミアムプラグインの購入時に受け取った確認メールで見つかる、プレミアムプラグインの購入に関連付けられたライセンスキーとメールアドレスを入力します。

複数のWholesale Suiteプラグインを購入した場合、上部にあるタブを使用して、それぞれのライセンスキー設定にアクセスできます。

各ツールのライセンス情報を入力したら、「変更を保存」を必ずクリックしてください。完了したら、次のステップに進むことができます。

卸売スイートのライセンスキーを保存しています
ステップ2:テスト用卸売顧客アカウントの設定

Wholesale Suiteは、すべての卸売クライアントの価格設定を1か所で管理できる特別な「Wholesale Customer」ユーザーロールを作成します。これらの顧客がログインすると、特別な卸売価格が自動的に表示されます。

価格の非表示が正しく機能することを確認するには、テスト用の卸売顧客アカウントが必要です。これにより、WooCommerceストアが卸売顧客の視点と通常の訪問者の視点の両方からどのように見えるかを確認できます。

卸売アカウントの作成は簡単です。まず、WordPressダッシュボードのユーザー » 新規追加に移動します。 

WordPress で新しいユーザーを追加する

次に、メールアドレスやユーザー名などの基本情報を入力し、「ロール」ドロップダウンメニューから「卸売顧客」を選択します。

最後に、「新規ユーザーを追加」をクリックしてアカウントを作成します。

顧客の卸売ユーザーロールを変更する

卸売条件を満たしていない場合に、卸売顧客が通常価格で購入することを防ぎたい場合もあります。デフォルトでは、プラグインは警告を表示しますが、顧客は小売価格で購入できます。

これを変更するには、**卸売 » ロール**に移動し、「卸売顧客」ロールを見つけます。ロールの下にある「編集」ボタンをクリックしてカスタマイズします。

卸売顧客ロールの編集

次に、「卸売条件が満たされない場合は購入を防止する」のチェックボックスをオンにします。

その後、「卸売ロールの編集」をクリックして変更を保存するだけです。

卸売ユーザーロールの編集
ステップ3:価格とカートボタンを非表示にする

次に、通常のオンラインストアの訪問者から価格と カートページ ボタンを非表示にする必要があります。

これを行うには、Wholesale » Settings に移動します。「Wholesale Prices」セクションにいることを確認し、「Price」タブに移動します。

Wholesale Suiteの価格設定

次に、「価格とカートボタンを非表示にする」設定までスクロールし、その横にあるチェックボックスをオンにします。

その下で、価格ボタンとカートボタンを置き換えるカスタムテキストを追加できます。これを空のままにすると、代わりにデフォルトの「価格を表示するにはログインしてください」というメッセージが表示されます。

Wholesale Suite で価格とカートボタンを非表示にする

次に、下にスクロールして、「卸売業者以外のユーザーに卸売価格を表示する」設定が無効になっていることを確認してください。

最後に、「変更を保存」ボタンをクリックします。

Wholesale Suite の価格設定の変更を保存する
ステップ4:WooCommerce製品に卸売価格を追加して非表示にする

これで、個々の製品に卸売価格を追加する準備が整いました。新しい製品または既存の製品を開いて編集できます。

製品を追加するのが初めての場合は、詳細について WooCommerce 簡単ガイド をお読みください。

新しい製品を作成したり、既存の製品を編集したりする際に、ある時点で「製品データ」セクションに移動する必要があります。

ここで、「通常価格」を設定します。これは通常のお客様が見る価格です。次に、「卸売価格」セクションを見つけ、ドロップダウンメニューから割引タイプを選択します。パーセンテージ割引または固定価格のいずれかを提供できます。

WooCommerce の価格設定

パーセンテージ割引の場合、「パーセンテージ」割引タイプを選択し、割引額を入力するだけです。

Wholesale Suiteが最終価格を自動的に計算します。

卸売パーセンテージ割引を設定する

割引タイプとして「固定」を選択した場合、請求したい正確な卸売価格を入力するだけです。

期間限定の卸売オファーを実行したいですか?これは、季節限定のプロモーションを実行し、より多くのWooCommerce訪問者を顧客に変えるのに役立ちます。

これを行うには、「スケジュール」リンクをクリックできます。

WooCommerceの卸売割引をスケジュールする

その後、卸売セール価格プロモーションの開始日と終了日を入力できます。

この方法では、割引を手動で有効/無効にする必要がなくなります。WooCommerceのクーポンコードのスケジュールと基本的に同様に機能します。

WooCommerceの卸売割引をスケジュールする

もちろん、この設定はオプションです。今すぐ使用する準備ができていない場合は、将来のために覚えておくと良いかもしれません。

次に、「卸売最低注文数量」セクションで、最低注文要件を設定します。

これは、卸売顧客が特別価格にアクセスするために購入する必要があるアイテムの数を示します。

卸売注文の最低注文金額の設定

次に、「卸売注文数量ステップ」セクションまでスクロールダウンします。

この設定は、最小数量を満たしたに顧客が製品を購入できる増分を制御します。たとえば、最小注文数量が10で数量ステップが5の場合、顧客は10、15、20などを購入できます。

ステップを「1」に設定すると、顧客は最小値以上の任意の数量(例:10、11、12など)を購入できます。これにより、顧客が少額の個人購入で卸売特権を悪用することを防ぎます。

このチュートリアルでは、フィールドに「1」を入力します。

WooCommerceに卸売価格を追加する方法

これにより、上記で設定した最小注文数量が各アイテムに適用されるようになります。

そのようにすれば、人々が卸売特権を悪用しようとすることはできません。この設定の詳細については、最小注文要件に関するWholesale Suiteのドキュメントを参照してください。

最後に、ページ上部にある「卸売ロールに制限」設定を使用して、製品を卸売顧客のみに表示できます。このフィールドに「卸売顧客」と入力して選択します。

この段階で、製品設定の最終化を続けることができます。たとえば、製品画像ギャラリーを追加したり、製品ビデオを埋め込んだり、製品タグを挿入したりできます。

準備ができたら、「更新」または「公開」をクリックして変更を保存してください。その後、すべての卸売商品に対して同じ手順を繰り返すことができます。

Wholesale Suiteで製品を卸売顧客のみに制限する
ステップ 5: 卸売登録フォームの設定

Wholesale Suite拡張機能は、卸売顧客向けの登録ページとログインページを自動的に作成します。ただし、申請を受け付ける前に、登録フォームをニーズに合わせてカスタマイズしましょう。

卸売 » 設定に移動し、「卸売リードキャプチャ」タブをクリックして、「登録フォーム」メニューを開きます。 

Wholesale Suite 登録フォームの設定を構成する

ここで下にスクロールすると、利用可能なすべてのフォームフィールドを示すテーブルが表示されます。

名、姓、メールアドレス、ユーザー名などの基本的なフィールドはデフォルトで含まれていますが、アクティブ化する必要があるものもあります。フィールドを有効にするには、「アクション」列の鉛筆の「編集」アイコンをクリックします。 

Wholesale Suite登録フォームフィールドの設定

表示するには「有効」ボックスにチェックを入れ、必須にする場合はフィールドを「必須」とマークするだけで済みます。

カスタムフィールドの保存が完了したら、「カスタムフィールドを保存」をクリックすることを忘れないでください。

Wholesale Suiteの登録フィールドへの変更を保存

次に、「一般」タブに切り替えて、新しい卸売ログインおよび登録ページを見つけます。

「ページを表示」をクリックしてプレビューしてください。

卸売登録およびログインページの表示

それらを開いたら、これらのページへのリンクをナビゲーションメニューに追加できます。これにより、ユーザーはオンラインストアを閲覧しているときに簡単に見つけることができます。

WordPressでナビゲーションメニューを追加する方法については、WordPressでナビゲーションメニューを追加する方法のガイドをご覧ください。

Wholesale Suite 登録ページの例

重要な決定事項の1つは、新しいアプリケーションをどのように処理するかです。

「新規リードの自動承認」の下で、「手動承認が必要」または「自動承認」を選択します。

卸売価格を保護し、正規のビジネスであることを確認するために、手動承認を強くお勧めします。

Wholesale Suiteで卸売サインアップを手動または自動で承認するかどうかを選択する

登録フォームの設定に満足したら、上にスクロールできます。

最後に、「変更を保存」ボタンをクリックします。

卸売登録フォームの設定の変更を保存

💡 プロのヒント: 登録フォームをより細かく制御するには、WPFormsの使用をお勧めします。条件付きロジック、複数ページフォームなどの高度な機能が必要な場合や、ドラッグ&ドロップビルダーでデザインの柔軟性を最大限に高めたい場合は、WPFormsが最適なソリューションです。

カスタム登録フォームの作成方法に関するガイドをご覧ください。ステップバイステップの説明については、こちらを参照してください。

ステップ6:卸売注文フォームを作成する

最後のステップは、卸売注文フォームを作成することです。これにより、卸売顧客の注文プロセスが効率化されます。このフォームを使用すると、複数の商品ページを移動することなく簡単に一括注文できるため、あなたと顧客の両方の時間を節約できます。

卸売注文フォームを設定する際、製品のSKUや希望配達日などの必須フィールドを含めることで、ビジネスが最良の結果を得られることがわかりました。

これにより、卸売顧客は必要なすべての情報を提供しながら、迅速に一括注文を行うことができ、リクエストを効率的に処理できます。

最適化された卸売注文フォームの作成に関する詳細な手順については、WordPressで卸売注文フォームを作成する方法に関する包括的なガイドをご覧ください。

設定は完了です!卸売価格ルールが有効になりました。これが実際にどのように機能するかを見てみましょう。

Wholesale Suiteプラグインで価格を非表示にした例

今回、価格が表示されるかどうかを確認するために、卸売顧客としてログインすることも試みました。

結果を以下で確認してください。

Wholesale Suite を使用して有効にした場合、卸売顧客が商品ページを表示したときに価格が表示される例

また、アカウントへのサインインとサインアウトにヘルプが必要な場合は、WordPressでユーザーアカウントを即座に切り替える方法に関するガイドを読むこともできます。

方法3:価格なしでプロフェッショナルなオンラインカタログを作成する

この方法により、WooCommerce ストアをプロフェッショナルな製品カタログに変えることができます。価格設定のディスカッションをメール、お問い合わせフォーム、またはオフラインで処理することを好むビジネスに最適です。

YITH WooCommerce Catalog Mode プラグインは、価格なしのカタログを作成するための簡単な方法を提供します。以前のチュートリアル「WooCommerceに商品カタログを追加する方法」で、このプラグインの使用方法をテストして共有しました。

卸売方法とは異なり、このアプローチでは、価格を完全に削除し、カスタム連絡ボタンに置き換えることができます。ストア全体、特定の商品のカテゴリ、または個々の商品の価格を非表示にできます。

この柔軟性により、カスタムメーカー、高級小売業者、またはクライアントの要件に基づいて価格を見積もる必要があるサービスプロバイダーに最適です。

このガイドでは、YITHのプラグインを使用してカタログモードを有効にし、価格を非表示にするための必須設定に焦点を当てます。当社のテストに基づくと、これらの基本的な機能があれば、ほとんどのストアで価格非表示を開始するのに十分であることがわかりました。

ただし、このプラグインができることの表面をなぞっているにすぎないことを覚えておいてください。詳細なYITH WooCommerce Catalog Modeレビューで、さらに多くの高度な機能を探りました。

また、プラグインのプレミアムバージョンを購入する必要があります。無料バージョンでも問題なく動作しますが、価格非表示機能は有料バージョンでのみ利用可能です。

ステップ1:YITH WooCommerceカタログモードのインストールと有効化

プラグインを購入したら、YITHのウェブサイトにアクセスしてYITHアカウントにログインしてください。次に、「ライセンスとダウンロード」タブに移動します。

プレミアムYITHプラグインのダウンロード

次に、「プラグインのダウンロード」ボタンをクリックして、YITHアカウントからプラグインファイルをダウンロードします。ライセンスキーがすぐに必要になるため、ブラウザのタブは開いたままにしておいてください。

次に、プラグインをWordPressサイトにインストールしてください。

セットアップウィザードが表示されたら、YITHのメールアドレスとライセンスキーを入力する必要があります。

YITHライセンスのアクティベート

詳細を入力したら、「ライセンスをアクティベート」をクリックしてセットアッププロセスを完了してください。

それが完了したら、「プラグインダッシュボードに移動」をクリックして、カタログモードの設定のカスタマイズを開始します。

YITH プラグインダッシュボードに移動する

次のステップに進みましょう。

ステップ2:基本的なカタログモード設定の構成

カタログモードは、ストアをショッピングサイトから製品ショーケースに変えます。これは、すぐに購入できるオプションなしで製品を表示したいビジネスに最適です。

まず、YITH » カタログモード に移動し、「設定」タブに移動します。ここで、価格なしでWooCommerceを実行するためのオプションを設定します。

まず、カタログモードをすべてのユーザーに有効にするか、ゲストユーザーのみに有効にするかを選択できます。

YITHプラグインでカタログモードを有効にする

管理者ユーザーロールを持つユーザーに対してカタログモードを有効にして、モードがどのように見えるかをテストすることもできます。

下にスクロールすると、「ショップを無効にする」機能を使用して、カートページ、チェックアウトページ、およびすべての「カートに追加」ボタンをストアから削除できます。

YITHプラグインを使用してWooCommerceショップ機能を無効にする

ショップ機能を無効にすると、特定の時間帯や曜日を設定するための追加オプションが表示されます。

これは、オンラインストアが注文を受け付けない日やホリデーシーズンにのみ価格を非表示にしたい場合に特に役立ちます。

YITHプラグインを使用して特定の期間、ショップ機能を無効にする

よりターゲットを絞った制御のために、「ショップを無効にする」メニューをスキップして、「カタログモードでの「カートに追加」設定」セクションの設定に集中することができます。

ここでは、ドロップダウンメニューを使用して、カートに追加ボタンを非表示または表示する場所を正確に選択できます。たとえば、除外リスト内のアイテムに対して非表示または表示することができます。除外リストは、特定の製品、カテゴリ、またはタグをまとめてグループ化できる機能です。

これにより、ストア全体ではなく、選択したアイテムのみのボタンを簡単に非表示にできます。リストにある製品にのみ特別なルールを適用できるVIPリストのようなものです。

除外リストの作成については、後述のセクションで詳しく説明します。

YITH プラグインで除外リストの製品のショップ機能を無効にする

下に進むと、製品のバリエーションで「カートに追加」ボタンを非表示にすることを選択できます。これにより、サイズや色などの複数のオプションを持つ製品を含む、すべての製品タイプでカタログモードの一貫性が保たれます。

WooCommerceページの「カートに追加」ボタンの代わりに表示されるものを決定することもできます。

スペースをすっきりと保つために、これらのオプションには「なし」を選択することをお勧めします。カスタムボタンは後で別のセクションに追加します。

YITHプラグインで商品ページのカートボタンを非表示にする

さらに下に進むと、「カタログモードでの価格設定」があります。

すべての商品の価格を非表示にするか、除外リストにある商品のみを非表示にするかを選択できます。

価格を非表示にすると、カスタムボタンに置き換えることができます。このプラグインには、「サンプルボタン1」のようないくつかの事前デザインされたボタン スタイルが含まれており、次のステップでカスタマイズします。

選択が完了したら、「オプションを保存」をクリックすることを忘れないでください。

YITHプラグインを使用して商品ページで価格を非表示にする
ステップ3:カートボタンを置き換える新しいボタンを作成する

さて、カートボタンと価格を置き換えるボタンをカスタマイズする時間です。「ボタンとラベル」タブに移動して開始してください。

YITHが提供するデザイン済みのボタンのいずれかを選択し、鉛筆の「編集」アイコンをクリックしてカスタマイズします。

YITH WooCommerce カタログモードでボタンを編集する

まず、ボタンにわかりやすい名前を付けて、後で見つけやすくしてください。

「コンテンツ」タブでは、ボタンのテキストをニーズに合ったものに変更できます。人気のある選択肢には、「見積もりをリクエスト」、「価格についてはお問い合わせください」、または「カスタム価格を取得」などがあります。

YITH WooCommerceカタログモードでボタンテキストを置き換える

アイコンを追加すると、ボタンをより魅力的にすることができます。そのためには、アイコンセクションで「デフォルトアイコンから選択」を選択できます。

利用可能なオプションを閲覧して、メッセージに一致するものを見つけることができます。

YITH WooCommerce Catalog Mode でボタンアイコンを選択する

アイコンのサイズ、配置、色を調整して、アイコンを微調整することもできます。

ページの右側にあるライブプレビューで変更が表示されるのを確認するだけです。

YITH WooCommerce カタログモードでボタンアイコンをカスタマイズする

次に、「スタイル」タブに切り替えて、ボタンの外観をカスタマイズします。

ここで、ウェブサイトのデザインに合わせて背景色、幅、境界線、パディング、マージンを変更できます。

YITH WooCommerce Catalog Modeプラグインでのボタンのスタイルのカスタマイズ

最後に、「オプション」タブでボタンのリンクを設定します。訪問者を連絡先ページまたはログインページに誘導するために、「カスタムURL」オプションを使用することをお勧めします。

ホバーアニメーションを追加して、ボタンをよりインタラクティブで見栄え良くすることもできます。

完了したら、「更新」ボタンをクリックするだけです。

YITH WooCommerceカタログモードのコールトゥアクションボタンにカスタムURLを追加する

新しいボタンを保存すると、指定された場所の標準のカートに追加ボタンが置き換えられます。

ステップ4:製品問い合わせフォームを作成する(オプション)

商品ページに直接問い合わせフォームを追加すると、顧客が価格について質問しやすくなります。これにより、連絡するために商品ページを離れる必要がなくなります。

これを設定するには、「お問い合わせフォーム」タブに移動します。「お問い合わせフォームの設定」で「すべての商品に表示」を選択します。これにより、フォームがすべての商品ページに表示されるようになります。

「表示するフォーム」オプションでは、プラグインに付属の「デフォルト」フォームを使用できます。

すでにWPFormsまたは他のフォームプラグインを使用している場合は、代わりに既存のフォームを選択できます。

YITH WooCommerce Catalog Mode プラグインで商品ページに問い合わせフォームを表示する

「デフォルト」フォームを使用する場合、表示されるフィールドをカスタマイズできます。

名前、メールアドレス、メッセージなどの必須フィールドに絞ってシンプルにすることをお勧めします。私たちの経験では、短いフォームほど多くの送信が得られます。

YITH WooCommerce Catalog Mode プラグインでフォームフィールドを有効にする

フォームが表示される場所は2つの選択肢があります。製品画像の WooCommerce タブの下、または 短い説明 エリアです。

タブオプションを選択した場合、タブのタイトルを「価格リクエスト」や「製品問い合わせ」などにカスタマイズできます。

YITH WooCommerceカタログモードで問い合わせフォームを表示する場所を選択する

「製品パーマリンクを含める」設定を有効にすることを忘れないでください。

これにより、商品のURLが問い合わせメールに追加され、顧客がどの商品について問い合わせているかを追跡することがはるかに容易になります。

WooCommerceタブと短い商品紹介のどちらを選択するか迷っていますか?

最初のオプションは次のようになります。

WooCommerceタブの問い合わせフォームの例

一方、商品詳細オプションを選択した場合、問い合わせフォームは作成したボタンのすぐ下に表示されます。

このように:

YITH WooCommerceカタログモードで作成された問い合わせフォームの例
ボーナス:除外リストの作成方法(特定のWooCommerce製品の価格を非表示にする)

次に、ストア全体ではなく、特定の製品の価格を非表示にする方法を見てみましょう。これは、ステップ 2 で除外リストを使用してカタログモードを設定済みであることを前提としています。

開始するには、「除外リスト」タブに移動し、「+除外リストを追加」をクリックします。価格を非表示にするアイテムのタイプを選択できる新しいウィンドウが開きます。

YITH WooCommerce Catalog Modeで除外リストを作成する

「アイテムタイプ」ドロップダウンには、個別商品、商品カテゴリ全体、商品タグの3つのオプションがあります。この柔軟性により、中小企業にとって意味のある方法で価格を非表示にすることができます。

次に、「製品を選択」フィールドに製品名、カテゴリ、またはタグの入力を開始します。入力すると、プラグインが一致するものを提案します。これらの特定のアイテムに問い合わせフォームを表示するかどうかも選択できます。

YITH WooCommerceカタログモードの除外リストにアイテムを追加する

「カートに追加」のカスタムオプションを使用する」と「価格のカスタムオプションを使用する」という設定に気づくでしょう。ステップ2で作成した設定を維持したい場合は、これらをチェックしないままにしておくことをお勧めします。

完了したら、「除外リストに追加」をクリックして変更を保存します。新しい除外ルールが有効になりました。

プラグインを有効にした際に、商品ページがどのようになるかの例を以下に示します。

YITH WooCommerce Catalog Modeプラグインで作成されたカスタム連絡先ボタン

WooCommerceのヒントとコツをもっと学ぶ

WooCommerceで価格なしで商品を販売する方法を学んだので、オンラインストアを最適化する他の方法についても学びたいかもしれません。より多くのヒントやトリックについては、これらの初心者向けガイドをご覧ください。

この記事で、WooCommerceで価格を非表示にする方法を学んでいただけたことを願っています。また、WooCommerceサイトに最適なWordPressテーマのリストや、WooCommerceで商品をアップセルする方法に関するガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

コメント

  1. おめでとうございます。この記事の最初のコメント者になる機会を得ました。
    質問や提案はありますか?コメントを残して、議論を開始してください。

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。