【決定版】活用したいWooCommerceのショートコード

WooCommerceはWordPressの人気ECプラグイン。世界で何百万もの企業がオンラインストアの運営に利用していますが、ショートコードの存在はあまり知られていません。

今回は、商品の表示や買い物カゴの管理に欠かせないショートコードから、ユーザー体験に応じた高度なカスタマイズまで、便利なWooCommerceのショートコードの活用方法をご紹介します。

短いシンプルなコードで、ECサイトの構築作業を劇的に改善することができます。

ショートコードとは

ショートコードは、2008年にリリースされたWordPress 2.5で導入されたツールです。[shortcode]のように角括弧で囲まれた小さなコードで、関数の実行やコンテンツの動的表示などをWordPressに指示するプレースホルダーとして機能します。

例えば、複雑な商品グリッドを自分でコーディングする代わりに、ショートコードを使って瞬時に作成し、フロントエンドに表示することができます。これにより作業時間が大幅に削減され、ヒューマンエラーを軽減し、サイトの保守管理と更新が容易になります。

ショートコードは、年々より強力で多機能になっており、WooCommerceにもEC機能に特化したショートコードが多数組み込まれています。

WooCommerceショートコードの使い方

WordPressサイトでWooCommerceのショートコードを使用するには、まずWooCommerceプラグインのインストールと有効化が必須です。

WordPress管理画面にログイン後、「プラグイン」＞「新規追加」に移動し、WooCommerceを検索します。見つけたら「今すぐインストール」＞「有効化」をクリックしてください。

その後、WooCommerceのセットアップウィザードに従って、ストアの詳細、支払い方法、配送方法などの基本設定を行います。

WooCommerceプラグインをインストールすると、自動的に「お買い物カゴ」「購入手続き」「マイアカウント」などの固定ページが追加されますが、ショートコードを使用してさらに機能を拡張することができます。

ショートコードの基本構造

WooCommerceのショートコードには、出力をカスタマイズするための追加属性が含まれることがあります。基本的な構造は以下のようになります。

[shortcode attribute1="値1" attribute2="値2"]

例えば、[products limit="4" columns="2"]は、2列のレイアウトで4つの商品を表示します。

投稿、固定ページ、ウィジェットにショートコードを追加する

ショートコードは、WordPressのあらゆる場所に追加することができます。テキストエディター、Gutenberg、ページビルダーなどでは、ショートコードブロックにコードを貼り付けるだけで、投稿や固定ページに簡単に追加可能です。

以下、Gutenbergでの使用方法を見ていきます。

1. WordPress管理画面で「投稿」または「固定ページ」に移動する
2. ショートコードを追加したい投稿または固定ページを開く
3. 「＋」アイコンをクリックして新規ブロックを追加する

   

4. 「ショートコード」ブロックを検索して選択する
5. ショートコードをブロック内に貼り付ける

例えば、オンラインストアのトップページに最新商品のグリッドを表示したいとします。上の手順でブロックエディターでショートコードブロックに[products limit="3" columns="3"]を貼り付けて「更新」（または「公開」） をクリックします。

これだけで1列に3つの商品が表示されたグリッドが作成され、最新商品を動的かつ魅力的に紹介することができます。

「外観」＞「ウィジェット」に移動して、ウィジェットにショートコードを追加することも可能です。任意のウィジェットエリア（サイドバー、フッターなど）に「テキスト」ウィジェットを追加し、テキストボックスにショートコードを貼り付けて保存するだけでOKです。

基本的なWooCommerceショートコード

WooCommerceには、商品の表示、買い物カゴの管理、購入手続きプロセスの強化に役立つさまざまなショートコードが揃っています。

以下、WooCommerceで特に便利なショートコードとその属性、そして効果的な使用例をご紹介します。

商品表示ショートコード

[products]は、特に汎用性の高いWooCommerceショートコードで、あらゆる条件に基づいて商品一覧を表示することができます。

以下のように属性も豊富で、思い通りに商品を表示可能です。

