初めての方へ ワードプレス 初心者にとって、ウェブサイト上で商品を公開し、ショッピングカートの機能を実装することは少し複雑に思えるかもしれません。実際、以下のような強力なプラグインの助けを借りれば、簡単にショッピングカートを導入することができる。 WooCommerce全プロセスをシンプルかつ直感的に行うことができる。このガイドでは、セットアップをスムーズに行うための各ステップを手取り足取り説明します。
![写真[1]-WordPress初心者サイトチュートリアル:商品を公開し、ショッピングカート機能を有効にする](https://www.361sale.com/wp-content/uploads/2025/06/20250611112614541-image.png)
I. 事前準備:基本的な環境検査
手術の前に、以下の基本的なことが整っている必要がある:
- すでに構築されたWordPressウェブサイト
- サイトの基本設定が完了(例:サイト名、パーマリンク構造
- Eコマース機能をサポートするテーマを使用する(例:Astra、Storefrontなど)。
![写真[2]-WordPress初心者サイトチュートリアル:商品の公開とショッピングカート機能の有効化](https://www.361sale.com/wp-content/uploads/2025/06/20250611112831420-image.png)
WooCommerceプラグインをインストールして有効にする
WooCommerceは現在最も人気のあるeコマース・プラグインで、以下をサポートしています。プロダクトマネジメントショッピングカート、チェックアウト、支払い機能
インストール手順
- WordPressバックエンドにログイン
- プラグイン] > [プラグインのインストール]を開き、"WooCommerce "を検索します。
- 今すぐインストール]をクリックし、[有効にする]をクリックします。
![写真[3]-WordPress初心者サイトチュートリアル:商品の公開とショッピングカート機能の有効化](https://www.361sale.com/wp-content/uploads/2025/06/20250611113223783-image.png)
初めて有効にすると、システムは自動的にセットアップガイドに入り、以下の順に設定する:
- ショップの場所と通貨
- 支払い方法(PayPal、Stripeなど)
- 配送について
- 税金の設定(必要に応じて省略可能)
第三に、商品ページを作成する。
WooCommerceが開始されると、バックエンドメニューに新しい[Products]オプションが追加され、すべての商品ページが管理されます。
新製品プロセス
- 商品] > [新しい商品を追加]に進みます。
- 製品名と簡単な説明を入力
![写真[4]-WordPress初心者サイトチュートリアル:商品を公開し、ショッピングカート機能を有効にする](https://www.361sale.com/wp-content/uploads/2025/06/20250611125941812-image.png)
- 製品ギャラリーにメイン画像をアップロードする
- 価格を設定すると、プロモーション価格を記入することができます。
- 在庫、配送重量、寸法の編集
- Publish]をクリックして、製品を本稼働させる。
![写真[5]-WordPress初心者サイトチュートリアル:商品を公開し、ショッピングカート機能を有効にする](https://www.361sale.com/wp-content/uploads/2025/06/20250611142204885-image-edited.png)
製品タイプの分類:
- シンプルな製品(シングルサイズ)
- バリアブル製品(例:複数の色、複数のサイズ)
- バーチャル製品(物理的なものはない、サービスなど)
- ダウンロード可能な製品(電子書籍、テンプレートなど)
![写真[6]-WordPress初心者サイトチュートリアル:商品を公開し、ショッピングカート機能を有効にする](https://www.361sale.com/wp-content/uploads/2025/06/20250611130619149-image.png)
四つ、カート関数は自動的に生成される
WooCommerceインストール後、以下のキーページが自動的に作成されます:
- ショッピングカートページ:追加された商品を表示
- チェックアウトページ:必要事項を記入し、支払いを完了する。
- マイアカウント・ページ:登録、ログイン、注文管理
- ショップページ:全商品リストを表示
これらのページが正常に生成されない場合は、WooCommerce > Status > Toolsに移動し、"Create default WooCommerce page "をクリックしてください。
![写真[7]-WordPress初心者サイトチュートリアル:商品を公開し、ショッピングカート機能を有効にする](https://www.361sale.com/wp-content/uploads/2025/06/20250611134504801-image.png)
V. 「カートに入れる」ボタンを追加する
カートに入れる」ボタンはデフォルトで商品ページに表示されます。ビジュアルエディタ(Elementorなど)を使用している場合は、手動でモジュールを追加するか、以下のショートコードを使用することもできます:
よく使われるページのショートコード:
[woocommerce_checkout].
VI.造園製品の展示レイアウト(オプション)
全体的な演出を強化するために、以下のことを試してみてほしい:
- WooCommerceテーマの置き換え
- 商品バリアントショーケースプラグイン (例 バリエーション・スウォッチ)
![画像[8]-WordPress初心者サイトチュートリアル:商品を公開し、ショッピングカート機能を有効にする](https://www.361sale.com/wp-content/uploads/2025/06/20250611134846645-image.png)
- 顧客評価モジュールの有効化
- 注目商品やおすすめ商品の陳列エリアを追加
VII.買い物プロセスの完全性をテストする
ショッピングプロセスは、壊れた機能や欠落した設定の問題を避けるために、本番前に一度完全にテストされるべきである。
テストのプロセスは以下の通り:
- 商品をご覧になり、クリックしてカートに入れる
![写真[9]-WordPress初心者向けサイトチュートリアル:商品の公開とショッピングカート機能の有効化](https://www.361sale.com/wp-content/uploads/2025/06/20250611141658487-image.png)
- ショッピングカートページの内容が正確かどうかをチェックする
- チェックアウトページに移動し、必要事項を記入して注文を送信する。
- システムから注文確認メールが届いているか確認する。
VIII.よくある質問への回答
Q: 複数の支払い方法をサポートするにはどうすればよいですか?
A: WooCommerceはプラグインを通してAlipay、WeChat Pay、Stripe、PayPalやその他のオプションの拡張をサポートしています。
Q: ウェブサイトのトップメニューにショッピングカートのアイコンを追加するにはどうすればよいですか?
A: WooCommerce Menu Cartプラグインを使用すると、メニューにショッピングカートのアイコンと商品数を自動的に追加することができます。
Q: 商品をショッピングカートに入れることができません。
A: 在庫ステータスが "In Stock "であるかどうかを確認し、フロントエンドのJSローディングが正常かどうかを確認することをお勧めします。
結語
WooCommerceは、物理的な製品、デジタル製品、オンラインサービスの販売に適した完全なeコマースソリューションを提供します。初心者でも、クリーンで効率的なオンラインショップを構築することができます。
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:info@361sale.com | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/58917この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。






















![絵文字[wozuimei]-Photonflux.com|プロのWordPress修理サービス、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 専門WordPress修復サービス、全世界対応、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし