WooCommerceショートコードへの完全なガイド

WooCommerceショートコード

WooCommerceショートコードを使用すると、新し WooCommerceは、ショートコードで事前に構築されています、あなたはより多くを追加するためにプラグインをイ テーブルのプロダクトをリストしたいと思うかどうかあなたの場所、または何か他のもののカートをどこでも表示しなさい-右の場所に来た!

あなたはおそらくあなたがWordPressに新しいしているか、いくつかの時間のためにそれを使用しているかどうか、前にショートコードに遭遇しました。 ショートコードは、名前が示すように、機能のいくつかの並べ替えを実行するコードの短い部分です。 WooCommerceショートコードは、例えば、あなたのウェブサイト上のWordPressのページ、投稿、サイドバー、およびウィジェット化された領域にきちんとWooCommerce関連の機能を追加してみ

バリエーションを持つWooCommerce製品テーブルの例。
この店は、迅速なワンページの注文フォームを作成するためにWooCommerce製品テーブルのショートコードを使用しています

あなたはwoocommerceショートコードを使用してこれを行うことができますショッピング体験を簡素化する方法を探しているなら。 ユーザーの購買フローを改善し、コンバージョンのためにオンラインストアを最適化するのに役立ちます。

たとえば、あなたはにWooCommerceショートコードを使用することができます:

  • あなたのホームページ上であなたのトップ定格製品のリストを表示します。
  • 顧客が製品に関心を表明するたびに、関連製品を展示します。
  • Gutenbergブロック、サイドバー、その他のウィジェット化された領域で注目の製品を強調表示します。このことを念頭に置いて、この完全なガイドでは、我々はあなたがより良いユーザーエクスペリエンスを提供し、あなたの一番下の行を成長させるためにWooCommerceショートコードを使用する方法を説明します。 道に沿って、我々はまた、あなたが各ショートコードを使用する必要がありますとき(そしてなぜ)説明します。 私たちは、WooCommerce自体に付属してショートコード、およびあなたが他のプラグインで追加することができますショートコードを見てみましょう。

    WooCommerceショートコードを使用する方法

    ショートコードは見て、少し技術的に聞こえるが、彼らは実際に誰もが使用するために設計されています。 コーディングの技術を必要としない。

    単にワードプレス内の任意のテキストエディタにショートコードを挿入するか、GutenbergやElementorやVisual Composerなどのページビルダーを使用している場合は”ショートコード”ブロックに挿入します。

    WooCommerce Product Table Gutenbergブロック
    このウェブサイトは、Woocommerce Product Table shortcode(このチュートリアルで後述する)を追加しました。”ショートコード”グーテンベルグブロック。

    あなたは、ショートコードを組み合わせて、単一のページに複数のショートコードを表示することができます。 たとえば、order trackingショートコードとユーザーアカウントショートコードを組み合わせることができます。 あなたがしなければならないのは、同じページに両方のショートコードを挿入するだけです。 それは次のようになります:

    Woocommerceワンページチェックアウトプラグイン
    このウェブサイトは、ワンページのショッピング体験を作成するためにWooCommerceチェッ

    あなたの店でさまざまな方法で製品を一覧表示するショートコードもあります。 これらは、余分な柔軟性を追加するので、あなたは店やカテゴリページに取得する制限されたビューで立ち往生していません。 グリッドまたはテーブルベースのリストビューのいずれか-代わりに、あなたは文字通りどこでもあなたのWordPressサイト上の一つ以上の製品を一覧表示するWooCommerce

    WooCommerce製品のショートコード

    woocommerceには、グリッドレイアウトで特定の製品を一覧表示できるショートコードがあります。

    。 また、他のパラメーター(orderbyやcolumnsなど)を追加して、フロントエンドの外観をカスタマイズすることもできます。複数のWooCommerce製品を表示する

    行ごとにリストする製品の数を選択できます。 たとえば、6つの商品を日付順に昇順に3つの列に表示する場合は、ショートコードを使用します。 同様に、商品を降順で表示する場合は、ASCをDESCに置き換えるだけです。

    WooCommerceクイックビューショートコード

    ショートコードはWooCommerceクイックビュープロプラグインとシームレスに動作します。 これにより、ユーザーが現在のページを離れずに購入できるようにするための簡単な方法として、製品のリストにクイックビューボタンが追加されます:

    クイックビューボタンで複数のWooCommerce製品を表示する

    あなたがしなければならないのは、あなたのWordPressサイトにWooCommerceクイックビュー このようにして、顧客は、単一の製品ページに移動することなく、製品の属性とバリエーションを確認し、カートに製品を追加することができます。

    WooCommerceクイックビュープロショートコードに私たちの完全なガイドをお読みください。/div>

    クイックビューライトボックス
    WooCommerceクイックビュー
    /div>

    あなたのwoocommerce製品のショートコードにクイックビューボタンを追加します。

    WooCommerce製品テーブルショート

    組み込みのWooCommerce製品ショートはかなり柔軟ですが、それだけであなたがグリッドレイアウトでそれらを表示 これは、クイック1ページの注文フォームや卸売店を作成している場合など、ページごとにより多くの製品を表示したい店舗には理想的ではありません。 その場合は、productテーブルのショートコードを使用した方が良いかもしれません。woocommerce自体には製品テーブルのショートコードはありませんが、woocommerce製品テーブルプラグインを使用して簡単に追加できます。

    WooCommerce自体には製品テーブルのショートコードはありません。

    基本的なショートコードはであり、50以上のショートコードオプションを使用してこれを設定することができます。p>

    あなたはWooCommerce製品テーブルで取得ショートコードオプションの完全なリストを表示します。

    woocommerceカートショートに追加

    WooCommerceは、組み込みが付属していますあなたが好きな場所に特定の製品のカート カートに追加ボタンを表示する製品のIDおよび/またはSKUを追加するだけです。

    製品価格を含めたい場:P>

    WooCommerceショートコードプラグインの価格/カートボタンオプション

    シンプルな製品の場合、これはカートに追加ボタン

    可変製品の場合、”オプションの選択”ボタンが表示されます。

    フロントエンドの価格/カートボタンのプレビュー

    個人的には、顧客がバリエーションを選択するために単一の製品ページにアクセスする必要があるため、これは好きではありません。 これは、バリエーションドロップダウンとの完全なテーブル内の一つ以上の可変製品を一覧表示するにはWooCommerce製品テーブルを使用することをお勧めします。

    バリエーションドロップダウンとWooCommerce価格表プラグイン

    そのように、顧客はオプションを選択し、彼らが現在オンにしているページからカートに追加することができます。

    製品カテゴリのショートコード

    製品カテゴリのショートコードは、標準のグリッドレイアウトで特定のカテゴリの製品を一覧表示します。

    クイックビューボタンで特定のカテゴリから製品を表示

    これはそれのためのショートコードです:

    
    

    グリッドレイアウトが気に入らない場合、または各製品について表示する情報をより詳細に制御したい場合は、WooCommerceを使用することができます。代わりに、製品テーブルのショートコード。 WooCommerce製品テーブルプラグインには、特定のカテゴリの製品のみを一覧表示するために使用できるカテゴリショートコードオプションが付属しています:

    
    

    組み込みとは異なりwoocommerceに付属しているショートコードは、各製品について表示する情報の列を選択し、顧客がバリエー これはショッピングを大いにより速くさせ、あなたの換算値を後押しする。

    WooCommerce製品カテゴリのショートコード

    製品カテゴリのショートコードではなく、それらの中の製品の、あなたの製品カテゴリが一覧表示されます。 例えば:p>

    あなたのWooCommerceカテゴリの任意の4つを名前順に一覧表示します。

    ショートコードを使用してWooCommerce製品カテゴリを紹介

    のは、製品カテゴリに行く属性とショートコードのいくつかを見てみましょう:

    • orderbyはソート順を制御します。”name”と”date”は有効なオプションです。
    • orderは、製品カテゴリの順序、つまり”ASC”または”DESC”を表します。
    • 列は、カテゴリが配置されている列の数を示します。
    • hide_emptyは、製品のない製品カテゴリを非表示にするために使用されます。
    • parentを使用すると、トップレベルの製品カテゴリのみを表示できます。
    • Idは、指定された出力結果のみに応じてカテゴリIdを設定できることを表します。

    最近の製品

    WooCommerce最近の製品のショートコードは、あなたが最近あなたのオンラインストアに追加した製品が表示されます。

    フロントエンド上の最新の製品

    これは、最近の製品のショートコードです:

    
    

    しかし、あなたは、製品がオンライ代わりにwoocommerce製品テーブルプラグイン。

    単純に日付順に製品テーブルを降順に並べ、製品の制限番号を使用して含める製品の数を制御します。

    :

    
    
    日付別にWooCommerceの最近の製品を表示

    テーブルに日付列を含めると、顧客は最近ストアに追加された製品を簡単に見ることができます。

    注目の製品

    WooCommerceのための注目の製品のショートコードは、あなたの店の残りの部分とは別に注目の製品を一覧表示することができます。 ブログの記事や他のページなど、好きな場所におすすめの製品を一覧表示するために使用します。

    注目の製品は、すべての製品ページ上でそれらの横に青い星のアイコンを持っているWooCommerce製品です:

    注目のWooCommerce製品バックエンド

    これは、注目の製品を紹介するためのショートコードです:。 出力は次のようになります:

    WooCommerceショートコードを使用して注目の製品のフロントエンドを一覧表示

    再び、あなたは画像グリッドが好きではない場合は、代わりにWooCommerce製品テーブルプラグインのショートコードを使用して注目の製品を一覧表示することができます。

    
    

    これは、テーブルレイアウトで注目の製品を一覧表示します。プラグイン設定ページで選択した情報の列。

    WooCommerce販売製品のショートコード

    販売製品のショートコードでは、現在販売中の製品を紹介してみましょう。 あなたは簡単にショートコードを使用してそれらを表示することができます:

    
    
    販売上のすべてのWooCommerce製品を一覧表示

    ベストセラー製品ショートコード

    グリッド内のあなたのすべての時間のベストセラー製品を表示するには、次のWooCommerceショートコードを使用します。

    woocommerceショートコードを使用してすべてのベストセラー製品を一覧表示

    あなたはwoocommerceクイックビュー proプラグインがあなたのワードプレスサイトにインストールされている場合は、クイックビューボタンがフロントエンドに表示されます。

    あなたは、テーブルレイアウトを好むだろうなら、あなたはまた、このようなWooCommerce製品テーブルのショートコードでベストセラーや人気のある製品を一覧表示することができます:

    
    

    WooCommerce製品テーブルで人気のある製品を一覧表示する方法についての私たちの完全なチュートリアルをお読みください。

    トップ定格製品

    あなたは、あなたのトップ定格製品を紹介するためにWooCommerceの組み込みのレビューと評価機能と一緒にトップ定格 ショートコードを使用する:

    
    
    トップ定格製品のためのWooCommerceショートコード

    また、WooCommerce製品テーブルショートコードを使用して、テーブルビューでトップ定格製品を一覧表示することができます。

    
    

    関連製品ショートコード

    関連製品は、顧客が閲覧している製品に似ている製品のリストです。 これらは、単一の製品ページの主な製品の下に直接表示されますが、WooCommerce関連製品のショートコードを使用して、他の場所で関連製品を一覧表示することがで

    単一の製品ページ上の関連製品

    ショートコードを使用してあなたのワードプ

    カートボタンのショートに追加

    WooCommerceショートコードを使用すると、価格を表示し、そのIDに基づいて、単一の製品のカートボタンに追 ここでは、フロントエンドにどのように見えるかです:

    カートページに追加WooCommerce

    これをオンラインストアやブログ記事のウィ

    ブログ記事でカートボタンに追加
    ブログ記事内のカートボタンのショートに追加の例

    このショートはWooCommerceクイックビュー 両方のプラグインを一緒に使用すると、カートに追加ボタンの横にクイックビューボタンが表示されます。 これは、可変商品を表示している場合や、カートに追加する前に顧客が数量を変更できるようにする場合に理想的です。 お客様は、製品に関する追加情報を表示し、数量とバリエーションを選択し、クイックビューライトボックスからカートに追加することがで これにより、別の製品ページに移動するのではなく、元のページに保存されます。複数の製品のカートに追加ボタンを表示したい場合、または大きな画像でデフォルトの形式が気に入らない場合は、代わりにWooCommerce製品テーブルを使用で

    productテーブルに含める列を選択します(カートに追加列を含めるようにしてください! そして、

    ショートコード内にショートコードを表示できますか?たとえば、WordPress audio playerのショートコードを追加して、埋め込み音楽プレーヤーを製品のリストに追加することができます。

    通常、woocommerceショートコードをネストすることはできません。 ただし、WooCommerce Product Table shortcodeを使用して製品を一覧表示し、productテーブル内に表示しているフィールドに他のショートコードを追加することでこれを実現できます。

    たとえば、8つの製品をリストし、それぞれにオーディオプレーヤーを埋め込みたいとします。 オーディオプレーヤーを製品の短いまたは長い説明フィールドに追加し、これらをテーブルの列として表示することができます。 次に、woocommerce製品テーブルのショートコードを使用して、オーディオプレーヤーを含む短いまたは長い説明列を含む特定の製品を一覧表示します。p>

    WooCommerceオーディオストアテーブル

    他のプラグインからのショートコードを製品テーブル内で動作させるには、WooCommerce製品テーブル設定ペー:P>

    WooCommerce製品テーブルのショートコードオプション

    WooCommerceページのショートコード

    のは、最も一般的なWooCommerceページのショートコードのいくつかを見 これらは自動的にカートやチェックアウトなどのページ全体を作成します。

    WooCommerceショッピングカート

    WooCommerceショッピングカートのショートコード--あなたのWordPressのウェブサイトのフロントエンドに顧客のショッ WordPressのページや投稿に追加したり、ウィジェット化された領域(サイドバーなど)に表示したりすることができます。

    これは、フロントエンドでこのようなものになります:

    WooCommerceショッピングカートのフロントエンドプレビュー

    あなたがインストールし、あなたのワードプレスのウェブサイトにWooCommerceをアクティブにすると、それは自動的にあなたのためにいくつかのページを作成します-このショートコードを使用してカートページを含む。 あなたのサイトの追加部分にカートを追加するには、ショートコードを使用することができます。あなたはWooCommerceチェックアウトショートコードを使用することができます--あなたの電子商取引のウェブサイト上の完全なチェックアウ このページは、WooCommerceをインストールするときにも自動的に作成されます。 ショートコードを使用して、チェックアウトを他の場所に挿入することもできます(たとえば、商品テーブルの下にワンページのショッピングを作成する)。P>

    WooCommerceチェックアウトページのプレビュー

    WooCommerceチェックアウトショートコードは、請求の詳細、注文の詳細、および別のアドレスに出荷す

    WooCommerce注文追跡

    WooCommerceは、店舗の所有者がショートコードを使用して注文追跡ページを作成することができます。 このページにはWooCommerceが付属していませんが、新しいページを作成してテキストエディタにショートコードを挿入して独自のページを作成することができます。 フロントエンドでは次のようになります。

    WooCommerceの注文追跡ページ

    WooCommerceユーザーアカウントページ

    WooCommerceは、最初にウェブサ これは、ショートコードを使用して行われます。 ショートコードを使用して、サイト全体の追加の場所にアカウント領域を挿入することができます。

    マイアカウントショートコードは、ログアウトしたユーザーのためのログインと登録フォームを兼ねています。 その結果、あなたはまた、WooCommerceログインショートとしてこれを使用することができます。

    WooCommerceのマイアカウントページ

    ツールバーボタンでより簡単にWooCommerceショートコードを追加

    あなたは、ウェブ上でWooCommerceショートコー 一度インストールされ、活性化され、このプラグインは、あなたにすべての組み込みのWooCommerceショートコードに簡単にアクセスできるようにWordPressのテキストエディタにTinyMCE これにより、ショートコードをコピーして貼り付ける必要がなくなります。

    WooCommerceショートコードプラグインを活性化した後、あなたのWordPressのテキストエディタで新しいショートコードボタンが表示されます。 このボタンをクリックすると、すべての標準のWooCommerceショートコードを含むドロップダウンリストが表示されます。

    テキストエディタのWooCommerceショートコードアイコン

    トラブルシューティングWooCommerceショートコード

    時には、正しいWooCommerceショートコードをテキストエディタに貼り付けますが、正しい出力は表示されません。 この場合、誤ってショートコードを<pre>タグ内に埋め込んでいないことを確認してください。 これらのタグを削除するには、HTMLテキストエディターに移動します。

    製品テーブルのための最高のWooCommerceショートコード

    我々が終了する前に、ここでは、WooCommerce製品テーブルプラグインとWooCommerceクイックビュープロプラグインで使:

    Plugin Required Shortcode name WooCommerce shortcode Description
    None Shopping Cart Displays a shopping cart on the front-end of the website
    None Checkout Page Displays a complete checkout page.
    None Order Tracking Displays an order tracking form for your e-commerce website.
    なし ユーザーアカウントページ ユーザーのための”マイアカウント”ページを表示します
    WooCommerce製品テーブル 製品価格/カートボタン 製品価格(またはカートに追加)ボタンを製品テーブルに追加します。
    WooCommerceクイックビュープロ 複数の製品のショート クイックビューボタンでページまたはポスト上の複数の(選択された)製品を表示します。
    WooCommerceクイックビュープロ 製品カテゴリ ウェブサイトのフロントエンドに特定の製品カテゴリを表示します。
    Woocommerceクイックビュープロ スラッグによる製品カテゴリ クイックビューボタンと一緒に特定の製品カテゴリから製品を表示します。
    WooCommerceクイックビュープロ 最近の製品 オンラインストアに追加した最新の製品のリストとクイックビューボタンを表示します。
    WooCommerceクイックビュープロ 注目の製品 クイックビューボタンで注目の製品のリストを表示します。
    WooCommerceクイックビュープロ 販売商品 クイックビューボタンで販売中のすべての製品のリストを表示します。/td>
    WooCommerceクイックビュープロ ベストセラー製品 クイックビューボタンであなたのベストセラー製品のリストが表示されます。
    WooCommerceクイックビュープロ トップ定格製品 クイックビューボタンであなたのトップ定格製品のリストを表示します。/td>
    WooCommerceクイックビュープロ 関連製品 単一の製品ページにクイックビューボタンを持つ関連製品のリストを表示します。
    WooCommerceクイックビュープロ 製品IDを使用して、単一の製品に”カートに追加”ボタンを表示します

    ショートコードであなたのWooCommerceストアを過給!

    WooCommerceショートコードは、あなたのオンラインストアにきちんとした機能を追加してみましょう小さなコードスニペットです。 ショップページ、投稿、またはウェブサイト上のウィジェット化された領域(サイドバーなど)に追加できます。 いくつかのWooCommerceショートコードはまた、出力をカスタマイズするために使用できるパラメータをサポートしています。

    しかし、すべてのWooCommerceショートコードは、良好なユーザーエクスペリエンスを提供しません。 それらをそのまま貼り付けるのではなく、WooCommerce Product Table pluginまたはWooCommerce Quick View Pro pluginと一緒に使用することを検討してください。

    たとえば、これは顧客が商品ページの外で数量とバリエーションを選択できるようにする唯一の方法であり、各商品に関する追加情報を表示し、画像 余分な柔軟性が必要な場合は、WooCommerce Product Tableをインストールして、50以上のショートコードオプションを試してみることができます。 これはあなたの場所を保障している間顧客のショッピング経験を改善する前陣のより端正な、整頓されていた一見を与える。/p>

    woocommerce製品テーブル
    きちんとした組織的な方法でWoocommerceショートコードを表示!要約すると、WooCommerceショートコードを使用すると、買い手の旅を改善し、一度に多くの製品を見て、顧客がすぐにチェックアウトプロセスをナビゲートすることが容易 また、あなたのオンラインストアにクーポンコードを追加するような高度な機能を活用してみましょう(WooCommerceクーポンショートコードのような)他のWooCommerceショートコー

コメントを残す

メールアドレスが公開されることはありません。