WooCommerce商品ページのカスタマイズ方法

WooCommerceの商品ページとは？

WordPressサイトへのインストール WooCommerceプラグインそうすると、全商品を掲載できるショップページが即座に作成されます。訪問者がカタログの商品をクリックすると、対応する商品ページに移動します。このページのレイアウトはテーマによって大きく異なりますが、商品に関する基本的な情報が掲載されます。 

WordPressのダッシュボードには、次の方法でアクセスできます。製品」タブで製品を探し、次の項目を選択します。「製品の編集「をクリックして、この情報を追加または編集してください。または、"新規追加新しい製品を作るための「製品」。

まず、商品のタイトルと商品説明.右側には、商品画像を添付することができます。

までスクロールすると製品データセクションをご覧ください。子会社製品.ここでは、出荷設定、属性、リンク商品（クロスセリング用）なども設定できます。

このページでは、商品のカテゴリーを選択したり、タグを追加したりすることも可能です。これらの機能により、お客様はより簡単に商品カタログを閲覧することができます。 

製品の設定が完了したら「リニューアルボタンフロントエンドのデフォルトの商品ページを以下に示します：

上を見てわかるように、このWooCommerceの商品ページにはオンラインで商品を販売するための基本的な機能が含まれています。サイトのフロントエンドに表示されるテンプレートはすべての商品で同じであることに注意することが重要です。

WooCommerceの商品ページをカスタマイズする3つの方法

それでは、WooCommerceの商品ページをカスタマイズする3つの方法を見ていきましょう！

1.サイトエディターの使用

WordPressの魅力は、そのネイティブな機能が初心者にとって完璧であることだ。WordPressのサイトエディターコードの書き方を知らなくても、WooCommerceで美しいカスタム商品ページを作成できます。

サイトエディターを使って、WooCommerceブロックを使ってオンラインショップをカスタマイズすることができます。自分のブロックを持つこれにはフィルター、検索バー、トップセラーその他の要素

サイトエディターはブロックエディタよく似ている。しかし、後者はウェブページ歌で応えるブログ記事でもサイトエディター可能カスタム・グローバル要素例えばヘッダーとフッター歌で応える WooCommerce商品ページテンプレート. 

銘記ブロックテーマでのみ使用可能サイトエディター.Classicテーマを使用している場合は、このガイドを参照して第3の方法.

また、各商品ページのコンテンツには"製品"タブを開き、バックエンドエディタでプロジェクトを開いて修正します（先に示したように）。私たちがしたいことは、WooCommerce商品ページのページコンポーネントとスタイルをカスタマイズすることです。

まず外観 → エディターをクリックしてください。テンプレート.

までスクロールしてください。WooCommerceセクションで単品テンプレート

次に、鉛筆のアイコンをクリックして、エディタでテンプレートを開きます。

まず、テンプレートがグレーであることがわかる。

テンプレートエリアをクリックすると、テンプレートをブロックに変換するよう促されます。をクリックしてください。「ブロックに変換ボタンをクリックしてください。

WooCommerceの商品ページがブロックを使って編集できるようになりました。

不慣れな場合 ワードプレスブロックもしかしたらサイトエディターこのページを微調整する便利な方法がいくつかある：

ページレイアウトの変更

ページレイアウトを調整するには大きい方のブロックをクリックし、親ブロックを選択する。.

横のメニューには、その部分を左右に移動できる矢印が表示されるはずだ。

ブロックやブロック群を上下に動かすことも可能だ。

さらに、ブロックを追加するには、ブロックを挿入したい場所にカーソルを合わせて加号.

レイアウトを変更したい場合は、列やグループのブロックを追加するのが望ましい。

テンプレートレイアウトを選択し、ブロック設定を開くことで、グローバルな変更を加えることも可能です。

あるオープニングその下で、デザインの配置や位置を変更することができます。また、"タッキネス"要素を使用しています。これは、訪問者がページをスクロールしても消えないことを意味します。

