WooCommerce で WordPress ショッピングカートを設定する方法

Elementor ナビゲーション バーに移動し、[コンテンツ] タブを選択して、その後に表示されるサブメニューで [エディターの更新] の選択肢を探して、適切な製品タイトルを表示します。 適切な製品を選択するには、デモ製品の下にあるドロップダウン メニューでその名前をクリックします。

WooCommerce 製品ダッシュボードに移動し、重要な製品情報を追加または変更して、このデータが正しい製品タイトルを表示するようにする必要があります。 これは、「追加」または「編集」ボタンをクリックすることで実行できます。

商品ページへのアイキャッチ画像の追加

それに続いて、製品に画像ギャラリーと注目の画像の両方があることを確認する必要があります. これを実現するには、Elementor に同梱されているe コマース用のオールインワン プラグインに含まれるさまざまな画像ウィジェットのいずれかを利用できます。

このデモンストレーションのために、ShopReady Thumbnail with Zoom ウィジェットを利用します。これは、その名前が示すように、ズーム機能を備えています。 このウィジェットを使用すると、製品の画像の上にマウスを移動するたびに、WooCommerce 製品のホバー ズーム バージョンの製品画像を顧客に表示できます。

前と同じ方法で、デモ製品オプションの [コンテンツ] タブをクリックして、適切な製品画像を選択できます。

価格設定ウィジェットのブロックを追加する

製品の価格設定ブロックは、e コマース製品ページに存在する必要があるもう 1 つの重要なコンポーネントです。 これを実現するには、WooCommerce 製品属性を適切な調整で変更し、製品タイトルの下に配置する必要がある ShopReady 価格ウィジェットを使用する必要があります。

正しい価格が表示されるようにするには、[コンテンツ] タブの [デモ製品] オプションのドロップダウン メニューから製品タイトルを選択してください。

商品説明の追加

この WooCommerce 製品アドオンの製品説明ウィジェットを使用すると、製品説明を追加するオプションだけでなく、説明を高度にカスタマイズすることもできます。 スタイル タブを使用すると、製品の説明が一般にどのように表示されるかを変更できます。

カートに入れる機能の追加

チェックアウトページに移動する前に顧客がカートにアイテムを追加する機能は、「カートに追加」オプションによって容易になります。これは非常に重要なもう 1 つの機能です。

ShopReady カートに追加ウィジェットを利用すると、e コマース ストアのページに強力なバージョンのカートに追加機能を装備することができます。 このウィジェットを使用すると、顧客がカートに入れるブロックから直接、カートに入っている製品の量を調整できるようになります。

また、WooCommerce の製品スタイリングの [Elementor スタイル] タブから、Elementor のカートに追加ボタンの外観を変更することもできます。 ここでは、フォント、色、背景、マージン、パディング、およびその他の属性を変更できます。

商品ページへのメタデータの追加

商品を追加する際に WooCommerce に追加したメタデータと商品属性を利用するWooCommerce 商品フィルターを実装することは、消費者により満足のいくショッピング体験を提供したい場合に行うべきことです。

ShopReady メタ ウィジェットを探して、製品専用ページの [カートに追加] ボタンのすぐ下に配置します。 これにより、問題の情報を表示できます。

[コンテンツ] タブの [デモ製品] オプションにあるドロップダウン メニューから適切な製品タイトルを選択すると、製品タグとメタデータが正確に表示されます。

商品ページにSNSシェアボタンを追加

簡単なソーシャル メディアの共有ボタン ブロックを利用することで、消費者が購入した商品の WooCommerce 製品ページからソーシャル メディアで製品の投稿を直接共有できるようになります。 Elementorソーシャルシェアウィジェットが提供するドラッグアンドドロップ機能を利用するだけで作成できるもの.

[コンテンツ] タブから直接、ユーザーが選択したソーシャル メディアのアイコン、テキスト、共有可能なリンクでブロックをパーソナライズできます。 さらに、Elementor Style タブでは、ユーザーが必要に応じてソーシャル共有ブロックの視覚的表現を変更できます。

これで、WooCommerce 製品ページのカスタマイズの基礎が完成しました。

ステップ 4: WooCommerce 関連製品の追加

WooCommerce 製品アドオンに含まれている関連製品ウィジェットを利用すると、製品ページに関連製品を表示できます。これは、オンライン販売を促進するための優れた戦略です. ShopReady 関連商品ウィジェットを使用すると、セクションに分割された豪華な商品スライダー ブロックを簡単に作成できます。

