WooCommerceショップページをカスタマイズする方法–完全ガイド

公開: 2020-05-07

ショップページを編集するさまざまな方法をお探しですか？ あなたは正しい場所に来ました。 このガイドでは、WooCommerceショップページを手動で、ページビルダーを使用して、プラグインを使用してカスタマイズするさまざまな方法を学習します。

ショップページは商品を表示する場所であるため、ストアで最も重要なページの1つです。 そのため、魅力的でユーザーフレンドリーなデザインにする必要があります。

ショップページはストアの事前に設計されたコンポーネントであり、ルックアンドフィールを変更するための組み込みツールはありません。 ただし、それはまったく変更できないという意味ではありません。 このガイドでは、 3つの異なる方法を使用してWooCommerceショップページをカスタマイズする方法を学習します。

WooCommerceショップページとは何ですか？なぜそれをカスタマイズする必要がありますか？

WooCommerceで定義されているショップページは、「商品の投稿タイプアーカイブのプレースホルダー」です。 簡単に言えば、それはあなたがあなたの製品を展示するページなので、あなたのビジネスの成功に不可欠です。 編集方法に入る前に、WooCommerceショップページをカスタマイズする必要がある理由を見てみましょう。

今、あなたが何かを買うために店に入ったと想像してください。 ショッピングプロセスに対するあなたの満足度を決定するものは何ですか？ 最も重要なことの1つは、製品の配置方法と、探しているものを簡単に見つけることができることです。 私たちはインターネットのおかげで相互接続された世界に住んでいます。 そして、特に世界的大流行の時代に、ショッピングは実店舗からオンラインストアにシフトしました。 今後20年間で、すべての購入の約95％がオンラインになると予想されています。

人々はオンラインで買い物をするのは、それがより簡単でより速いからです（または少なくともそうあるべきです）。 したがって、WooCommerceショップページで商品をどのように配置し、顧客にどのように表示するかによって、大きな違いが生まれます。 コンバージョンと収益だけでなく、ショップの評判にも影響します。

ショップページをカスタマイズするメリット

全体として、WooCommerceShopページをカスタマイズすることにはいくつかの利点があります。

  • 競合他社から際立っています。 ほとんどの店舗は同じショップページを持っているので、カスタマイズすると目立ちます
  • カスタマーエクスペリエンスを向上させる
  • コンバージョン率と売上を増やす
  • SEOの改善。 デザインの編集とは別に、ショップページを編集して、顧客がGoogleで見つけたコンテンツを追加することができます

ショップページをカスタマイズする理由が理解できたので、次の質問に焦点を当てましょう。 顧客がショップページにアクセスしたときに、どのようにして顧客に良い印象を与えることができますか？ 重要なのは、購入プロセスを容易にする魅力的でユーザーフレンドリーなデザインを持つことです。 それは口で言うほど簡単ではありません。

ただし、このガイドでは、WooCommerceショップページのデザインを完全に制御する方法を紹介します。

WooCommerceショップページをカスタマイズする方法：ステップバイステップガイド

このセクションでは、3つの異なる方法を使用してショップページをカスタマイズする方法を示します。

  1. プログラムで
  2. ページビルダーで
  3. プラグイン付き

1）WooCommerceショップページをプログラムでカスタマイズする

まず、ページビルダーやプラグインに依存せずにWooCommerceショップページをカスタマイズする方法を見てみましょう。 この方法の最大の利点は、サードパーティのアプリをサイトに追加しないことです。 難しいコーディングは行わないため、これには数分以上かかることはありませんが、基本的なコーディングスキルがあればもっと良いでしょう。

ステップ1：子テーマを作成する

これまでにテーマの子テーマを作成していない場合は、作成する時期が来ています。 テーマに変更を加えてから更新すると、新しいファイルが古いファイルに置き換わり、変更が失われるため、子テーマをお勧めします。

ただし、子テーマからテーマをカスタマイズすることで、これを回避できます。 さまざまな方法を使用して子テーマを作成できます。 子テーマプラグインを使用するか、自分でコーディングできます。 両方の方法の詳細については、WordPressで子テーマを作成する方法に関するガイドをご覧ください。

ステップ2：子テーマにフォルダー構造を作成する