変更内容に問題がなければ、画面上部をクリックします。「保存」ボタン。

色とフォントの変更

製品ページカスタムフォントと色で、デザインが視覚的なブランディングと一貫していることを確認することができます。 

サイトエディターで色を変更するには、編集する要素を選択し、右側に開きます。ブロックセッティング.

変更できる要素はブロックによって異なりますが、通常はテキスト、背景、リンクの色を変更できます。

デフォルトでは、テーマのデフォルトカラーから選択することが可能です。

色を選択しない」をクリックした場合リージョンのカラーピッカーが表示されます。

ここでは、マウスをドラッグして色を選択することができます。コントラストの悪い色が選択された場合はウェブサイト編集者ヒントもあるだろう。

特定のHEX、HSLまたはRGBカラーコードを入力することもできます。これは、会社の色と正確に一致するため、最良のオプションです。

ある「タイプセット」オプションカードでは、文字サイズを小、中、大などに変更できます。

その他のフォント設定にアクセスするには、"Typography "をクリックしてください。3つの点が隣り合っている。

ここにはたくさんのオプションがあります。クリックして選択しタイポグラフィメニュー

これらの設定が不要な場合は、いつでも選択を解除することができます。

新しいブロックの追加

商品ページに要素を追加したいですか？サイトエディターを使えば可能です。

例えば、サイト全体のプロモーションを行う場合、テンプレートの上部にバナーブロックを追加することができます。

あるいは、次のようなことも考えられる。より簡単なナビゲーション検索ブロックをページに追加することができます。

複数のタイプの商品ページを作成する

上記のように、サイトエディタでWooCommerce商品ページテンプレートをカスタマイズする方法はいくつかあります。変更した内容はすべてのWooCommerce商品ページに反映されます。

小売業であるため、特定の商品タイプやカテゴリー用に独自のテンプレートを作成する必要があります。例

• 新製品リリースこれから発売される新商品のために、ユニークな商品ページを作りましょう。
• ホリデー・プロモーションホリデーシーズンに商品カテゴリーのセールスページを作成する。

これにより、ページがより適切で魅力的なものになる。

目的別に複数のテンプレートを作成するには外観 → 編集 → テンプレート.次に、プラス記号をクリックして新しいテンプレートを追加し個別項目：製品.

これにより、新しい商品ページテンプレートが作成されますが、1つの商品についてのみ作成されます。メニューから希望の商品を選択し、サイトエディターを起動します。

デフォルトでは、システムは既存のスキーマを要求します。望ましいオプションは、一般的な商品ページテンプレートです。

既存のパターンを使えば、デザイン・プロセスをスピードアップできる。しかし、ゼロから始めるのであれば、このステップは省略できる。

に戻ると、次のようになる。テンプレート画面でもう一度プラス記号をクリックし、新しいテンプレートを追加すると、以下の選択が表示されます。のカテゴリー（product_cat）である。オプション

このテンプレートは、アクセサリー、衣類、装飾品などの特定のカテゴリーに適用されます。 

カテゴリーを選択するだけで、テンプレートの構築が開始されます。"個別アイテム：商品 "でのステップオプションは同じだ。

2.WooCommerceエクステンションの使用

ブロックテーマを使用する場合、サイトエディターはコードを1行も触ることなく、WooCommerceの商品ページテンプレートをさまざまな方法でカスタマイズすることができます。 

しかし、ページの機能を拡張することはできません。幸いなことに、技術力のない初心者でもこれを実現できるWooCommerce拡張機能がたくさんあります。 

このセクションでは、新機能を使用して商品ページを変更できるツールをいくつか紹介します。便宜上、これらの拡張機能を3つのユースケースに分けています：高度な商品の作成、WooCommerce商品ページの最適化歌で応える売上の増加.

高度な製品の創造

オンラインWooCommerceショップがカスタム製品やプレミアム製品のバリエーションを提供する場合、これらのアイテムの販売を促進するためにWooCommerceエクステンションが必要です。以下、一緒に見ていきましょう。