ウィジェットを使用するには、ウィジェットを単一の製品ブロックの下にドラッグ アンド ドロップし、単一の製品ページに掲載する特定の製品を[コンテンツ] タブから選択します。

ステップ 5: WooCommerce カスタム チェックアウト フィールドを追加する

前述したように、これは機能する E コマース プラットフォームの重要な側面です。 ShopReady のような WooCommerce ショップ ビルダーを使用すると、WooCommerce カート ショートコードを簡単に利用して、機能的な e コマース カートを実装したり、ShopReady ウィジェットを使用してこの機能を適用したりできます。

カートを機能させるには、まず製品ページに「カートに追加」ウィジェットを追加する必要があります。 私たちはすでにそれをしました。 それでは、戻ってカートページ自体を作成しましょう。カートに追加されると、すべての製品が表示されます。

ShopReady – WooCommerce Shop Builder を使用すると、ユーザーはShopReady ダッシュボードから使用できる 2 つの異なるカート テンプレートから選択できます。 ShopReady ダッシュボードから、[テンプレート] メニューをクリックして、ShopReady が提供する WooCommerce プリセット カート テンプレートを有効にして編集します。

新しい WooCommerce カート テンプレートを作成するか、既存のものを編集すると、Elementor エディター画面にリダイレクトされます。

ここから、ShopReadyカートウィジェットを追加するだけで、カート ページが自動的に作成されます。プラグインを使用せずに WordPress ショッピング カートを作成するのは、ShopReady を使用した簡単なプロセスです。 追加のプラグインやツールは必要ありません。

すでにカートに商品が追加されている場合は、次のように表示されます。

これで、機能的なカート ボタンを備えた機能的な WooCommerce カート ページが完成しました。 また、Elementor を使用してカート ページをさらにカスタマイズするオプションもあります。 Elementor では、背景色から Elementor のタイポグラフィ設定まで、カート ページのあらゆる側面を自由に変更できます。

WooCommerce ショッピング カートのショートコードを利用することもできます。 その場合、Elementor ShortCode ウィジェットを使用する必要があります。

ショップページのカスタマイズが完了したら、 [公開/更新]をクリックして、訪問者や顧客に変更を公開してください。

結論

WooCommerce のカスタム カートに追加ボタンを作成するプロセス全体は困難な作業のように思えるかもしれませんが、このガイドを読み進めていくと、適切なツール セットを使用すれば、この技術的機能を作成するプロセスがまったく難しくないことがわかります。 ShopReady WooCommerce ショップ ビルダーは、堅牢な e コマース プラットフォームをゼロから作成するために必要なすべてのツールを提供する完全なパッケージです。

また、ShopReady またはカートの作成プロセスで問題が発生した場合は、いつでもWooCommerce カートのドキュメントを参照できます。

WooCommerce ショッピングカートに関するよくある質問

WordPress にショッピングカートはありますか?

WordPress CMS は、ベアボーン Web サイト ホスティング プラットフォームです。 ショッピング カートや e コマース関連の機能は含まれていません。 ただし、これはオープンソースのプラットフォームであるため、コミュニティが作成した e コマース ツール、プラグイン、またはモジュールを自由に利用して、WordPress Web サイトにカートを追加できます。

WooCommerce にショッピングカートはありますか?

はい、WooCommerce ベース プラグインには機能的なカート ボタンとカート ページが付属しています。 しかし、それは本質的に非常に最小限です。 カート ページにスパイスを加えるには、任意の数のWooCommerce 拡張機能を使用するか、Elementor および ShopReady WooCommerce ページ ビルダーの e コマース カート ページのカスタマイズ オプションを最大限に活用できます。 WooCommerce のカート アイコンから詳細なページ レイアウトまで、すべて ShopReady でカスタマイズできます。

WooCommerce でカスタム チェックアウト ページを作成するにはどうすればよいですか?

ShopReady – WooCommerce ショップ ビルダーをダウンロードしてインストールします。 次に、ShopReady ダッシュボードから新しい WooCommerce チェックアウト ページ テンプレートを作成します。 Elementor エディターにリダイレクトされます。ここから、ShopReady チェックアウト ウィジェットを利用して、WooCommerce で機能的なカスタム チェックアウト ページを作成できます。