WordPressでオンラインeコマースストアのウェブサイトを作成する方法

Eコマースは、非常に高いオーバーヘッドコストの実店舗ビジネスを立ち上げることなく、月に6桁の収益を得ることが非常に簡単になるため、非常にホットです。.


しかし、多くの人にとっての問題は、Shopifyのようなほとんどの電子商取引プラットフォームの高額な月額料金です。始めたばかりの場合は、マーケティングや広告などにもっと費やすことができるように、より手頃なソリューションが必要です。.

良い知らせは、オンラインで製品を販売できるようにするためにShopifyで毎月高い料金を支払う必要がないことです。 Shopifyの代替案またはeBayの代替案を探している場合は、このステップバイステップチュートリアルで無料の素晴らしいオンラインショップを利用できます。.

必要なのはウェブホスティングアカウントと少しの労力だけで、すぐにeコマースウェブサイトを作成できます.


始めましょう!

必要なもの:

  • ホスティング. SiteGroundをお勧めします.
  • ドメイン名.
  • ワードプレスのテーマ. このチュートリアルでは、無料のAstraテーマを使用します.
  • WordPressページビルダー. これには、無料のElementorページビルダーを使用します.
  • WooCommerce, 最高のeコマースWordPressプラグイン.

ステップ1. Webホスティングとドメイン名を購入する.

このウェブサイト構築ビジネス全体に慣れていない場合は、まずウェブホスティングとドメイン名とは何か、なぜそれらが必要なのかを説明しましょう。.

ホスティングとドメイン名とは?

ウェブホスティングはあなたのウェブサイトが置かれるインターネット上の場所です。物を見つけることができる実際の家のようなものです。一方、ドメイン名はあなたのウェブサイトのアドレスです。それは、あなたが人々に与えてあなたの家に訪問するためにあなたが与えるあなたの住所のようなものです。 「Facebook.com」、「Google.com」、「WordPress.com」はすべてドメイン名の例です.

ドメイン名を販売しているほぼすべてのWebサイトでドメイン名を購入できます。あなただけの最高の価格を探す必要があります。ただし、ウェブサイトのホスティングについては、信頼できる会社からのみホスティングを取得することが絶対に重要です。ホスティングが遅い場合や信頼性が低い場合、ウェブサイトの速度とアップタイムが低下し、最終的にはeコマースビジネスに悪影響を及ぼします.

Siteground、私の好みのWebホスティングサービス

高品質のWebホスティングサービスを使用してeコマースWebサイトを作成できますが、このチュートリアルでは、Sitegroundを使用します.

SiteGroundは、WordPressユーザーに対応しているにもかかわらず、手頃な価格でオンラインで強く推奨されるWebホストです。彼らはその速いパフォーマンスと同様に速いサポートで最もよく知られています.

SiteGroundの主な機能は次のとおりです。

  • 無料のSSL証明書
  • FASTの知識豊富なサポート
  • WordPressステージング環境
  • 無料のウェブサイト移行
  • 30日間のバックアップ

SiteGroundは、Webホスティングのニーズに適した選択です。彼らはワードプレスのウェブサイトに対応し、競合他社よりも少ないリソースを提供していますが、信頼性は高いです.

私は彼らと素晴らしい契約を結び、使用してサインアップした人に70%の割引を提供しました このリンク. ホスティングの費用を節約したいなら, このリンクをクリックしてください 今すぐホスティングを購入.

ホームページにアクセスすると、4種類のホスティングが表示されます。

サイトプランを選択

WordPressホスティングを選択してクリック 始めましょう. 次に、3つの料金プランが表示されます。

siteground wordpressホスティング料金

ニーズや予算に合わせてお選びください。あなたも彼らをチェックすることができます 各ホスティングプランの比較 どの計画があなたのニーズに最も適しているかについてより良いアイデアを得るため.

計画が決まったら、 プランを取得. 次に、ドメインを選択する必要があるページに移動します。すでにドメイン名を購入している場合は、「すでにドメインを持っています」を選択します。ドメインがない場合は、[新しいドメインを登録]を選択して、Siteground内でドメインを購入します.

ドメインを選択

気に入ったドメイン名を入手したら、 続行. 次のステップは、購入を完了するための個人情報と請求詳細を提供することです。詳細を正確に入力してクリック 今払う. これで信頼できるWebホスティングとドメイン名が得られました.

ステップ2。 WordPressをインストールする.

