WooCommerceの商品ページとは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ページレイアウトの変更

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

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

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

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

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

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

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

変更內(nèi)容に問題がなければ、畫面上部をクリックします。「保存」ボタン。

色とフォントの変更

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

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

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

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

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

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

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

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

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

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

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

新しいブロックの追加

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

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

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

複數(shù)のタイプの商品ページを作成する

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

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

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

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

目的別に複數(shù)のテンプレートを作成するには外観 → 編集 → テンプレート.次に、プラス記號(hào)をクリックして新しいテンプレートを追加し個(gè)別項(xiàng)目：製品.

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

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

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

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

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

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

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

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

しかし、ページの機(jī)能を拡張することはできません。幸いなことに、技術(shù)力のない初心者でもこれを?qū)g現(xiàn)できるWooCommerce拡張機(jī)能がたくさんあります。?

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

高度な製品の創(chuàng)造

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

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

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

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

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

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

WooCommerceプロダクトデザイナー

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

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

複合製品

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

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

WooCommerce用數(shù)式価格計(jì)算機(jī)

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

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

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

WooCommerceホールセール

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

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

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

商品ページの最適化

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

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

WooCommerce用360°畫像

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

包括的な製品仕様、靜止畫、動(dòng)畫は大いに役立ちますが、360°畫像を提供することで、製品に命を吹き込むことができます。?

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

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

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

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

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

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

WooCommerceタグマネージャ

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

製品販売の拡大?

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

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

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

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

ウィッシュリスト

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

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

製品推薦

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

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

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

製品アドオン

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

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

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

製品パッケージ

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

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

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

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

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

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

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

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

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

カスタムCSSの使用

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

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

サイトエディターで

サイトエディターを使って商品ページに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はサイトエディターと同じ機(jī)能を持っています。

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

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

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

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

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

PHPの使用

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

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

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

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

WooCommerceの要素を手動(dòng)で変更したいユーザはWooCommerceフックこれらのPHPコード?スニペットは、"" を?qū)g行することができます。これらの PHP コードスニペットは、"リグ「そして(機(jī)械）フィルター" をクリックし、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>';

   }

}

このフックを?qū)g裝する際に製品エキスに追加するショートコード.?

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

/**

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

 */

add_action( 'woocommerce_product_meta_end', 'wc_show_attribute_links' )；

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

関數(shù) 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のフックには、以下のような便利な機(jī)能もあります。商品データを編集するフィルター機(jī)能.例えば、次のコード?スニペットは、商品ラベルの並び替えに使用できます：

/**

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

 */

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



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

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

$tabs['additional_information']['priority'] = 15; // 追加情報(bào) 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(){。

// 新しいタブの內(nèi)容

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

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

}

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

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

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

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

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

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

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

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

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

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