高度な製品バリエーション

WooCommerceはデフォルトで可変商品を作成することができますが、これらの項目の設定は少し制限されることがあります。 

多数の異なるスタイル、色、サイズの商品が提供されている場合は、以下の使用を検討してください。高度な製品バリエーション拡張。これにより、商品のバリエーションをより効果的に表示することができ、顧客が選択肢をより理解しやすくなります。

例えば、グローバルプロパティを設定して、バリアントサンプルを作成することが可能です。これらのサンプルは、異なる色、画像、ビデオ、テキストを表示することができ、効果的な製品プレゼンテーションを作成することができます。 

さらに、この拡張機能はバリアントライブラリをカスタマイズし、利用可能なオプションを明確に表示するテーブルを作成することができます。

WooCommerceプロダクトデザイナー

例えば、特注品の場合、以下のことが必要となる。WooCommerceプロダクトデザイナーこのようなツールです。この拡張機能は、ページに"カスタマイズ製品「ボタン

お客様は、画像、クリップアート、図形、テンプレートを商品に追加することができます。デザインページから直接ショッピングカートに追加することもできます。また、印刷可能なファイルも作成できるので、カスタマイズされたアイテムの生産が容易になります。

複合製品

複合製品は、複雑な注文を扱うオンラインショップに最適な強力な拡張機能です。複数のパーツを含む商品の設定をサポートし、ワークフローを簡素化し、可能な限りユーザーフレンドリーにします。

コンポジット・プロダクツの優れた点は、製品パッケージのサポートが組み込まれていることです。つまり、顧客が独自の製品を作成する際、カタログに掲載されているすべての利用可能なアイテムから選択することができます。

WooCommerce用数式価格計算機

カスタマイズ製品の中には、生地や木材を追加するなど、より多くのリソースを必要とするものがあります。このような商品の商品ページを作成するのは、適切なツールがなければ論理的に困難です。

このような製品を販売する伝統的な方法は、顧客に接触して見積もりを出すことだ。しかし、これでは販売プロセスがかなり遅くなってしまう。事実。買い物客がカートを放棄する理由のトップひとつは、注文の総コストを前もって計算できないことだ。

それは計算式によるWooCommerce拡張価格どこで役に立つかこのツールを使って、計算式やルールを持つフィールドを追加し、商品の最終価格を計算することができます。これは、長さ、体積などのユニークな測定に対応することができます。 

WooCommerceホールセール

大量の在庫をお持ちの場合は、商品を卸売りしてください。卸売りこのエクステンションには、使い始めるのに必要なものがすべて揃っている。

複数のホールセールユーザーロールを作成・管理し、ロールベースの価格を設定することができます。また、ドラッグ・アンド・ドロップで登録フォームを作成することができ、ホールセール・アプリケーションを作成することができます。

また、通常の顧客から卸売商品と価格を隠すオプションもあります。売上、返金、注文などのレポートを表示する卸売りダッシュボードもあります。このようにして、あなたのWooCommerceホールセールビジネス調子はどうだ。

商品ページの最適化

製品を販売するために必要なスキルを有する最低限の機能バイタル。しかし、もしあなたがコンバージョン率の高い商品ページそれは、面白みを加えることができる。

WooCommerceの商品ページを改善するのに役立つエクステンションをいくつかご紹介します。

WooCommerce用360°画像

家電製品や家具のような大型商品を購入する場合、顧客は、その店まで足を運びたいと思うかもしれない。チェックアウトページ商品について事前にできるだけ詳しく知る。 

包括的な製品仕様、静止画、動画は大いに役立ちますが、360°画像を提供することで、製品に命を吹き込むことができます。 

すべてのアングルを取る時間があれば商品の撮影。 WooCommerce用360°画像は、この便利な視覚効果を作成するのに役立ちます。このエクステンションはとてもユーザーフレンドリーで、反応が速いです。 