WordPressはオープンソースの無料ツールで、コーディングの手がかりがなくてもウェブサイトを構築できます。これは、これまでで最も簡単で強力なWebサイトコンテンツ管理システムです。 WordPressにはたくさんの魅力があります。私のチュートリアルをもっと読んだり、私のビデオを見たりすると、WordPressが技術者以外の人のためのWebサイトを作成するのに最適なツールだと思う理由がわかります。.

Sitegroundには、WordPressのインストールと設定の面倒な作業をすべて行うワンクリックのWordPressインストールが実際に付属しています.

ホスティングの購入が完了すると、次のようなリンクの画面が表示されます 「お客様エリアに進む」. それをクリックすると、新しいホスティングアカウントを設定できるページが表示されます。下 ウェブサイトを設定する, 選択する 新しいウェブサイトを開始.

次に、インストールできるソフトウェアのリストが表示されます。選択する ワードプレス.

ワードプレスをインストールする

次に、メールアドレス、ユーザー名、パスワードなど、新しいWebサイトの管理者ログイン詳細を提供する必要があります。これらを使用してWebサイトにログインするため、これらの詳細を保護してください。.

それが終わったら、 確認 > 完全なセットアップ. これで、自己ホスト型のWordPressウェブサイトができました.

ウェブサイトのカスタマイズを開始するには、WordPressバックエンドにログインする必要があります。これを行うには、Sitegroundダッシュボードに移動し、 私のアカウント タブ。クリック 取り付け タブをクリックすると、ここに登録したドメイン名が表示されます。向こうは緑です 管理ポータルに移動 ボタン。このボタンをクリックして、WordPressログインページに移動します.

WordPress管理ダッシュボードに移動

WordPressのログインページには通常、次の形式があります。 yourdomain.com/wp-admin そして yourdomain.com/wp-login. ログインページのURLを覚えておいてください。次回URLをアドレスバーに直接入力することで、Sitegroundにログインしなくてもアクセスできるようになります。.

WordPressログインページは次のようになります。

ワードプレスのログインページ

ここにユーザー名とパスワードを入力して、初めてウェブサイトにログインします.

ステップ3. AstraテーマとAstraサイトをインストールする.

Astra Themeは、eコマースWebサイトをできるだけ早く見栄えよくするために使用するテーマです。必要に応じて他のテーマを使用できますが、このチュートリアルでは、Astraテーマを使用します.

Astraは無料のWordPressテーマで、スピードとシンプルさが優れています。 Astraサイト(無料のプラグイン)とペアリングすると、マウスを数回クリックするだけで誰でも美しいWebサイトを作成できます。 Astraを完璧なテーマにするProバージョンもあります。.

Astraで最も気に入っている機能は次のとおりです。

  • 利用可能な最速のテーマの1つ
  • 100以上のスターターサイト(ほとんどは100%無料)
  • 柔軟なメガメニュー機能
  • 強力なアドオンパッケージ
  • 広範なWooCommerceサポート

Astra Themeは、あらゆるWordPress Webデザインプロジェクトに最適です。実際、これは私がこのウェブサイトとすべてのウェブサイトプロジェクトで使用しているテーマです.

私は開発者に完全に自信があり、テーマがいかにうまくコーディングされているかに非常に感銘を受けました.

しかし、それ以上に、テーマはそれに注がれたすべての注意と思考のために、使用するのがとても簡単です。ほとんどの場合、使用しているツールに基づいて自動設定されます.

Astraをインストールするには、 外観 > テーマ > 新しく追加する. Astraを検索し、クリックします インストール, そして 活性化.

アストラテーマのインストール

私がAstraを愛しているもう1つのことは、それに呼ばれるプラグインがあるという事実です アストラスターターサイト 事前に作成された無料およびプレミアムテンプレートのライブラリを使用します。数回クリックするだけで、これらのテンプレートを自分のWebサイトに使用できます。 Astra Siteテンプレートを使用して、ウェブサイトの作成時間を半分に短縮します.

Astraをインストールすると、ダッシュボードに次のメッセージが表示されます。

アストラサイトが始まります

クリック 始めましょう. Astra Starter Sitesがインストールされます.

ページビルダーの選択

次に、どちらのページビルダーを使用するかを尋ねられます。このチュートリアルでは、Elementorを使用します。 Elementorは、WordPressのWebデザインを席巻したWordPressページビルダーです。それは最も深い機能セットを持っていましたが、非常に使いやすく、習得も簡単です。 Elementorは、最もフル機能を備えた無料のページビルダーです。さらに開発者向け機能を追加するためのProアドオンもあります.

