Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WooCommerceでカスタマイザーを追加する方法 (簡単)

カスタムプロダクトビルダーを使えば、オンラインショップの利用者は自分の好みや条件に合わせて商品をデザインし、パーソナライズすることができます。これは、あなたのオンラインストアが主に一点ものの商品を販売している場合、必要不可欠なツールとなります。そうでなければ、カスタマイズ可能な商品をいくつか提供することで、商品カタログをより楽しいものにすることができます。

長年にわたり、私たちは何千人ものユーザーがカスタマイズ可能な商品を含む多くの高度な機能を備えたWooCommerceウェブサイトを立ち上げるお手伝いをしてきました。

私たちの経験では、これは通常、カスタム製品ビルダーを作成するためにコードを編集する必要があります。しかし、これは初心者にとって理想的ではないため、私たちはよりユーザーフレンドリーなオプションをいくつか検討しました。

調査とテストの結果、WooCommerceに商品ビルダーを追加する最良の方法は、Zakekeプラグインを使用することだとわかりました。使い方は簡単で、コードを一行も触る必要はありません。

この記事では、WooCommerceでカスタム商品ビルダーを簡単に追加する方法を紹介します。

How to add a custom product builder in WooCommerce

なぜWooCommerceにカスタマイザーを追加するのか?

WooCommerceにカスタマイザーを追加すると、顧客が注文する前に商品をカスタマイズすることができます。

例えば、プリントオンデマンドの商品を追加し、カスタマイザーが商品にロゴや画像、テキストを追加することができます。

WooCommerceのカスタムプロダクトデザイナーは、独自の製品を販売するために使用することができ、買い物客は出荷前にそれらをパーソナライズすることができます。

あるいは、ドロップシッピング・ビジネスを始め、カスタマイズや発送をサードパーティー・ベンダーに任せることもできる。

それでは、WooCommerceストアにカスタマイザーを追加する方法を見てみましょう。

WooCommmerceストアにカスタム商品ビルダーを追加する

このチュートリアルでは、Zakekeを使用します。これはWooCommerceプロダクトカスタマイザーツールで、ユーザーにシームレスなプロダクトビルダー体験を提供します。商品デザイナーは、ストアオーナーだけでなく、カスタマイザーにとっても使いやすいツールです。

まず、Zakekeのサイトにアクセスし、アカウントを登録してください。無料トライアル開始」ボタンをクリックすれば、すぐに始められます。

Zakeke

Zakekeは、WooCommerceを含む最も人気のあるeコマースプラットフォームで動作します。

店舗をZakekeに接続するには、WordPressサイトの管理エリアに戻ります。

次に、無料の Zakeke プラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

この無料プラグインは、あなたのサイトとZakeke商品ビルダーを接続する役割を果たします。

有効化すると、WooCommerce ストアとZakeke アカウントを接続するよう求められます。接続」ボタンをクリックしてください。

Connect Zakeke

WooCommerceストアでアクションを実行するためにZakekeへのアクセスを許可するかどうか尋ねられます。

先に進むには「承認」ボタンをクリックしてください。

Connect Zakeke to WooCommerce

ダッシュボードが表示されます。

左側のメニューから「カスタマイズ可能な製品」オプションに向かうことができます。

Go to customizable products

これで、顧客がカスタマイズできる商品を追加する準備が整いました。

最初のカスタマイズ可能な製品を追加する

カスタマイズ可能な商品に入ったら、「追加」ボタンをクリックしてください。

Add your custom product

その後、自分のストアから商品を選んだり、ゼロから商品を作ったり、プリント・オン・デマンド・サービスを選択したりすることができる。

このチュートリアルでは、私たちのデモストアから商品を追加することにします。

Choose where to get your product from

次に、Zakekeはあなたのストアから商品を読み込みます。

設定したい製品を選択する必要があります。

Choose a product from your store

その後、Zakekeはあなたのストアから商品画像を選択します。

別の画像を使用したい場合は、アップロードすることができます。また、商品画像の裏面をアップロードしたり、バリエーションを追加することもできます。

Change custom product image