また、ナビゲーション・コントロールを備え、フルスクリーン・モードを提供することで、顧客は御社が提供する商品についてよく理解することができます。

WooCommerceワンページ・チェックアウト

長くて複雑なチェックアウト・プロセスは、顧客がショッピング・カートを放棄する主な理由である。つ。したがってWooCommerce One Page Checkout さあ！プロセスを簡素化する。

その名の通り、このエクステンションは買い物客を直接購入に導くカスタム商品ページを構築します。買い物客は新しいページがロードされるのを待つことなく、ショッピングカートに商品を追加したり、ショッピングカートから商品を削除したり、支払いを完了することができます。

このツールは、商品数が少ないウェブサイトや、マーケティングキャンペーンに関連したターゲットランディングページに最適です。 

WooCommerceタグマネージャ

さて商品説明が売上を伸ばす.加えて。製品ベースの検索エンジン最適化（SEO）それはすべてのeコマースショップにとって非常に重要です。商品説明は、キーワードを統合し、検索結果でウェブサイトのパフォーマンスを向上させる有機的な機会として活用することができます。

製品販売の拡大 

それでは、伝統的なマーケティング手法とより繊細なマーケティング手法を使って、WooCommerceの売上を伸ばすのに役立つツールをいくつか紹介しよう。

プロモーション・フラッシュ・プロ

危機感の醸成コンバージョンを増やすのに役立ちます。私たちがよく使う方法は、期間限定のオファーを実施することです。

セール・フラッシュ・プロWooCommerceの商品ページにこの機能を追加し、サイト上でこれらのセールを強調するカスタマイズ可能な方法を提供します：商品をより魅力的に見せるために、元の価格とセール価格を表示するなど。

ウィッシュリスト

予約する40%のオンラインショップが、ウィッシュリストを提供した方がより良いユーザー体験を提供できると回答している。この割合が非常に高いことを考えると、すべてのオンラインショップはこの機能を優先事項リストに加えるべきだろう。

ウィッシュリスト完全なプライバシー・コントロールと無制限のウィッシュリスト作成機能を顧客に提供する。顧客はサイトへの登録を心配する必要がない。ゲストIDウィッシュリストを保管しておく。

製品推薦

全体の収益を増やしたいのであれば、関連商品を勧めるアップセリングやクロスセリング戦略は、最も効果的な方法のひとつです。

利用する製品推薦この拡張機能は、自動的に顧客にスマートな提案を提供することができます。例えば、このツールは、同じカテゴリーの関連商品や、一緒に購入されることの多い商品を表示することができます。

買い物客の最近の閲覧履歴をもとに、おすすめの商品を自動的に生成することができます。また、便利なレポートにより、最も効果的な紹介戦略.

製品アドオン

製品アドオンとはAOVの増加もうひとつの賢い方法。これは、小規模なブティックやオンラインショップで、注文に対して高度なパーソナライズを提供できる場合に有効だ。

お飾りアドオンエクステンションは、いくつかの簡単なステップでこれを行うのに役立ちます。ドロップダウンメニュー、テキストボックス、チェックボックス、サンプル画像などは、これらのアドオンを統合するために使用できます。 

このツールを使用すると、製品アドオンをグローバルまたは個々の製品に適用することができます。さらに、この拡張機能は、次のような他の一般的なツールと互換性があります。WooCommerce サブスクリプション歌で応えるWooCommerce予約.

製品パッケージ

ショップのカタログに掲載されている商品の数が少ない限り、その商品を商品バンドルを追加しました。WooCommerceはデフォルトではこの機能を提供していませんが製品バンドルそれを手に入れるための延長戦。

このツールは、シンプルで可変的なWooCommerce製品をバンドルすることができます。オプション商品を推薦したり、ボリュームディスカウントを提供することもできます。さらに、バンドルとバンドル商品の外観をカスタマイズすることも可能です。