Elementorの主な機能:

  • ライブフロントエンドページエディター
  • ウェブサイトのパーソナライズ機能
  • テンプレートとブロックライブラリ
  • 幅広いモバイル対応オプション
  • 最も強力なポップアップビルダー
  • PRO:カスタムヘッダー/フッターを作成する
  • PRO:投稿タイプのレイアウトを作成する

Elementorは現在利用可能な最強のページビルダーです。彼らは常に、現在の設計トレンドに沿った新機能をリリースしています。これは、あなたのウェブサイトを適切に保つことができることを意味します。途中で高度な機能にアクセスしたい場合は、Elementor Proにアップグレードできます。これは、含まれているすべての追加モジュールと電源機能を考慮すると、信じられないほどの価値だと思います.

Astraサイトのテーマの選択

ページビルダーを選択すると、Astra Sitesテンプレートのライブラリが表示されます。使用できる美しいテンプレートがたくさんあります。時間をかけて、必要なテンプレートを選択してください。また、これらのテンプレートは、選択したページビルダーで完全に編集できるため、見出し、画像、色、ロゴなど、Webサイトのすべての部分と要素をカスタマイズできます。.

このチュートリアルでは、カスタム印刷テンプレートを使用します。これは、見栄えがよく、非常にeコマース指向であるためです。.

テーマをインストールするには、クリックしてプレビューに移動するだけです。表示内容が気に入ったら、 テーマをインポート ボタンをクリックして、ボックスがすべてチェックされていることを確認します.

気づいたら、「必要なプラグインをインストールする」というボックスがあります。このボックスをオンにすると、テーマに必要なすべてのプラグインがインストールされ、テーマが正確に表示されます。カスタム印刷テーマの場合、Elementor、WooCommerce、およびWPFormsがインストールされます。これにより、これらのプラグインを1つずつインストールする必要がなくなるため、時間を大幅に節約できます。すべては私のために行われました.

アストラサイトテーマのインポート

テーマのインポートにはしばらく時間がかかる場合があります。ブラウザを閉じたり、更新を押したりしないでください。お待ちください。完了すると、青色が表示されます サイトを見る ボタン。そのボタンをクリックして、インポートしたばかりのテーマを含むWebサイトに移動します.

ステップ4.ウェブサイトをカスタマイズする.

あなたのウェブサイトは見事に見えますが、あなたはそれをあなた自身のものにしたいと思うでしょう。まず、カラーパレットを選択します。すでにあなたのブランドカラーを持っているなら、これはより簡単になるでしょう.

カラーパレットの選択

通常、ウェブサイトには、原色、アクセントカラー、ポップカラーの3色のセットがあります。原色はあなたのウェブサイトの支配的な色であり、おそらくあなたのブランドの色です。アクセントカラーは、見出しや投稿タイトルに目を引くために少し違って見えるようにする場合に通常使用されます。最後に、ポップの色を他の色と対比させて、行動を促すフレーズのボタンなど、ウェブサイトの重要な要素を際立たせる必要があります。.

Webサイトのカラーパレットを選択するには、2つのツールを使用します。最初は Coolors.co さまざまなカラーパレットを参照して、Webサイトで使用するものを選択できます.

クーラーホームページ

気に入ったパレットが見つかったら、その上にマウスを置いてクリックします。 見る, 新しいウィンドウが開き、各色の16進コードが表示されます.

16進コードのカラーパレット

これらの16進コードは、Webサイトでこれらの色を使用するために必要なものです。後で、これらの16進コードをWordPressバックエンドで使用する方法を紹介します.

もう1つの素晴らしいツールはColorzillaです。これは、Google Chromeの拡張機能であり、任意のWebサイトに表示される任意の色の16進コードを取得して、自分で使用できます。 Colorzilla拡張機能を入手したい場合, ここをクリック. 次にクリック Chromeに追加.

colorzilla

しばらく時間がかかる場合がありますが、完了すると、ツールバーに次のアイコンが表示されます。

colorzillaアイコン

したがって、自分のWebサイトで試して使用したいWebサイトに色が表示された場合は、このアイコンをクリックして、コピーする色をクリックするだけです。 16進コードが自動的にコピーされ、Webサイトのバックエンドに貼り付けることができます。とても簡単です。これはワンクリックで素晴らしい色を使用できる便利なツールです.

タイポグラフィのカスタマイズ

また、独自のタイポグラフィを使用して、Webサイトを目立たせたいとします。 Webサイトには通常2〜3のフォントがあります。見出しやメニューのフォント、本文のフォント、追加の「ポップフォント」が用意されています。色と同様に、フォントだけを使用することはできません。あなたはそれらが一緒によく見えることを確認し、あなたのブランドについて正しいメッセージを送る必要があります.

