WooCommerceでユーザーがカスタマイズできる商品を作成してみる①

ECサイトで商品にラッピングや、オリジナルメッセージ、印刷文字などを入れたい場合があります。WordPressのECサイト構築プラグインであるWooCommerceを利用している場合、有償の拡張機能「Product Add-Ons」を用いることで、様々な追加オプションの設定を追加していくことが可能です。

色や、サイズなどのバリエーションの設定はWooCommerceの通常機能で対応できます。以下の記事にて取り上げています。

2023.05.24

WooCommerceでバリエーションのある商品を作成してみる

ECサイトで色やサイズなどのバリエーションがある商品を掲載したい場合があります。WordPressのECサイト構築プラグインであるWo...

前回の記事で、「どのような商品を掲載しますか？」のステップで「実在商品」「ダウンロード」以外のものは、有償のプラグインが別途必要となります。
という部分がありました。

＜前回の記事はコチラ＞
WooCommerceのインストールとストアの設定までは、以下の『WordPressでECサイトを作ってみる「WooCommerce」①』の記事で紹介しております。

2023.03.28

WordPressでECサイトを作ってみる「WooCommerce」①

ECサイト（通販サイト）は、EC-CUBEやShopify、WIXやBASEなどがサービスを提供していますが、WordPressでのサ...

「カスタマイズ可能な商品」で設定していく

「ストアの詳細」「業界」の次のステップ「商品タイプ」から説明していきます。

「どのような商品を掲載しますか？」から「カスタマイズ可能な商品」を選択します。
※予約の設定には別途、有償のプラグインを用います。
※カスタマイズが不要な商品もある場合は「実在商品」や「ダウンロード」にも合わせてチェックを入れておきましょう。

「カスタマイズ可能な商品」の横にあるⓘマークを選択すると、メッセージが現れます。

メッセージの内容は以下の様になっています。

「さらに詳しく」からは、予約のプラグインの説明ページに飛ぶことが出来ます。

「予約」の横にも金額の記載がありますが、プラグインの説明ページでも同じく金額が記載されています。

<iframe allowtransparency="true" title="Wistia video player" allowFullscreen frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" src="https://fast.wistia.net/embed/iframe/gbgxrmdleq" width="400" height="225"></iframe>

2023年5月現在では、「$4.92/月」「$59/年」となっています。

金額面についての確認も無事できたら、「次へ」を選択し進んでいきましょう。

金額面についての確認も無事できたら、「次へ」を選択し進んでいきましょう。

続いて「フリープラン機能ー含まれるビジネスプラン機能」の選択になります。こちらは矢印マークを押すと含まれる内容が明記されていますので、任意で不要なものは外しましょう。

最後に、使用するテーマの選択になります。現在有効化しているテーマを使用する場合は「有効なテーマをそのまま使用する」を選択してください。

ショップの設定が終わると図の画面に切り替わります。順番通りに「②ストアに カスタマイズ可能な商品 を追加」を進めていきましょう。

※図のページではない場合は、ダッシュボードの「WooCommerce（ホーム）」を選択するとこの画面になります。

「②ストアに カスタマイズ可能な商品 を追加」を選択すると、「以下の有料機能を今すぐストアに追加しますか ?」とでポップアップが出てきますので、すぐ進めていく場合は「今すぐ購入」を選択しましょう。

①「あなたの所在地を確認できませんでした。手動で検証してください。」のメッセージなので、気にせず設定を勧めます。
②メールアドレス
③確認用のメールアドレス
を入力します。

請求先住所を入れていきます。（カードまたは支払い方法に一致する住所を入力してください。）
④Last nameは、名（必須）
⑤First nameは、姓（必須）
⑥Company name (optional)は、会社名
⑦Country / Region国/地域は、「Japan」を選択します。（必須）
⑧Postcode / ZIPは、郵便番号 （必須）
⑨Prefectureは、都道府県（必須）

⑩Town / Cityは、町/市（必須）
⑪Street address-1は、町/市以下の住所（必須）
⑫Street address-2は、ビル名やマンション名等（必須）
⑬How do you use our products?は、当社の製品をどのように使用しますか?（選択）（必須）

「Payment Method」で、支払いのカード情報を入力します。
※決済は「Stripe」によって決済されます。Stripeのセキュリティについてはコチラ

⑭Protect your customers’ purchases and dataは、「顧客の購入とデータを保護する」というもので、月10ドルの「Jetpack VaultPress Backup」の拡張機能の追加になります。最初の14日間は無料トライアル期間になります。（設定は任意です）

⑮I'd like WooCommerce.com to send me updates about products, exclusive promotions and discounts. I can can opt out of receiving these communications at any time.

（設定は任意です）

⑯I am established, have my permanent address, or usually reside within Japan.

（チェックします）

Product Add-Onsの有効化

購入が完了したら、ワードプレスアカウント（Googleアカウント、AppleアカウントでのログインでもOK）の場合は、「ADD TO SITE」でサイトへ追加していきます。

今回は「DOWNLOAD」からZIPファイルでダウンロードし設定していきます。

※画面イメージはアカウントになっていますが、購入後の画面遷移は右側に上記項目があります。

ワードプレスの管理画面から「プラグイン＞新規追加＞プラグインのアップロード」からファイルを選択し、「今すぐインストール」を行いプラグインを有効化します。

Product Add-Onsの有効化が完了すると、「WooCommerce（ホーム）」のダッシュボードで、「カスタマイズ可能な商品を追加しました」となります。

さいごに

「Product Add-Ons」は、WooCommerceの公式のプラグインになります。ほかにも少し安いプラグインなどがありますが、機能性やWooCommerce自体のアップロードとの適合性などを考えた場合は、少し安いからといって別のプラグインを使用するよりも「Product Add-Ons」を最初から使っておく方が良いと思いましす。

実際に他のプラグインを使用した場合に、解消不能なエラーがデバッグモードで出続けるということも経験があります・・・

今回はWooCommerceの拡張機能Product Add-Onsの有効化までを行いました。
以下の記事では、実際にカスタマイズ可能な商品の作成をしていく部分を進めていきます。

2023.05.29

WooCommerceでユーザーがカスタマイズできる商品を作成してみる②

ECサイトで商品にラッピングや、オリジナルメッセージ、印刷文字などを入れたい場合があります。WordPressのECサイト構築プラグイ...