この拡張機能は、物理的な商品と仮想的な商品の両方に対応していることも注目に値する。以下の用途に使用できる。オンラインプログラム歌で応える定期購読およびその他の商品.

3.カスタムコードの使用

カスタムコードを使用して商品ページを変更することも可能です。もしデフォルトテーマ使用不可サイトエディターこの方法は特に有効だ。 

銘記ウェブサイトのテーマファイルを直接修正するのは、デリケートな作業です。技術的な専門知識がなければウェブサイトへのダメージそしてダウンタイムを引き起こす。 

このことを念頭に置いて、手術を進める前に次のことを確認する必要がある。WooCommerceショップをバックアップする.カスタム設定を試すには、ステージングサイトを使用するのがベストです。 

その後、変更を有効にする準備ができたらWordPressの子テーマ.こうすることで、親テーマを更新してもカスタム設定は失われません。

現在、WooCommerceの商品ページは、以下のいくつかの方法でカスタムコードを使用して変更することができます。

カスタムCSSの使用

コードを使用してWooCommerce商品ページのスタイルをカスタマイズしたい場合。カスケーディングスタイルシートこれが最良の選択だ。色、フォント、リンクなどを変更する機能があります。 

そのためにはいくつかの方法がある。見てみよう。

サイトエディターで

サイトエディターを使って商品ページにCSSを追加するには外観 → 編集 → スタイル → 追加CSS.

コードは追加CSSボックス。

例えば、商品タイトルの色を変更したい場合は、次のようにします。コード・スニペット

h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {.

    color: #ffffff.

    product_title { color: #ffff; letter-spacing: 1px；

    margin-bottom: 10px !important；

}

ffffff」を好きなカラーコードに置き換えるだけ。 

また、フォントサイズを変更したい場合はこのCSSコード・スニペット::

.woocommerce div.product .product_title { font-size: 25px; }.

念のためポスト変更を加えるだけだ。

もちろん、これらはほんの一例に過ぎないが、チャンスは無限にある。もっと詳しく知りたい方はWordPress CSSドキュメント.

カスタマイザーで

テーマが完全なサイト編集をサポートしていない場合、CSSコードをカスタマイザーに追加する必要があります。これを行うには外観 → カスタマイズ → 追加CSS.

CSSはサイトエディターと同じ機能を持っています。

サブトピックのスタイル.css論文

WordPressでCSSを追加できる最後の場所は、テーマのスタイル.cssファイルを作成する必要があります。ここでも、更新時に変更が失われないようにするために、子テーマの使用が必要です。

切り替える外観 → テーマファイルエディタ.

デフォルトではスタイル.css書類.そうでない場合は、画面右側のテーマペーパーメニューから選んでください。

その後、任意のCSSをファイルの一番下に追加することができる。終わったら、更新するだけです。

PHPの使用

CSSはWordPressの見た目を変えるには最適ですが、WooCommerceの商品ページに機能を追加することはできません。 

コードを使って手動でこれを実行するには、PHPを使う必要がある。functions.phpファイルまたはコードスニペットなどのプラグインがある。

経験豊富なWordPressユーザーの方は、以下のオプションをお試しください：

WooCommerceフック（アクションとフィルター）

WooCommerceの要素を手動で変更したいユーザはWooCommerceフックこれらのPHPコード・スニペットは、"" を実行することができます。これらの PHP コードスニペットは、"リグ「そして(機械）フィルター" をクリックし、WooCommerceの商品ページを変更します。

便利な操作の例を挙げよう：

/**

 * :: 商品抜粋のショートコードを許可する

 */

if (!function_exists('woocommerce_template_single_excerpt')) {

   function woocommerce_template_single_excerpt( $post ) { { }.

      global $post；

       if ($post-&gt;post_excerpt) echo '<div itemprop="description">' . do_shortcode(wpautop(wptexturize($post-&gt;post_excerpt))) . '</div>';

   }

}

このフックを実装する際に製品エキスに追加するショートコード. 

同時に製品属性アーカイブリンクを表示次のコード・スニペットを使うことができる：

/**

 * :: 商品属性のアーカイブリンクを表示する

 */

add_action( 'woocommerce_product_meta_end', 'wc_show_attribute_links' )；

// アーカイブページに表示したい場合は、"woocommerce_product_meta_end" を "woocommerce_shop_loop_item_title" に置き換えてください。

関数 wc_show_attribute_links() {

global $post；

$attribute_names = array( '<attribute_name>', '<another_attribute_name>' ); // ここに属性名を追加し、属性名にpa_プレフィックスを追加することを忘れないこと

foreach ( $attribute_names as $attribute_name ) { // ここに属性名を追加します。

$taxonomy = get_taxonomy( $attribute_name ); }.

if ( $taxonomy &amp;&amp; ！ is_wp_error( $taxonomy ) ) { 。

$terms = wp_get_post_terms( $post-&gt;ID, $attribute_name )；

$terms_array = array()；

        if ( ！ empty( $terms ) ) { $terms_array = array( ); if ( !

        foreach ( $terms as $terms ) { { $terms_array = array(); if ( !

      $archive_link = get_term_link( $term-&gt;slug, $attribute_name ) ；

      $full_line = '<a href="/ja/' . $archive_link . '/">'. $term-&gt;name . '</a>';

      array_push( $terms_array, $full_line )；

        }

        echo $taxonomy-&gt;labels-&gt;name . ': ' . implode( ', ' . $terms_array ); .

        }

     }

    }

}

WooCommerceのフックには、以下のような便利な機能もあります。商品データを編集するフィルター機能.例えば、次のコード・スニペットは、商品ラベルの並び替えに使用できます：

/**

 * :: 商品データタブの並び替え

 */

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 )；



$tabs['reviews']['priority'] = 5; // レビューを優先する

$tabs['description']['priority'] = 10; // 説明は2番目

$tabs['additional_information']['priority'] = 15; // 追加情報 third

return $tabs；

}

また、カスタムタブを追加することもできる：

/**

 * :: カスタム商品データタブを追加する

 */

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' )；



// 新しいタブを追加する

$tabs['test_tab'] = array(

'title' => __( 'New Product Tab', 'woocommerce' )、

'priority' => 50、

'callback' => 'woo_new_product_tab_content'.

);

return $tabs.

}