使うのが好き Fontpair.co これは、2つの異なるフォントがどのように見えるかを示すWebサイトです.

fontpairs.coの使用

気に入ったものが見つかったら、その名前をメモして、WordPressにアクセスして直接追加できるようにします。.

また、どのフォントがどのWebサイトで使用されているかを通知するGoogle Chrome拡張機能であるWhatFontを使用することも好きです。 WhatFontをインストールするには, ここをクリック 次にクリック Chromeに追加. すると、ツールバーにこのアイコンが表示されます。

whatfontアイコン

フォントの名前を知りたい場合は、このアイコンをクリックして、テキストの上にマウスを置きます。 WhatFontはこのフォントの名前を教えてくれます。クリックすると、フォントサイズ、色、ファミリ、スタイル、太さなども表示されます.

whatfontを使用

ロゴを取得する

また、ウェブサイトを際立たせ、ブランドアイデンティティを確立するためのブランドロゴも必要です。ロゴを取得する方法はいくつかあります。と呼ばれる素晴らしい設計ツールを使用して、自分で試してみることができます カンヴァ. 初心者でも簡単にデザインできるのでとても人気があります.

Canvaには、独自のロゴテンプレートを作成するために変更できる多数のロゴテンプレートが付属しています。ただし、ロゴを透明な背景でエクスポートする場合は、Proにアップグレードする必要があります(1か月の無料トライアルがあります)。あなたはいつでもPhotoshopに行くことができます フォトピース 背景を削除しますが、プロセスに1つのステップを追加するだけです。.

canvaロゴ

時間を節約したい場合は、フリーランスのロゴデザイナーを雇うだけです。 Fiverr.comや99designなどのウェブサイトを試すことができますが、スタイル、実績、レビュー、評価などに基づいてアーティストを選択するときは注意が必要です.

ウェブサイトをカスタマイズする

次に、これらの色、フォント、ロゴをWebサイトで使用します。 WordPressバックエンドダッシュボードを使用している場合は、 外観 > カスタマイズ テーマカスタマイザを開く.

テーマをカスタマイズする

ウェブサイトのフロントエンドにいて、上部に黒いバーがある場合は、 カスタマイズ カスタマイザを開く.

テーマをカスタマイズする

テーマカスタマイザは次のようになります。

テーマカスタマイザ

ここでは、ロゴをアップロードしたり、サイトの色やタイポグラフィを変更したり、ボタンをカスタマイズしたりできます。ここで行った変更はWebサイトにリアルタイムで表示されるため、どのように表示されるかをすぐに確認できます。また、テーマごとに異なるカスタマイズオプションがあるため、Astra以外の別のテーマを使用している場合は、ここに異なるオプションが表示されることがあります.

Astraでサイトの色を変更するには、 色と背景. 基本色、ブレッドクラム、ヘッダー、フッターバーの色を変更するオプションがあります.

色背景エディタ

基本色は、Webサイトのテーマ、リンク、テキスト、およびリンクホバーの色です。たとえば、テーマの色を変更する場合は、 色を選択. 色を選択するには2つの方法があります。まず、ボックスに16進コードを貼り付けることができます。したがって、Coolors.coまたはその他の場所で色を見つけた場合は、ここに16進コードを貼り付けることができます。組み込みの選択ツールで色を選択することもできます.

ベースカラーエディター

サイトのタイポグラフィを変更するには、カスタマイザのメインメニューに戻り、 タイポグラフィ. ベース、ブレッドクラム、コンテンツ、ブログのタイポグラフィを変更できるようになります.

タイポグラフィカスタマイザ

次に、ロゴを追加します。ロゴをアップロードするには、 レイアウト > ヘッダ > サイトID. [ロゴ]セクションで、 ロゴを変更 ボタンをクリックしてロゴをアップロード.

ロゴをアップロード

Astraでは、ロゴの幅を調整して、表示する大きさを変更することもできます。下にスクロールすると、サイトのタイトルを変更したり、サイトのタグラインを追加したり、サイトのアイコンやファビコンを追加したりできます.

Astraのカスタマイズ領域では、サイトコンテンツの幅の変更、ブログ投稿の構造の変更、フッターとヘッダーのカスタマイズなど、さらに多くのことができます。ここでオプションを調べて、自分のWebサイトに最適なものを確認してください.

カスタマイズが完了したら、クリックすることを忘れないでください 公開する 変更をサイトに公開するには.

