Amazonで商品を見る セール会場へ

SWELL│デモサイトあり!WooCommerceの導入方法

以下は過去の導入時の画面と検証記録です。

現在の設定画面や決済サービスの審査手順とは異なる場合があります。

2026年10月1日に注文を一律に完了へ変更するコードと、費用・メール到達の説明を修正しました。

実決済を含む現行構成の再検証は未実施です。

SWELL公式で推奨されていないWooCommerceのプラグインをSWELLにいれて、実際に機能するか試してみました。

WooCommerceなどのEC系のプラグインは基本的に対応(動作保証)していません。

WooCommerce等を絶対に使えないということはないですが、ご自身でカスタマイズなどがかなり必要です。

https://swell-theme.com/basic-setting/4688/

結論を言うと正直、動作はするもののそれなりに見た目や機能のカスタマイズが相当量、必要なので、安易に導入するのはおすすめしません。

WooCommerce専用のテーマか、決済まわりだけShopifyを使うことをおすすめします。

SWELL+Shopifyが設定もシンプルでおすすめです!

WooCommerce本体は無料で利用できますが、サーバー、決済手数料、有料拡張などの費用は別に発生します。

実際にSWELLに入れてみて実際どうだったのか検証してみました。

決済サービス側の機能と、SWELL・WooCommerce・追加プラグインを組み合わせたサイト全体の動作は分けて確認します。

高速化のプラグイン等を入れてキャッシュ周りで決済機能に影響する可能性も否めないので、余計なことはしない方がいいです。

最後にもう一度いいますが、見た目も機能もカスタマイズする量が多いので、もしやりたい場合はプロに依頼してやってもらったほうがいいです。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

SWELL+WooCommerceの設定

以下は導入当時の設定記録です。

現在の画面名や手順は、WooCommerceと利用する決済プラグインの公式案内で確認してください。

ストア設定に加え、テーマとの表示の組み合わせや注文処理の確認が必要です。

導入時はWooCommerceをインストールして有効化しました。

プラグインのインストールと有効化を行う画面。

続いて管理画面のWooCommerceから設定を進めました。

当時のガイドは、次の5つの項目に分かれていました。

管理画面のガイドに従って設定を進める手順。

①ストアをカスタマイズ

当時は専用画面からストアデザイナーを選びました。

この操作でWooCommerce用のメニューやページが生成されました。

専用画面でストアデザイナーを選択してメニューやページを生成する様子。

当時の操作では有効なテーマがTwenty Twenty-Fourなどへ切り替わったため、設定後にテーマを確認しました。

テーマを切り替えた場合は、SWELLに戻した後のストア・商品・カート・購入手続きの表示も確認します。

②商品を追加

ストアをカスタマイズしたときに自動でサンプル商品も作成されますが、

自分で一つ無料の商品を作成してみましょう。

今回はデジタル商品(バーチャル)でダウンロードリンクもつけてみました。

価格は0円に設定

価格を0円に設定して無料のデジタル商品を作成する設定画面。

③WooPayments で支払いを受け取る

以下はWooPaymentsの導入画面の記録です。

現在の接続方法や必要書類はWooPaymentsの案内に従って確認してください。

ガイドに従って情報を入力し、支払いサービスと連携する画面。

当時の入力画面では、法人か個人かを選択しました。

掲載画面の入力例を、そのまま別の事業者の登録内容として使わないでください。

本人確認書類の提出と審査も求められました。

登録画面が進まない場合は、表示されたエラーを確認してWooPaymentsのサポート案内を参照してください。

身分証明書のアップロードと審査に関する手続きの画面。

④消費税を徴収

手動で税の設定を選びました。

手動で税の設定を選択する画面。

下の画像は、当時「日本・10%」を入力した設定例です。

すべての店舗や商品に同じ税率を設定する指示ではありません。

適用する税区分・税率は自店舗の条件に応じて確認してください。

消費税の設定で日本と10パーセントを入力する項目。

⑤ストアを公開

ストア公開前に、検証環境で表示・注文・通知・決済の確認を行います。

