トップページ冒頭画像

ホーム

こちらは、WooCommerceカスタムや決済に特化したデモサイトです。  
WordPressでのECサイトを検討されている方や、決済システムについてお悩みの方の参考となれば幸いです。

カスタム事例(順次追加)

特定の固定ページや投稿へのアクセス権を販売できるカスタムです。たとえば動画が埋め込まれているページや投稿であれば、「動画を切り売り*」することが可能になります。購入履歴を保存参照する必要があるため、アカウント作成後のログイン必須ですが、アクセス権販売デモ(商品)では0円で販売していますので、ぜひ体感してみてください。
コンテンツ販売をする際は、ダウンロード販売か、既存の会員制システムプラグインと組み合わせてのサブスクリプション販売にするケースが多いと思われますが、当サイトのカスタムによって「売り切り」という選択肢も増えます。コンテンツの流出**を少しでも防ぐため、右クリック禁止等や「.htaccess」のカスタムも同時に行います。コンテンツファイルURLを直接叩いても、Forbidden(403)が返されます(通常はお使いのレンタルサーバーのテンプレートです)。

* 当サイトの主旨からは外れますが、このページのような「YouTubeもどき」カスタムもお受けできますので、ご興味のある方は是非お尋ねください。再生前、このページの動画は黒い画面ですが、サムネ(ポスター)表示も可能です。チャプター(生成ユーティリティあり)、再生回数、高評価、コメントなど、たいていの機能は再現できます。
** アクセス禁止の設定ならいざ知らず、表示(再生)できる状態というのは、ブラウザに一時的にせよダウンロードできている状態になりますので、どんな技術を用いようとも完全な流出防止は不可能です。

上記「アクセス権販売」でも採用していますが、ログイン前は、いわゆる購入ボタンが「ログインまたはアカウントを作成して購入」になっており、手続完了後には「お買い物カゴに追加」などのラベルに変わります。設定は管理画面で行えます。
WooCommerceデフォルトでは、設定で一律にログインユーザーにのみ販売することは可能ですが、商品別に設定するにはカスタムが必要になります。ユーザー登録を必須にすると購入をためらうユーザーが増える傾向があるため、可能な限りゲストユーザーの購入を認めたほうが売上には繋がりますので、このようなボタンがあると便利です。
WooCommerceデフォルトのアカウント作成ページへ遷移し、当該商品ページへリダイレクトさせる実装が基本ですが、「ポップアップで一切のページ遷移なし」も可能です。が、パスワードのバリデーションやデフォルトのアカウント作成ページとの整合性を考えますと、ハードルは一気に高くなると言えます。お使いのテーマとの相性問題もあることから、検証にはそれなりの時間を費やすことになるため、「ページ遷移」タイプの3倍ほどのお見積りとなることをご了承ください。

購入手続きページ(支払いページ、チェックアウトページ)の見栄えは、基本的にお使いのテーマに依存します。特に旧エディタの場合、何もしなくてもそこそこ整っているテーマもあれば、かなり残念なテーマまで様々です。そこに、自己主張の強い決済プラグインが加わります。アイコンが右に寄ったり左に寄ったり、そもそもサイズ感がまるで違うなど、手を入れずに使用するのは憚られるほどの悲惨な状況になり得ます。
気にしない方は気にしないのでしょうが、やはり顧客目線で見れば、乱雑な店舗よりも、スッキリした店舗の方が気持ちよく買い物ができますし、お店に対する信頼度も増します。
当サイトでは主にCSSを使用し、購入手続きページを整えます。デフォルトにはないイラストやアイコンの挿入から、テキストの差し替え、フォントサイズまで、ほぼほぼサイトオーナー様のご要望どおりの仕上がりをお約束できます。見た目だけでなく、ユーザビリティを重視したカスタムも得意です。たとえば規約同意のチェックボックス脇に設置したリンクなども、ページ遷移せずにポップアップ、あるいはプルダウンで表示するなど、JavaScriptを使用したカスタムが可能です。

WooCommerceの商品は、「基本的な商品」と「バリエーションのある商品」に大別されます。商品の個別ページでは、どちらも「お買い物カゴに追加」ボタンが用意され、後者はバリエーション選択がされるまでボタンがグレーアウトしているだけです。ところが商品リストのページでは、「お買い物カゴに追加」と「オプションを選択」ボタンに分かれます。
「オプションを選択」というデフォルトの翻訳がどうなのかはさておき、問題は2種類しかボタンのラベルが無いことです。「オプションを選択」の翻訳ファイルを変更し、「バリエーションを選択」や「サイズを選択」にできたとしても、それ以外の文言にはできず、すべて共通であることに不満なユーザーは少なくないのでは? と思います。
当サイトでは、商品によって様々なラベルを複数使い分けたい方の希望を叶えることが可能です。CSSのみでも簡易な調整は可能ですが、うまく適用できないケースも生じますので、当サイトではPHPコードを書いて制御しています。管理画面から柔軟に設定可能なUIを提供しますので、こだわりの強いサイトオーナー様におすすめのカスタムです。