ステップ5. Elementorを使用してWebサイトをカスタマイズする.

この時点で、サイトの色の変更、タイポグラフィ、ロゴの追加など、カスタマイズの基本が完了しました。さて、要点を詳しく説明し、Elementor(または好みのページビルダー)を使用して、サイトの外観を完全に変更します。.

前にも述べたように、このチュートリアルではElementorを使用します。これは単にベストだと思いますが、使い慣れている任意のページビルダーを使用できます。.

Elementorの内部では、Web開発者をコーディングしたり雇ったりすることなく、Webサイトでほとんど何でもできます。要素の追加は、単純なドラッグアンドドロッププロセスです.

Elementorでページを編集するには2つの方法があります。まず、WordPressバックエンドを使用している場合は、 ページ Astraサイトテンプレートで自動的に作成されたページを含む、Webサイトのすべてのページのリストが表示されます。特定のページビルダー(Elementorなど)で作成されたページには、次のようなラベルが付けられます。

ページ

ページビルダーでページを編集するには、マウスをそのページの上に置いてクリックします (ページビルダー)で編集する. 私の場合、それは Elementorで編集.

elementorで編集する

それをクリックすると、Elementor内に移動します.

もう1つの方法は、ウェブサイトのフロントエンドにいる場合は、編集するページに移動してクリックします elementorで編集 上部の黒いバー:

elementorで編集する

これらのいずれかがElementorの内部に入ります。 Elementorに入ると、見出しに別の画像を使用したり、テキストを変更したり、アイコンを変更したりできます。まず、見出しにあるテキストと画像をビジネスに合わせて変更します。 Elementor内のテキストで実行できることをいくつか示します。

elementorでテキストを編集する

ご覧のとおり、コンテンツ編集エリアでテキストを変更したり、サイズ、太さ、色、タイポグラフィファミリーを変更したりできます。シンプルなフェード、ズームなどのアニメーションを追加することもできます。あなたのウェブサイトにスパイスを追加するためにここでできることはたくさんあります.

また、ビジネスの性質に合わせてウェブサイトの画像を変更することもできます。 Elementorで画像を変更するのはとても簡単です。画像をクリックするだけで、オプションが左側のサイドバーに表示されます。新しい画像をアップロードしたり、サイズを変更したり、境界線や影を追加したり、アニメーションを追加したりできます。.

elementorで画像を編集する

Elementor内では、ボタンのテキストを変更したり、声の領域をカスタマイズしたり、テキスト、画像、ボタン、ビデオなどの要素/ブロックを追加したりすることもできます.

Elementor Proには、フォームを追加する機能(通常はサードパーティのプラグインが必要です)、独自のフォントをアップロードする機能、スライダーを追加する機能、価格表と価格表を追加する機能、ヘッダーとフッターをカスタマイズする機能など、さらに多くの機能が付属しています(これは、ほとんどのページビルダーにとって立ち入り禁止です)、そしてそれ以上に.

Elementor Proを購入し、同時にElementor Proコースに無料でアクセスしたい場合は、こちらのリンクをクリックしてください.

ステップ5. WooCommerceをセットアップする.

WooCommerceをセットアップする時が来ました。WooCommerceは、任意のWebサイトをオンラインストアに変えるWordPressプラグインです。製品の追加、オンライン支払いの受け入れ、クーポンの作成、配送と課税の設定などを行うことができます.

WooCommerceは、カスタム印刷Astraサイトテーマによって既にインストールされているので、ここに移動して設定する必要があります。 WooCommerceをまだインストールしていない場合は、 プラグイン > 新しく追加する WooCommerceを検索します.

私たちがしなければならない最初のことは行くことです WooCommerce > 設定. 7つのタブが表示されます:一般、製品、配送、支払い、アカウントとプライバシー、メール、詳細.

まず、 一般的な タブ。このタブでは、販売および発送する国の店舗住所を設定し、税率を有効にできます.

woocommerceの一般設定

下にスクロールすると、クーポンを有効にするオプションが表示され、通貨や表示場所など、Webサイトでの価格の表示方法をカスタマイズできます。.

次は 製品 製品関連のオプションを設定できるタブ。ショップページにするページ、訪問者がカートに商品を追加したときの動作、商品の寸法の設定、カスタマーレビューの有効化と設定、星評価の有効化を設定できます.

woocommerce製品設定