次に、FTPクライアントを使用してWebサイトファイルを変更します。 FTPアカウントをお持ちでない場合は、FileZillaソフトウェアをお勧めしますが、お好きなクライアントを使用できます。 子テーマを作成したら、サイトファイルに移動し、次のルートに従います： / wp-content / themes / your-theme 。

たとえば、TwentyTwentyテーマの子テーマを作成したとします。 フォルダ名は、 twentytwenty-child-themeのようなものにする必要があります。 次に、それをクリックして、 WooCommerceというフォルダーを作成します。 その後、ショップページのテンプレートファイルであるarchive-product.phpというファイルを作成します。 ストアにWooCommerceショップページを作成しましたが、空白なので、コンテンツを追加する必要があります。

ステップ3：ショップページのコンテンツを作成する

archive-product.phpのテキストエディタで書いたものはすべてショップページに表示され、顧客に表示されることに注意してください。 ここでは、コーディングを使用して、ショップページで魔法を働かせることができます。 ただし、その方法がわからない場合は、次の手順に進んでください。

ステップ4：ショップページテンプレートを作成する

WooCommerceショップページを最初から作成する代わりに、既存のテンプレートを使用してそれを適応させることができます。 このためには、親テーマに戻り、 single.phpまたはindex.phpファイルを探します。 2つのうちのいずれかが表示された場合は、それをコピーして、手順2で作成したWooCommerceフォルダーに貼り付けます。両方のファイルが表示された場合は、 single.phpをコピーします。 次に、 archive-product.phpファイルを削除し、ここに貼り付けたファイルの名前をarchive -product.phpに変更します。

これにより、投稿テンプレートファイルをショップページとして使用しますが、製品ページのように見えます。 ただし、これは理想的ではありません。 WooCommerceのショップページを商品ページではなくショップページのように見せたいと考えています。 それをカスタマイズするために、いくつかのショートコードを使用します。

ステップ5：ショートコードを使用してショップページをカスタマイズする

まず、製品を列または行に分割します。 たとえば、最大6つの商品の2列に商品を表示する場合は、次のコードをarchive-product.phpファイルに貼り付ける必要があります。

 [ products limit="6" columns="2" ]

方法がわからない場合は、次の手順に従ってください。

  • archive-product.phpファイルを開きます
  • <main id =“ main” class =“ site-main” role =“ main”>と</ main> <！– #main –>の間のテキストを削除します。 これらの2行のコードを削除するのではなく、それらの間にあるものだけを削除する必要があることに注意してください
  • このコード行を、削除したばかりのスペースに追加します。
     <？php echo do_shortcode（ '[ products limit="6" columns="2" ]'）？>
  • 変更を保存します
  • おめでとう！ 新しいWooCommerceショップページを作成しました。

最も人気のある製品を表示する

WooCommerceでショップページをプログラムでカスタマイズするためにできることの別の例を見てみましょう。 最も人気のある商品を表示したいとします。 そのために、次のショートコードを使用します。

 [ products orderby="popularity" ]

ファイルテーマのarchive-product.phpファイルを見つけて、次のコードを貼り付けます。

 do_action（ 'woocommerce_before_shop_loop'）;
echo '<h1>最も人気のある!! </ h1>';
do_shortcode（ '[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'）; do_action（ 'woocommerce_after_shop_loop'）;

ご覧のとおり、2つの製品を1つの2列の行（columns =” 2” limit =” 2”）に表示しますが、これらの数値は最適な数値に調整できます。

同様に、一流の製品、最も売れている製品などを表示できます。 ショートコードまたはコーディングを使用してショップページを試してカスタマイズし、ビジネスに最適なルックアンドフィールを提供することをお勧めします。

少しコーディングしてストアをカスタマイズする方法の詳細については、WooCommerceショップページをプログラムで編集する方法に関するガイドをご覧ください。

2）ページビルダーでWooCommerceショップページをカスタマイズする

前の方法は時間を節約できますが、コーディングスキルがない人にとっては難しいかもしれません。 そのため、ここでは、テーマのファイルを変更せずにトリックを実行するためのより簡単な方法を紹介します。 このセクションでは、ページビルダーを使用してWooCommerceショップページをカスタマイズする方法を学習します。 ページビルダーを使用すると、ショップページのデザイン、レイアウト、製品タイプ、および表示する製品を変更できます。