• limit：表示する商品数（デフォルトではすべてが表示される-1）
• columns：カラム数（デフォルトは4）
• orderby： date（発売日）、title（タイトル）、price（価格）、popularity（人気度）などの特定の条件に応じて表示
• order：ASC（昇順）またはDESC（降順）
• category：商品カテゴリーのスラッグ
• tag：商品タグのスラッグ
• paginate：ページネーションの有無（trueまたはfalseで、デフォルトではfalse）

たとえば、最新商品を8点、発売日の降順で並び替えて4列のレイアウトで表示したい場合には、ショートコードは以下のようになります。

[products limit="8" columns="4" orderby="date" order="DESC"]

ページネーションを有効にし、表示する商品数を設定しつつ他の商品できるようにもアクセスできるようにするには、paginate属性を使用します。

[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]

特定のカテゴリーの商品を表示するには、categoryを使用します。以下のショートコードでは、「accessories」カテゴリーの商品6点を3列で表示する例です。

[products category="アクセサリー" limit="6" columns="3"]

上の例では、「アクセサリー」のカテゴリーには5点しか商品がないため、5点の商品が表示されています。6点以上商品が増えると、6点のみが表示されます。

[product]は、idまたはsku属性を追加することで、IDまたはSKUに基づいて単一の商品を表示することも可能です。たとえば、以下のショートコードはID 22の商品を表示します。

[product id="22"]

この例は、ブログの記事内など任意の場所に特定の商品を追加したい場合に有用です。

複数の商品を選択して表示するには、idsとskus属性を使用します。

[products columns="3" ids="22,35,26"]

上のショートコードは、22、35、26のIDを持つ商品を表示します。

[product_page]もまた便利なショートコードです。[product]と似ていますが、タブ、関連商品、レビューを含む商品ページ全体を表示します。商品IDが22の商品ページを表示してみます。

[product_page id="22"]

このショートコードは、固定ページや投稿内の注目の商品セクションなどに使えそうです。

また、cat_operator属性を使用することで、商品をカテゴリーに基づいてフィルタリングする方法を制御することができます。

• AND：選択したカテゴリーの商品を表示する
• IN：選択したカテゴリーに属する商品を表示する（デフォルト値）
• NOT IN：選択したカテゴリーに属さない商品を表示する

例えば、「衣類」と「アクセサリー」のカテゴリーに属する商品を表示するには、ANDを使用します。

[products category="衣類, アクセサリー" cat_operator="AND"]

また、NOT IN を使用して特定のカテゴリーの商品を除外することも可能です。「衣類」カテゴリーのすべての商品を表示するには、以下のコードを使用します。

[products category="衣類" cat_operator="NOT IN"]

買い物カゴと購入手続きのショートコード

WooCommerceでは、買い物カゴ、購入手続き、ユーザーアカウントのようなECに欠かせないショートコードも利用できます。

たとえば、[woocommerce_cart]はすべての買い物カゴ内の商品、数量、合計金額を含む買い物カゴページを表示します。

このショートコードは、買い物カゴページとして指定した固定ページに追加します。

同様に、[woocommerce_checkout]は、買い物客が請求先および配送先情報を入力して注文を完了できる購入手続きページを表示します。

このショートコードは、購入手続きページとして指定した固定ページに貼り付けます。

[woocommerce_my_account]は、注文や配送先住所などの情報を含むユーザーアカウントを表示します。

[woocommerce_order_tracking]は、買い物客が注文IDとメールアドレスを入力して商品を追跡できるフォームを表示します。

このショートコードは、どのページにも設置することができます。

商品カテゴリーショートコード

商品カテゴリーの一覧またはグリッドを表示するには、[product_categories]を使用します。以下の属性を使って見た目のカスタマイズが可能です。

• number：表示するカテゴリー数
• columns： カラム数
• orderby： 特定の条件応じて表示
• order：ASC（昇順）またはDESC（降順）
• hide_empty：空のカテゴリーを非表示にするかどうか（非表示は1、表示する場合は0）

例えば、商品カテゴリーをグリッドで表示するには、以下のショートコードを使用できます。

[product_categories number="12" columns="4" orderby="name" order="ASC"]

上のショートコードは、12つの商品カテゴリーを名前の昇順で4列のグリッドで表示します。