このセクションの上部には、次のオプションもあります。 在庫 そして ダウンロード可能な製品. [在庫]セクションで、横にあるチェックボックスをオンにすると 在庫管理を有効にする, 在庫の管理に役立つオプションのリストが表示されます。たとえば、低い在庫しきい値を設定して、在庫がその数に達したときに通知が送信されるようにすることができます。あなたのウェブサイトから在庫アイテムを隠すことを選択することもできます.

在庫設定ウーコマース

に関しては ダウンロード可能な製品 セクションでは、これはウェブサイトでダウンロード可能なコンテンツを販売している場合にのみ関連するため、純粋に物理的な製品を販売している場合は、これをスキップできます。商品をダウンロードする前に、購入者にログインを要求するオプションがあります。支払い後にダウンロードへのアクセスを許可することもできます.

ダウンロード可能な製品オプション

次のタブは 運送. これは、バイヤーに発送される物理的な製品を販売する場合にのみ関係します。このタブ内には3つのサブセクションがあります。 配送ゾーン、配送オプション、配送クラス.

配送ゾーンでは、配送ゾーンを追加し、利用可能な配送方法をこれらのゾーンに割り当てる必要があります。複数の国に発送する場合、これにはしばらく時間がかかります.

配送ゾーン

配送ゾーンについてさらにサポートが必要な場合は、WooCommerceの配送ゾーンをご覧ください ドキュメンテーション.

次は 配送オプション セクション。このセクションでは、Webサイトでの配送料の表示方法を制御し、デフォルトまたは必要な配送先を設定できます.

配送オプション

配送の最後のセクションは 配送クラス. 送料クラスを使用すると、商品のグループに異なる送料を割り当てることができます(たとえば、より多くの送料が必要な重い商品).

配送クラス

送料を設定するには、 配送ゾーン 「定額」などの既存の配送方法を作成または編集する.

送料を追加

クリックしたら 編集する, ポップアップウィンドウが表示されます。ここでは、作成した配送クラスの定額配送料金と追加料金を追加できます.

配送クラスの送料

配送設定の構成についてさらにサポートが必要な場合は、WooCommerceの 発送に関するドキュメント.

それでは次に進みましょう お支払い. このタブでは、PayPal、直接銀行振込、代金引換などの支払いゲートウェイを有効または無効にできます。メソッドを有効にしたら、 セットアップ アカウントをリンクして、支払いの受け取りを開始します.

お支払い方法

Stripeの支払いを受け入れることができるようにしたい場合は、次のプラグインをインストールできます。 WooCommerce Stripe Payment Gateway. に行くだけ プラグイン > 新しく追加する プラグインを検索します。このプラグインをインストールしてアクティブ化すると、WooCommerceでStripe支払い方法が有効になりますが、 WooCommerce > 設定 > お支払い セットアップする.

の中に アカウントとプライバシー タブでは、アカウントの作成とユーザーのプライバシーに関連する設定を構成できます。ゲストがアカウントを作成せずに購入することを許可し、プライバシーページとポリシーページを設定し、ユーザーデータを保持する期間を選択できます.

アカウントとプライバシー

次は メール 特定の条件に基づいてWooCommerceが自動的に送信するメールのリストが表示されるタブ。たとえば、新しい注文が行われるたびに、選択したメールアドレスにメールを送信できます。注文の払い戻しや完了など、お客様の注文に関する最新情報をメールで確認することもできます.

メール通知

最後に、 上級 APIタブに代わるタブでは、カートセットアップページまたはチェックアウトページとして機能するページをWooCommerceに通知できるページ設定などのより技術的な詳細を設定できます.

ページ設定woocommerce

下にスクロールすると、WooCommerceがエンドポイントとして呼び出すものを変更できます。これは、新しいページを必要とせずに異なるコンテンツを表示できるようにするURLの付属物です。.

ステップ6.製品を追加する.

WooCommerceの基本設定が完了したら、次は製品を追加します。このチュートリアルで使用したAstra Siteテーマには、すでにサンプル製品が付属しており、これはフロントエンドでの製品ページの外観です。

商品ページ

これを変更して、バックエンドに独自の製品を追加する方法を見てみましょう.

新しい製品を追加するか、既存の製品を編集するには、メニューオプションをクリックするだけです 製品 WordPressダッシュボードの左側のサイドバー。所有しているすべての製品のリストが表示されます。または、商品ページのフロントエンドにいる場合は、 製品を編集する ページ上部の黒いバーにあります。これにより、製品エディターに直接移動します.

製品エディター

ここで、商品のタイトルと商品の説明を変更できます。下にスクロールすると、次のセクションが表示されます 製品データ. これは、ほとんどの時間を費やす場所です。ここでは、製品のタイプを選択でき、そこから他の製品設定を構成できます.