function woo_new_product_tab_content(){。

// 新しいタブの内容

echo '<h2>新製品タブ</h2>';

エコー '<p>これが新しい商品タブです。</p>';

}

グローバルページテンプレート

WooCommerceのPHPコードを使用する場合のもう一つの選択肢は、ゼロから始めることです！グローバル・カスタム商品ページ・テンプレートの作成.心がけるこの方法はブロックテーマには適用されません。

まず、新しいファイルの名前をカスタム製品テンプレート.phpそして、一番上にテンプレートの名前を書いたオープンPHPコメントを書く：

<?php /* テンプレート名: テンプレート例 */ ?/* テンプレート名: テンプレート例 */ ?

この場合、"グローバル・カスタム商品ページ・テンプレート"もしかしたら類似コンテンツ交換"テンプレート例".

このテンプレートはデフォルトのWooCommerce商品ページを模倣します。その後、ウェブフックを使用して必要に応じて変更することができます。

カスタムWooCommerce商品ページで売上アップ

WooCommerceの商品ページをカスタマイズすることで、商品を効果的に紹介することができます。また、顧客により多くの選択肢を提供し、顧客にアピールするユニークな体験を作り出すことができます。上記のように、このページを編集するにはいくつかの方法があります。

ブロックテーマが利用可能な場合、サイトエディタを使ってグローバルテンプレートの外観を変更することができます。さらに機能を追加するには、WooCommerceエクステンションをインストールします。WordPressの経験豊富なユーザーであれば、CSSやPHPを使うこともできますが、この作業には注意が必要です。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み