上の例では、サムネイルを設定するとより見栄えがよくなります。サムネイルを追加するには、「商品」＞「カテゴリー」に移動し、該当のカテゴリーにカーソルを合わせて、「編集」をクリックします。編集ページの下にある「サムネイル」で画像をアップロード可能です。

特定のカテゴリーの商品を表示するには、[product_category]を使用します。このショートコードには、per_page属性を指定することができ、ページごとに表示する商品の数を指定可できます。また、商品カテゴリーを指定するcategoryとカラム数の指定も可能です。

例えば、「衣類」カテゴリーの商品8点を4列のレイアウトで表示するには、以下のショートコードを使用します。

[product_category category="衣類" per_page="8" columns="4"]

高度なWooCommerceショートコード

ここまでは基本的な商品表示ショートコードをご紹介しましたが、WooCommerceにはより高度な制御とカスタマイズを可能にするショートコードも存在します。うまく活用することで、WooCommerceストアの表示と機能を特定の要件に応じて調整することができます。

商品表示のカスタマイズ

[products]は柔軟性の高いショートコードで、さまざまな属性の組み合わせで商品をフィルタリングして表示できます。

上でご紹介した以外にも、以下のような属性があります。

• on_sale：セール商品の表示の有無（trueまたはfalse）
• best_selling：売れ筋商品の表示の有無（trueまたはfalse）
• top_rated：評価が高い商品の表示の有無（trueまたはfalse）

以下は、セール商品を表示する例です。

[products on_sale="true" limit="8" columns="4"]

カテゴリー内の売れ筋商品を表示することも可能です。

[products category="accessories" best_selling="true" limit="6" columns="3"]

上のコードは、3列のレイアウトで「アクセサリー」カテゴリーから6点の売れ筋商品を表示する例です。

特定の用途向けショートコード

WooCommerceのショートコードは、さまざまな条件に基づいて動的なコンテンツを提供し、特定の要件を満たしてくれるものがあります。例えば、[recent_products]は、WooCommerceストアに最近入荷した商品を表示します。

[recent_products limit="5" columns="5"]

上のコードは、最近入荷した商品5点を5列のレイアウトで表示します。

[featured_products]は特集商品を表示します。

[featured_products limit="6" columns="3"]

「すべての商品」ページに移動し、以下のように「★」列で星をクリックすることで、特集商品に設定することができます。

特定の商品をセール価格で販売するには、[sale_products]が便利です。

[sale_products limit="8" columns="3"]

商品の販売価格を設定するには、「商品」＞「すべての商品」に移動し、割引価格で販売したい商品を選択します。次に、「商品データ」セクションまでエディターをスクロールします。

「一般」タブの「セール価格（$）」フィールドに任意のセール価格を入力すると、これだけでフロントエンドに表示されるようになります。このセール価格は、「標準価格（$）」フィールドの価格よりも優先され、セールの期間外には「セール価格（$）」を空白にしておくことで、誤って値引き価格で商品を販売してしまうことを回避することができます。

売れ筋商品を設定できるプラグインを使用している場合は、[best_selling_products]を使用して表示することができます。

[best_selling_products limit="10" columns="4"]

[top_rated_products]は、ストアで特に評価の高い商品を表示します。

[top_rated_products limit="4" columns="2"]

まとめ

WooCommerceのショートコードは、オンラインストアの機能を強化する便利なツールです。ショートコードを使いこなすことで、商品表示のカスタマイズ、買い物カゴの管理、購入手続きプロセスの最適化が可能になります。

今回ご紹介したショートコードを試しながらストアに適した設定を行い、買い物客の要件を満たす動的で魅力的なWooCommerceサイトを構築してみてください。

オンラインストアの準備が整った後は、サイバー攻撃やパフォーマンスの低下、サイトのダウンなどを回避する策が必要です。

WooCommerceプラグインは、特に多くの商品を扱う大規模なストアを運営する場合、サイトの速度を低下させることがあります。Kinstaでは、そんな懸念を解消する、安全かつ高性能なWooCommerceストア向けホスティングサービスを提供しています。ぜひお試しください。また、無料でダウンロードできる電子書籍『WordPressサイトを高速化する方法』もご用意していますのでお役立てください。