WooCommerceでは、次のタイプの製品を追加できます。

  • 物理的、ダウンロード可能、仮想. 仮想製品は必ずしもダウンロードする必要はありません。例は、アポイントメントまたは1対1のコーチングセッションです。.
  • シンプルな商品. こちらは単品商品です.
  • グループ化された製品. これはさまざまな製品のバンドルです.
  • 外部製品. アフィリエイトリンクなど、ウェブサイト外で購入した商品.
  • 可変製品. 可変商品には、色やサイズなどのバリエーションがあります.
製品タイプ

新しい製品を作成するときは常に、最初のステップはそのタイプを選択することです。各タイプには、異なるオプションのセットが付属しています。たとえば、ダウンロード可能な製品には次のオプションがあります。

ダウンロード可能な製品オプション

このセクションの左側には、在庫、配送、リンクされた商品などのオプションが表示されます.

在庫, SKUを追加したり、この特定の製品に特定の数の在庫を提供したり、在庫状況を設定したりできます。.

運送, 商品の重量と寸法を指定し、前のステップで作成した配送クラスを割り当てることができます.

製品データでの発送

リンクされた製品, アップセルとクロスセルのアイテムを製品に割り当てることができます。アップセルは、価格が高いため、現在の製品の代わりに推奨する製品です。クロスセルは、現在の製品に基づいてカートで推奨する製品です。アップセルまたはクロスセルを追加する場合は、対応するボックスに製品の名前を入力します.

リンクされた製品

また、商品の属性を の属性 セクション。サイズ、色、重量などを指定できます。また、可変商品を作成する場合は、最初にここに属性を追加する必要があります。可変商品の作成方法について詳しく知りたい場合は、 WooCommerceのガイドはこちら.

下にスクロールすると 製品データ ボックスに、製品の簡単な説明を追加できる領域が表示されます。この説明は、製品の横で価格の近くに表示されます。短くて甘いものにしてください。右側に商品画像を追加できます。より多くの製品画像がある場合は、それらを 製品ギャラリー セクション.

短い説明と製品画像

ページの上部にあるカタログの可視性を設定することも重要です。 公開する. 場合によっては、限定割引価格のクロスセルとして提供している可能性があるため、特定の製品を非表示にしたい場合があります。これができる場所です.

カタログの可視性

ここですべてを完了したら、クリックします 更新 すべての変更を保存するには.

さまざまな製品タイプとそれらを適切に作成する方法について詳しく知りたい場合は、 WooCommerceガイド 始めるのに最適な場所です。商品リストを作成するまで、ここで説明した手順とまったく同じ手順で、Webサイトに商品を追加していきます.

ステップ7.チェックアウトをカスタマイズする.

これまで見てきたように、WooCommerceは素晴らしいプラグインですが、これに対する一般的な不満はチェックアウトオプションがないことです。決済ページの外観を変更したり、決済ページを作成したりすることはできません。販売目標到達プロセスは、顧客の購入価値を高めるための優れた方法であるため、Webサイトにない場合は、実際にお金を残していることになります。.

eコマースWebサイトの販売目標到達プロセスを作成する場合は、CartFlowsが最適なプラグインです。これは、WordPress内で美しく非常に効果的なファネルを作成できるファネルビルダーWordPressプラグインです。.

カートフロー

CartFlowsで販売目標到達プロセスを作成する方法の詳細については、私が作成したこのチュートリアルをチェックしてください。.

ステップ8.カートを放棄する.

このチュートリアルを終了する前に、カートの放棄についてもう1つ追加します。 eコマースでは、多くの顧客が購入を完了せずにカートを放棄することになります。.

これには多くの理由が考えられます。彼らは気が散っていたかもしれません、電源または接続が消えた、緊急の何かが浮上しました。それが何であれ、あなたがそれについて何もしなければこれらの捨てられたカートの多くは売り上げを失います.

幸いにも、というプラグインがあります WooCommerceカート放棄回収 カートを放棄した顧客を追跡し、フォローアップメールを自動的に送信するプラグイン–すべて無料!

ここで使用したAstraサイトのテーマを使用した場合、このプラグインは既にインストールされています。しかし、そうでない場合は、次のようにしてインストールできます。 プラグイン > 新しく追加する プラグインを検索します.

それは呼ばれるWooCommerceの下に新しいオプションを作成します カートの放棄. これをクリックすると、放棄されたカートの数、回収されたカートの数、失われたカートの数の概要が表示されます.