利用する決済サービスの審査・設定状況も確認し、テストで残った問題を解消してから公開を判断します。

ストアを公開するボタンを押して設定を完了する画面。

以上は当時の初期設定の記録であり、現行構成での開店前テストを完了したものではありません。

WooCommerceの設定項目はいろいろあるので、しっかり確認しておきましょう。

SWELL+WooCommerceでカスタマイズしたところ

当時はストア公開前に0円商品の注文を試しました。

0円注文で確認できるのは、その条件での購入画面・注文作成・通知などです。

カード決済や返金まで正常に動くことの確認にはなりません。

テストとして0円の商品を購入した際の画面表示。

しかし、うまくいかないのがWooCommerce!

ということで設定・カスタマイズしたところを紹介します。

WooPaymentsの決済確認は、公式のテストモード手順を参照して、実際の資金を動かさないテストとして行います。

本記事では、現行構成でのテスト決済・返金を実施していません。

注文が「処理中」になる理由と旧コードの戻し方

支払い後の「処理中」は、発送やサービス提供などの対応が残っている注文では正常です。

すべての商品が「バーチャル」かつ「ダウンロード可能」の注文は、標準動作で処理中を経ず完了になります。

注文状況のステータスが処理中と表示されている管理画面。

以前掲載していた、すべての注文商品を処理不要にするフィルターは撤去しました。

物販やサービス提供を含む注文まで完了扱いにするため、汎用の解決策として追加しないでください。

既に追加した場合は、そのフィルターだけを削除または無効化し、テスト注文で標準の状態遷移へ戻ったことを確認します。

過去の注文状態は自動では戻りません。

WooCommerce公式の注文ステータスで用途を確認し、商品が本当に該当する場合だけ商品編集画面のバーチャル・ダウンロード可能の設定を使います。

物販を含む混合注文や入金待ちを無条件に完了へ変更しないでください。

メールが届かない

WooCommerce初期状態で商品を購入しても販売側にも顧客側にもメールが届きませんでした。

当時はSMTPの導入後にメールを受信できましたが、この経過だけで不達の原因を特定できるわけではありません。

不達時はWooCommerce公式のメール確認手順に沿って、通知の有効化・注文状態・送信と受信の状況を切り分けます。

以下は当時採用したSMTP設定の手順です。

  • WP Mail SMTPのプラグインをインストール&有効化
  • メーラーをその他の SMTPを選択
  • その他のSMTPを設定

以上です。

※実際の設定内容は各レンタルサーバーによって違います。

契約しているレンタルサーバーのメール設定を検索して調べましょう!

たとえばシンレンタルサーバーだと下記のように入力しました。

レンタルサーバーでのメール関連の入力設定例。

またWooCommerceのメールの設定も一応チェックしておきましょう。

管理画面 > WooCommerce > 設定 > メール

管理画面から選択するメール設定の一覧画面。
メール送信テストの確認画面。

SMTPのテスト送信とWooCommerceの注文メールは別に確認します。

メールの有効化・宛先・注文状態を確認し、テスト注文で販売者宛てと購入者宛ての到達をそれぞれ確かめてください。

その他、色々カスタマイズが必要だったので片っ端からコードを書いていますが、

完成までまだまだ掛かりそうです。

  • 文言周りの変更
  • 関連記事の表示数
  • 商品詳細ページ
  • 個数選択ボタンのUX
  • 並び替え
  • 入力フォーム
  • 商品画像のズーム停止

などなど…やってみましたが、まだまだShopify初期サイトに足らない機能があります。

どこかでカスタマイズも記事にしてみようと思います。

現在の税設定の操作はWooCommerce公式の税設定資料を参照してください。

追加した公式資料の確認日:2026年10月4日。

  • URLをコピーしました!

実装を任せたい方へ

SWELLのカスタマイズ代行

記事のコードをそのまま使うのが不安な場合や、サイトに合わせた調整が必要な場合は当社が実装します。1時間 ¥8,000〜(税込)。テーマ更新に強い書き方で納品します。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次