データ入稿が必要な商品のページで、指定したファイルを「お買い物カゴに追加」のタイミングでアップロードするカスタムです。ファイルの種類や数、サイズの制限も可能です。当カスタムが他の既存プラグインと大きく違う点は、管理画面から商品ごと、属性ごとに適用できることです。そのため常設ではなく、必要なときにサッとプルダウンで現れます。
ドラッグ・アンド・ドロップにも対応していますし、お買い物カゴページ、お支払いページ、サンキューページ、自動送信メール、管理画面の注文ページの全てで、アップロードされたファイル名も表示されます。注文とアップロードされたデータファイルとの付け合わせに苦労することはありません。ファイル名は日本語にも対応しています。
顧客にはアップロードされたファイル名のみを通知するため、URLは秘匿できます。もしURLバレしても、格納先のパーミッションを正しく設定することで第三者にファイルを見られる心配はありませんが、既存プラグインではURLを知る全てのユーザーに閲覧可能な仕様のものもあり、顧客情報保護の観点からはいささか問題があると言えます。

WordPressではポピュラーなカスタムと言えると思いますので、WooCommerceのカスタムとして紹介するのはどうかと思いますが、ログイン前後で名称変更したいメニューはあるものです。テーマによっては独自のメニューを採用していることもあり、簡単そうで意外と難しいカスタムでもあります。当サイトで使用しているAstraでは、モバイル時のハンバーガーメニューが独特でした。
また、「マイアカウント」から名称変更するだけでも、WooCommerceっぽさが減るのでオススメです。WooCommerceは楽しいのですが、一見してWooCommerceだとわかるのは悔しいと思いませんか? 唯一無二、ユニーク。管理人のカスタム欲求は、そこが出発点です。

WooCommerceのアカウント作成フォームは、WordPressのコードをそのまま流用しているように見えて、実はそうでもないという事実があります。
たとえばWordPressでは1文字でもユーザー名登録できてしまう仕様ですが、これを最低4文字のバリデーションに変更したとしても、WooCommerceでは相変わらず1文字で登録可能なままです。WooCommerceにはWooCommerce用のカスタムコードも追加する必要があります。
そもそもここで言う「WordPressへのバリデーション追加」も、根本的な登録ルールを変更することを指してはいません。WordPressコアとしては1文字を受け付ける状態ながら、「4文字未満をコアに届けないようにする」だけのことです。WordPressを根本的にカスタムするのは、バージョンアップで壊れる可能性が高いため、推奨されません。同様に、データベースレベルで制約を加える方法も、WordPressアップデート時に不具合を起こすため非推奨です。

決済モジュール

WooCommerce単体では、決済はできません。各決済会社と接続するためのモジュール(プラグイン)が必要です。WooCommerce用に接続モジュールが用意されている決済会社は複数存在しますが、特に有名な決済会社であるStripe、PayPal用には複数のモジュールが存在します。

WooCommerce用の接続モジュールが提供されている決済会社は結構あり、選択に迷うほどです。たとえばPayPayでは、直接PayPayと契約することもできますし、KOMOJUを通じて契約することもできます。KOMOJUは、各社の決済を一括で取り扱っている決済会社で、一度の申し込みでPayPayの他にLINE Pay、メルペイ、コンビニ決済、クレジットカード会社各社の決済も可能になります。前述のStripeやPayPal、Squareなども、複数のクレジットカード会社との契約を一度に行えるという意味では、同じような存在だと言えるかもしれません。
各社手数料は大差ありません。決済したぶんの手数料を請求されるだけで、ほとんどが月額固定費0です。ただし、導入できる業種などは、決済会社によって多少の差があります。通常の物販では問題ありませんが、寄付や無在庫販売、情報商材等には制約がある場合があります。

新旧エディタの違い

WooCommerceは現在、新エディタ(ブロックエディタ、Gutenberg)への移行に積極的です。新エディタといっても、すでに登場から5年経過していますので、旧エディタ用テンプレートも同梱されていることの方が、むしろ異常なのかもしれませんが。ともかく、WooCommerceでは移行が現在進行形ということになります。
現在進行形で困るのは、アップデートの度に内部のコードが変わってしまうことです。PHPはもとより、CSSでもセレクタがまったく違うものに変わってしまうなど、アップデートで使い物にならなくなるカスタムが後を絶ちません。
その点、旧エディタ(Classic)は枯れた技術ですので、安定したカスタムがしやすくなっています。当サイトのカスタムでは、新旧両エディタ対応のもの、旧エディタ専用のものとがあり、新エディタ専用のものはまだありません。

WooCommerceのバグについて

WooCommerceというより、WordPressのバグなのかもしれませんが、意味不明なバグというものは存在します。半角英数で入力すべきフィールドに、うっかり全角かなで入力してしまうと、削除しても「目に見えない何か」が残っており、コードが機能しなくなるといったことが起こります。知らないと、本当にドツボにハマってしまうのですが、これと似たようなトラブルは結構あるのです。ネットにもあまり情報はなく、途方に暮れてWooCommerceを諦めてしまったユーザーは沢山いたのだろうと思います。
日本語の情報が乏しい場合、WordPressは英語で検索すると膨大な情報がありますが、上記のバグについてはあまりなく、やはり英語圏ではない2バイト文字圏(中国語、日本語、韓国語など)ならではの悩みなのでしょう。当サイトも散々泣かされた経験から、きっと皆様のお役に立てると確信しています。クセはありますが、カスタムの自由度は無限大のWooCommerceで、理想のECサイトを構築しましょう。

当サイトはデモサイトのため、特定商取引法に基づく表記やプライバシーポリシーはありませんが、返金はいたしません。このような運用は決済会社の規約違反に該当する可能性がありますが、営利目的ではないこと、ココナラ等のスキルマーケットにおける外部誘導を防ぐ目的であることをご理解ください。

上部へスクロール