回復可能な注文カートの放棄

また、WooCommerceが送信するフォローアップメールをカスタマイズして、 フォローアップメール タブ、編集するメールの上にマウスを置いて、 編集する.

フォローアップメール

次に、電子メールエディターが表示されます。

フォローアップメールのカスタマイズ

まとめ

eコマースのWordPressウェブサイトを作成するのは複雑で圧倒されるように思えるかもしれませんが、少し手伝って、自分でそれをどのように行うことができるかを示し、それを明らかにしたいと思います。サクセスストーリーを聞いてよかったです。何か助けが必要な場合は、下のコメントセクションで私に連絡できます.

SiteGround

SiteGroundは、WordPressユーザーに対応しているにもかかわらず、手頃な価格でオンラインで強く推奨されるWebホストです。彼らはその速いパフォーマンスと同様に速いサポートで最もよく知られています.

SiteGroundの主な機能:

  • 無料のSSL証明書
  • FASTの知識豊富なサポート
  • WordPressステージング環境
  • 無料のウェブサイト移行
  • 毎日のバックアップ

SiteGroundは、Webホスティングのニーズに適した選択です。彼らはワードプレスのウェブサイトに対応し、競合他社よりも少ないリソースを提供していますが、信頼性は高いです.

SiteGroundをチェックアウト

アストラテーマ

Astraは、スピードを重視した無料のWordPressテーマです。オプションで、Proバージョンを59ドルで購入できます。これにより、いくつかの追加設定とオプションが追加されます.

アストラテーマの主な機能:

  • 断食のテーマではありませんが、前屈みではありません
  • 無料のデモサイトがたくさん
  • 柔軟なメガメニュー機能
  • カスタムレイアウトオプション
  • WooCommerceサポート
  • LearnDashのサポート

Astra Themeは、あらゆるWordPress Webデザインプロジェクトに適した選択肢です。最大の質問は、ページビルダーがテーマを必要とするのと同じことをすべてやっているので、最近テーマを購入する必要があるかどうかだと思います。たとえば、Elementorには無料のHelloテーマがあり、ページビルダーがすべての作業を実行できます.

プロのテーマを購入する正当な理由はまだいくつかありますが、ほとんどの人にとって、彼らはおそらく無料のテーマで問題ないでしょう.

私にとっては、アストラテーマは現在のトレンドに追いついていないので、もうお勧めしません。.

組み込みのヘッダーおよびフッタービルダーを提供するより優れた最新のテーマが利用可能です。3つのレイアウトに加えて、より柔軟なページおよび投稿のレイアウトに制限されています.

アストラのテーマをチェック

Elementor

Elementorは、WordPressのWebデザインを席巻したWordPressページビルダーです。これは最も深い機能セットを備えていますが、非常に使いやすく、習得も簡単です。 Elementorは、最もフル機能を備えた無料のページビルダーです。さらに開発者向け機能を追加するためのProアドオンもあります.

Elementorの主な機能:

  • ライブフロントエンドページエディター
  • ウェブサイトのパーソナライゼーション機能
  • テンプレートとブロックライブラリ
  • 幅広いモバイル対応オプション
  • 最も強力なポップアップビルダー
  • PROカスタムヘッダー/フッターの作成
  • PRO投稿タイプレイアウトの作成

Elementorは現在利用可能な最強のページビルダーです。彼らは常に、現在の設計トレンドに沿った新機能をリリースしています。これはあなたのウェブサイトを適切に保つことができることを意味します.

Elementor Proは、それに含まれるすべての追加モジュールと電源機能を考慮すると、信じられないほどの価値があります.

今日新しいWebサイトプロジェクトを開始する場合、Elementorが私が選択するページビルダーになります。私はそれが使用する喜びであるWordPressページビルダーを持っている必要があると思います.

Elementorをチェックアウトする

CartFlows

CartFlowsはWordPressのセールスファンネルビルダーです。選択したページビルダーを使用して、セールスファネルをすばやく簡単に構築できます.

カートフローの主な機能:

  • プロがデザインしたテンプレート
  • 5つのロケーションオーダーバンプ
  • ワンクリックアップセル
  • お好みのページビルダーを使用してください
  • クリックファネルとは異なり拡張可能
  • カウントダウンタイマーとスプリットテスト

WordPressのセールスファンネルビルダーが必要で、自分でホスティングしたり、管理されたWordPressホスティングを使用することに問題がない場合、CartFlowsは非常に使いやすく、非常に強力であるため、優れたオプションです。.

CartFlowsをチェックする

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map