商品画像に問題がなければ、「印刷エリアを設定」ボタンをクリックします。

このポップアップが表示されるので、マウスで線を引き、測定値をプロバイダーで指定するだけで、定規を設定することができます。

Make a line with the ruler

次に、印刷エリアの形状を選択し、製品画像上に描画する必要があります。

このチュートリアルでは、長方形のシェイプを使用します。

Create a rectangular area on your product

完了したら、「保存」ボタンをクリックして続行します。

次に、『バリエーションは提供しませんので、プレビューへ』ボタンをクリックする必要があります。

Go to product preview

商品の詳細が表示されます。

保存」ボタンをクリックして変更を保存することを忘れないでください。

View preview and save custom product

Zakekeはカスタムプロダクトビルダーのプレビューを表示します。

すべてが正しく機能しているかどうかをテストし、必要に応じて変更を加えることができます。テスト注文をするオプションもあります。

Test the custom product builder

変更が完了したら、上部にある「公開する」ボタンをクリックします。

印刷方法の設定

次のステップは印刷方法の設定です。ここでは、デザインファイルを印刷用にフォーマットする方法を選択できます。

ダッシュボードから「印刷方法」を選択し、「追加」ボタンをクリックします。

Add a printing method

ここから、カスタマイザーに使用させたい印刷機能を選択できます。

また、ファイルの種類、解像度、形式も選択できます。ユーザーが製品にテキストボックスを追加できるようにする場合は、テキストのスタイル、フォント、フォーマット、色、サイズなどをコントロールするオプションがあります。

Edit printing method details

一番下に、この方法を適用する既存の製品を選択することができます。

保存」ボタンをクリックして変更を保存することを忘れないでください。

Select products to apply printing methods

WooCommerceでカスタマイザーを使用する

Zakekeは、商品コンフィギュレーターを使用して追加したすべての商品に商品カスタマイザーオプションを追加します。

あなたのストアで製品を訪問するだけで、製品をカスタマイズするオプションが表示されます。

Customize your product

プロダクトデザイナーのインターフェースが開き、右側にプロダクトイメージデザインツールのプレビューが表示されます。

ユーザーは端末やソーシャルメディアのアカウントからテキストを追加したり、画像をアップロードしたりできる。

Add image to product in the builder

また、角をドラッグするだけで、印刷エリア内の画像やテキストを調整することもできる。また、異なるフォント、色、スタイルを選択するオプションもあります。

完成したら、ユーザーはデザインのコピーをPDFでダウンロードしたり、保存したり、あるいは単にお買い物カゴに入れたりすることができる。

その後、カスタマイザーはお買い物カゴにカスタマイズした商品をプレビューしながら、通常通りチェックアウトすることができます。

View cart with custom product

ボーナスのヒントWooCommerceでよりカスタマイズ可能な商品を販売する

カスタマイズ可能な製品と洗練された製品デザイナーは、売上を伸ばすのに役立ちます。しかし、顧客は商品のカスタマイズやデザインができることを知らないかもしれません。

そこでOptinMonsterの出番です。

WooCommerceの訪問者を簡単に有料顧客に変えることができる、市場で最高のコンバージョン最適化ソフトウェアです。

OptinMonsterには、ライトボックスポップアップ、スライドインポップアップ、通知バー、カウントダウンタイマーなどがあります。これらのツールはすべて、適切なメッセージを適切なタイミングでカスタマイザーに表示するのに役立ちます。

Upsell popup preview

強力な表示ルールにより、カスタマイザーにターゲットを絞り、パーソナライズされたキャンペーンを表示することができます。

例えば、特定のエリアの顧客に送料を無料にしたり、カスタマイズ可能な商品をスライド式のポップアップで表示したり、期間限定のクーポンを発行してお買い物カゴの売上を回復させたりすることができます。

OptinMonster countdown timer

この投稿がWooCommerceでカスタマイザーを簡単に追加する方法を学ぶのにお役に立てば幸いです。また、WooCommerceでコンバージョンをトラッキングしてビジネスを成長させる方法や、最高のWooCommerceホスティングサービスプロバイダーの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。