その上、コードを記述したり、テーマファイルを変更したりする必要はありません。 Elementor、Visual Composer、Divi、またはその他のページビルダーを使用しているかどうかに関係なく、このメソッドはそれらすべてと互換性があります。

注：コードを1行も記述する必要はありませんが、WooCommerceのショートコードに精通している場合は役立ちます。 私たちのショートコードガイドは良い出発点です。 それでは、ページビルダーを使用してショップページをカスタマイズする方法を見てみましょう。 これを行うには、2つの主要なステップがあります。

  1. ページビルダーで商品を表示するページを作成する
  2. そのページをショップページにする

ステップ1：ページビルダーでリストページを作成し、コンテンツで埋める

みなさんはページビルダーに精通していると思いますので、ここではその使い方を説明しません。 このガイドでは、ページビルダーとしてElementorを使用します。 最初に行う必要があるのは、新しいページを作成することです。

ページビルダーでWooCommerceショップページをカスタマイズする

通常、WooCommerceショップでは、注目のベストセラー商品や新着商品を展示します。 ここでは、注目のベストセラー商品を掲載したショップページを作成します。

WooCommerceショップページの注目商品とベストセラー商品をカスタマイズする

それでは、ページにコンテンツを追加しましょう。 これを行うために、いくつかのWooCommerceショートコードを使用します。 表示したい商品のカテゴリに応じて使用できるショートコードはたくさんあります。 これらは便利になるもののいくつかです：

  •  [ featured_products ]
  •  [ best_selling_products ]
  •  [ top_rated_products ]
  •  [ sale_products ]
  •  [ product_table ]
  •  [ recent_products ]
  •  【 products 】

この例に従って、注目の商品をショップページに追加します。

ショートコード。 これをする：

  • WordPress管理ダッシュボード>製品ページに移動します。 右側の星のアイコンをクリックして、注目の製品を選択します。

  • 編集ページから、テキストエディタを注目製品の下にドラッグします。

  • をコピーします
    [ featured_products ]

    ショートコードしてそこに貼り付けます。

  • [更新]をクリックすると、以下に示すように製品が表示されます。

そのように、ベストセラーの場合は、

 [ best_selling_products ]

ショートコード、最近公開された製品には使用します

[ recent_products ]

等々。 ショップページに表示する商品の種類はあなた次第です。 また、次のようなショートコード属性が必要になる場合があることにも注意してください。

  • 列数を設定する
  • 表示される製品の数を制限する

たとえば、最大6つの製品を2列表示する場合は、次のように使用します。

 [ products limit="6" columns="2" ]

ショートコードは非常に強力で、非常に使いやすいです。 したがって、WooCommerceのショートコードに関するガイドを確認して、それらを最大限に活用することをお勧めします。

ステップ2：新しく作成したページをショップページにする

新しいページを作成したら、それをWooCommerceショップページにする必要があります。 これを行うには、子テーマをインストールすることをお勧めします。 まだ作成していない場合は、これらの子テーマプラグインのいずれかを使用することをお勧めします。 ここでは、子テーマをインストールして作成したと仮定して続行します。

  • 新しく作成したページのURLを取得します
  • WordPressダッシュボードに移動します
  • [外観]> [テーマエディター]をクリックし、ポップアップが表示されたら[理解する]をクリックします
  • その後、右側のテーマ関数ファイルにアクセスできるページに移動します

  • 関数.phpファイルをクリックし、その最後に次のコードを貼り付けます。
 add_action（ 'template_redirect'、 'quadlayers_redirect_woo_pages'）; function quadlayers_redirect_woo_pages（）
{{
    if（function_exists（ 'is_shop'）&& is_shop（））{
        wp_redirect（ 'https://www.quadlayers.com/shop/'）;
        出口;
    }
}

重要：何も削除せずにコードをそのままコピーして貼り付け、 wp_redirect （ '[yourURL]'）内のURLを忘れずに置き換えてください。次に、ファイルを更新します。これで完了です。 カスタマイズされたWooCommerceショップページを作成しました。

3）プラグインを使用してWooCommerceショップページをカスタマイズする

このセクションでは、プラグインを使用してWooCommerceのショップページをカスタマイズする方法を学習します。 そこにある最高のもののいくつかは次のとおりです。

  1. WooCustomizer
  2. WC製品テーブル別のWooCommerce製品テーブル（無料およびプレミアム）
  3. Barn2によるWooCommerce製品テーブル（プレミアム）

このセクションでは、無料ツールとプレミアムツールの両方を使用してショップページを編集する方法を説明します。

3.1）WooCustomizer

WooCustomizerは、WooCommerceショップページをカスタマイズするための優れたプラグインです。 数回クリックするだけで、商品、カート、ユーザーアカウント、チェックアウトページを編集できます。 このプラグインには多くの機能があり、WooCommerceストア全体をパーソナライズできます。 ショップページのカスタマイズオプションに焦点を当てると、WooCustomizerを使用して次のことができます。

  • 20以上の設定でショップページを編集して選択する
  • WooCommerce Shop、アーカイブ、および製品ページから要素を削除または編集します
  • ショップと製品のページからWooCommerceブレッドクラムを削除します
  • カートページのクーポンセクションやカートクーポンドロップダウンのテキストなど、ショップページの要素を削除または編集します
  • ショップページにAJAX製品検索バーと製品クイックビューポップアップを追加します
  • ショップページの行とページごとの商品数をカスタマイズする
  • ショップページとアーカイブページに表示される列数を変更する
  • 商品のクイックビューを追加して、顧客がショップページから商品を表示できるようにします
  • ショップページを編集し、セールバナーをアーカイブします
  • そしてもっとたくさん

WooCommerceショップページのカスタマイズ-WooCustomizer WooCustomizerがWooCommerceページまたはテンプレートを上書きしないことは注目に値します。 編集する要素のテーマに追加のスタイリングオプションを追加するだけです。 WooCustomizerにはWooCommerceショップページを編集するための機能がたくさんありますが、使い方も非常に簡単です。 このツールは用途が広く、何もコーディングしなくてもストアをより細かく制御できます。

最後に、WoooCustomizerはフリーミアムツールです。 基本機能を備えた無料バージョンと、年間29米ドルから始まるより高度な機能を備えた3つのプレミアムプランがあります。

3.2）WC製品テーブルによるWooCommerce製品テーブルLite

WooCommerce Product Table（WCPT）は、製品テーブルのレイアウトを簡単に作成できる優れたプラグインです。 5つのうち4.9の評価と5,000以上のアクティブなインストールで、WooCommerceのショップページを編集するためのトップツールの1つです。

WC ProductTableはフリーミアムツールです。 基本的な機能を備えた無料バージョンと、より強力な機能を含むプロプランがあり、年間49米ドルの費用がかかります。 ここでは、ライトバージョンの使用方法を示してから、プロプランのヒントをいくつか紹介します。

ステップ1：任意のページにWCPTを作成する

まず、プラグインをダウンロードしてアクティブ化する必要があります。 その後、ダッシュボードのサイドバーに製品テーブルが表示されます。 それをクリックし、[新しいテーブルの追加]を押すと、テーブルを作成できるページが表示されます。

プラグインでWooCommerceショップページをカスタマイズする

ご覧のとおり、以下を指定する必要があります。

  • テーブル名：この例では、 Product Table01と呼びます。
  • 製品カテゴリ：[クエリ]タブの下に、現在のカテゴリが表示されます。 テーブル用に1つ選択してください

  • 列情報：次に、[列]タブに移動します。 ここでは、必要なテーブルを描画する必要があります。 必要な列の数を決定してから、各列を設計する必要があります。 WC製品表には、ラップトップだけでなく、電話やタブレットのカラムのオプションもあります。 そのため、見出し、セルテンプレート、デザイン（フォント、配置、フォントの色、背景色など）など、デバイスの種類ごとに必要なすべてのオプションを指定できます。

必要な列を作成したら、[設定の保存]をクリックして、すべての設定を行います。

ステップ2：テーブルを新しいページに貼り付ける

ショートコードを使用すると、手順1で作成したテーブルを好きな場所に表示できます。 ショートコードをコピーするだけです。

プラグインとショートコードでWooCommerceショップページをカスタマイズする

それでは、ショートコードを使用して新しいページにテーブルを表示しましょう。 この時点で、あなたは新しいページの作成に精通していると想定できます。 したがって、ページビルダーを使用して、[ページ]> [新規追加]をクリックし、名前を付けます。 たとえば、マイショップページ2 。 Elementorを使用している場合は、次のように表示されます。

テキストエディタを下にドラッグして、コピーしたショートコードをそこに貼り付けます。

これで、商品テーブルスタイルのページが作成されます。

ステップ3：顧客を新しいショップページにリダイレクトする

顧客を新しいショップページにリダイレクトするには、リダイレクトプラグインが必要です。 このツールは、顧客をデフォルトのWooCommerceショップページからステップ2で作成した新しいページにリダイレクトします。これらのプラグインのほとんどは、単一目的であり、非常に使いやすいものです。 ここでは、最も人気のあるリダイレクトプラグインの1つであるリダイレクトを使用しますが、同様のツールであればどれでも機能します。

プラグインとリダイレクトを使用してWooCommerceショップページをカスタマイズする方法

プラグインをアクティブ化した後、 [ツール]> [リダイレクト]に移動すると、次のメッセージが表示されます。

  • ソースURLに、デフォルトのショップページのリンクを貼り付けます
  • ターゲットURLに、新しく作成したショップページのリンクを貼り付けます
  • 次に、[セットアップの開始]をクリックします
  • それでおしまい！ これが、無料のプラグインを使用してWooCommerceショップページをカスタマイズする方法です。

注：検索エンジンは通常リダイレクトの原則を優先しないため、この方法を使用するとSEOの結果に影響を与える可能性があることに注意してください。

PRO-TIP

SEOに影響を与えたくない場合は、WooCommerce ProductTableプラグインのプロバージョンを使用できます。 より高度な機能に加えて、アーカイブオーバーライド機能も付属しています。

この機能を使用すると、ショップページだけでなく、属性、カテゴリ、タグ、検索などのアーカイブページでも、デフォルトのWooCommerceグリッドを商品テーブルに置き換えることができます。 この機能を有効にするには、 [WPダッシュボード]> [製品テーブル]> [設定]> [アーカイブの上書き]に移動します。

3.3）Barn2によるWooCommerce製品テーブル

ショップページを編集するためのもう1つの優れたオプションは、Barn2のWooCommerce ProductTableプラグインです。 これは、年間89米ドルから始まり、非常に使いやすいプレミアムツールです。 このアドオンは、商品をテーブルレイアウトで一覧表示し、ショップページに挿入するのに役立ちます。 この方法を使用すると、ショップページのデフォルトのデザインをテーブルに変換できます。

ステップ1

まず、WooCommerce ProductTableプラグインをインストールしてアクティブ化します。 次に、[ WooCommerce ]タブに移動し、[設定]> [製品]をクリックします。 [製品]タブの下に、[製品テーブル]セクションが表示されます。 ここに、プラグインの購入時に取得したプラグインのライセンスキーを入力します。

ステップ2
  • まず、指定されたショップページとカテゴリページに商品テーブルを追加します
  • プラグインの設定ページ>テーブル表示に戻り、製品テーブルレイアウトの場所を選択します

  • ティックショップページ
  • 次に、すべての製品カテゴリページ、製品税アーカイブ、および検索結果に製品テーブルを表示する場合は、[製品カテゴリアーカイブ]にチェックマークを付けます。
  • 変更を保存します
ステップ3

必要に応じてテーブルに変更を加えます。 WooCommerce製品テーブルの設定ページは非常に直感的です。 WC ProductTableによるWCProduct Tableとは異なり、Barn2ツールでは、各列を作成および構成するように求められないため、使いやすくなっています。

ボーナス：WooCommerceショップページの空白の問題を修正する方法

空白のショップページは、WooCommerceで最も一般的な問題の1つです。 ショップページに商品が表示されない理由はたくさんありますが、ここでは最も一般的な問題を解決する方法を紹介します。

  • ショップページの設定： WooCommerce>設定>製品に移動し、ショップページの下で正しいページを使用していることを確認します
  • プラグインの互換性：プラグインによって競合が発生し、ショップページが空白で表示される場合があります。 これを修正するには、すべてのプラグインを非アクティブ化し、問題の原因となっているプラ​​グインを確認します
  • パーマリンク： [設定]> [パーマリンク]に移動し、保存してパーマリンクを更新します
  • カタログの可視性：カタログの可視性が正しく設定されていることを確認してください。 WooCommerce> Productsに移動し、製品が非表示に設定されていないことを確認します

これらの問題の詳細については、WooCommerceショップページの空の問題を修正する方法に関するガイドをご覧ください。

ボーナス2：ショップページにカテゴリを表示する

ショップページにカテゴリを表示すると、商品をより適切に整理し、ユーザーが探しているものを見つけるのに役立ちます。 ショップページにカテゴリを表示する方法は3つあります。 このセクションでは、WooCommerceのデフォルトオプションを使用してそれを行う方法を示します。

まず、ダッシュボードで、 [外観]> [カスタマイズ]に移動し、[カスタマイザー]サイドバーの[WooCommerce]> [製品カタログ]に移動します。 次に、ショップページの表示を使用して、カテゴリを表示するか、カテゴリと商品を表示するかを選択します。

さらに、[カテゴリ表示]オプションを使用して、製品カテゴリページで製品サブカテゴリと製品を表示/非表示にすることができます。 変更をリアルタイムでプレビューできます。終了したら、[公開]をクリックして変更を保存します。

この方法は適用するものですが、あまり制御できません。 柔軟性を高める別の方法については、WooCommerceShopページにカテゴリを表示する方法に関するガイドをご覧ください。

最初のステップ

3つのカスタマイズ方法のいずれかを実行する前に、子テーマを使用することを強くお勧めします。 プラグインを使用することも、プログラムで作成することもできます。 子テーマは親テーマのすべてのデザイン要素を継承するため、そのテーマのコピーを使用して安全性を高めることができます。 どうして？ 親テーマのファイルを直接編集する場合、テーマを更新するとすべての変更が上書きされるためです。

子テーマを使用すると、更新後にデータを失うことなくファイルを変更できます。 さらに、賢明なサイト所有者は、元のテーマファイルをいじることは決してありません。 それとは別に、ショップページはWooCommerceのプリセットページであるため、すべてのWordPressテーマと互換性があることに注意してください。 ただし、3つの方法のうち2つで子テーマを使用することをお勧めするため、互換性の問題が発生する可能性があります。 その場合は、サードパーティの問題についてWooCommerceのドキュメントを参照してください。

結論

全体として、ショップページのデザインと商品の表示方法は、コンバージョンに大きな影響を与える可能性があります。 WooCommerceでは、ショップページが事前に作成されており、レイアウトを編集するためのオプションがいくつかありますが、それらはかなり制限されています。

したがって、このガイドで説明されている3つの方法のいずれかを使用してカスタマイズすると、群衆から目立つようになります。 さらに、それはあなたのビジネスをよりよく表し、あなたの顧客にプロ意識を示します。 3つの異なる方法を使用してショップページをカスタマイズする方法を示しました。

  • 手動で
  • ページビルダーを使用
  • プラグイン付き

それらのすべてに長所と短所がありますが、それらはすべて仕事を成し遂げるので、あなたのニーズとスキルに最も適したものを使用してください。 コーディングのスキルがない場合は、ページビルダーまたはプラグインを使用してショップページを編集できます。 使いやすく、ストアを最適化するための多くの機能を提供し、無料バージョンがあるため、WooCustomizerをお勧めします。

最後に、ソーシャルメディアで強い存在感を示している場合は、FacebookショップをWooCommerceに接続することを検討する必要があります。 このようにして、製品カタログをFacebookにアップロードして、ユーザーが製品を表示し、サイトのチェックアウトページに直接アクセスして購入を完了することができるようになります。 ストアの他のセクションをカスタマイズする場合は、次のガイドをご覧ください。

  • WooCommerceでマイアカウントページをカスタマイズする方法
  • WooCommerceの[カートに追加]ボタンをカスタマイズします
  • WooCommerceチェックアウトを編集する方法（コーディングとプラグイン）
  • WooCommerceでマイアカウントページを編集する
  • DiviでWooCommerce製品ページをカスタマイズする方法

それを最大限に活用し、WooCoommerceショップページを最適化する時が来ました。 これらの方法のいずれかを試しましたか？ あなたはどちらが好きですか？ ご意見、ご不明な点がございましたら、お気軽にお問い合わせください。