WooCommerceを使用してオンラインストアを作成する方法


WooCommerceとWordPressでオンラインストアを開始するこのチュートリアルでは、WooCommerce + WordPressオンラインストアを設定して、実際の商品をリストおよび販売する方法を説明します.


WooCommerceは、シンプルで簡単な無料のプラグインです。一言で言えば、WooCommerceはWordPressウェブサイトを完全に機能するeコマースストアに変える最良の方法です.

  • それは無料です とオープンソース– WordPressと同じように.
  • それは 最も人気のある電子商取引 WordPress用プラグイン.
  • あなたはできる 自分で設定して構成する.
  • セットアップが速い. 通常は1時間程度です.
  • それはどんなデザイン/テーマでも動作します 現在WordPressサイトにある-現在のウ​​ェブサイトのデザインを捨てる必要はありません.

上記のリストを続けることができますが、代わりに、WooCommerceはWordPressで高品質のeコマースストアを構築するために必要なすべてのことを提供するだけだとしましょう。.

WordPress + WooCommerceで何を売ることができますか?

  • デジタル製品(ソフトウェア、ダウンロード、電子ブックなど),
  • 物理的な製品,
  • サービス,
  • 予約(例:予約、または予約可能なその他のもの),
  • サブスクリプション,
  • 他の人の製品–アフィリエイトとして,
  • カスタマイズ(例:製品リストの追加のカスタマイズ)など.

つまり、あなたのウェブサイトでお金を稼ぐことができます.

WooCommerceはあなたに 何でも 値札を割り当てることができます。その上、誰でもそれを使用できます(すでにWordPressサイトを立ち上げている場合は、WooCommerceも処理できます).

WordPressとWooCommerceでオンラインストアを構築する方法

注:ガイドのこの部分の目的は、WordPressで機能するeコマースストアを構築する最も簡単な方法を示し、ストアをできるだけ早くオンラインにできるようにすることです。そのため、私たちは本質的なことだけに焦点を当て、より高度な側面をスキップします.

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

オンラインストアやその他の種類のウェブサイトを作成するには、次の2つが必要です。

  • ドメイン名 は、ショップ固有のウェブ上の住所です。何かのようなもの YOURSTORE.com
  • ウェブホスティング 基本的にはあなたのウェブサイトを保存し、それを訪問したい人にそれを提供するリモートコンピュータです。 (より詳細な説明)

完全な開示:Bluehostを購入するたびにコミッションを獲得します。これは、ビジネスとしてWebsiteSetupを実行するのに役立ちます。ご協力ありがとうございました.

何百もの異なるホスティング/ドメインプロバイダーがあり、通常両方ともBluehost.comから入手します。手頃な価格のWebホスティング(1年間無料のドメイン名を含む)と信頼性を提供します。また、WordPress.orgが推奨する数少ない(公式)ホスティングプロバイダーの1つでもあります。費用? $ 2.75 /月から.

まず、Bluehost.comにアクセスするだけです, 「開始」ボタンをクリックします.

Bluehostにサインアップ

これにより、ストアのホスティングプランを選択できるページが表示されます。 「basic」というラベルの付いた最も安価なオプションから始めることができます。

bluehost select
私たちの紹介リンクを使用すると、月額$ 2.75でBluehostを入手できます.

次のステップは、新しいオンラインストアのドメイン名を選択することです.

bluehostドメイン

これにはブレーンストーミングが必要です。一般的に、ドメイン名は ユニークな, 覚えやすい そして キャッチー. ストアにビジネスエンティティが既に設定されている場合は、おそらくそれをドメイン名として使用する必要があります.

ドメインを選択したら、セットアップを完了して初期ホスティング料金を支払うことができます.

すごい!ドメイン名とそれに対応するホスティングプランを手に入れました.

ステップ2. WordPressをインストールする(無料)

次のステップは、WordPressでの冒険の始まりを公式に示しています。ホスティングアカウントにWordPressをインストールします。.

これは難しいように聞こえるかもしれませんが、実際はそうではありません。あなたがしなければならないすべてはあなたのBluehostユーザーパネルに行くことです(Bluehostはあなたに確認メールのリンクを送ります)–通常は my.bluehost.com.

そこに移動したら、「WordPressのインストール」というアイコンが表示されるまで下にスクロールします。

ワードプレスを選択

それをクリックして、画面の指示に従ってください。プロセス全体を段階的に説明しますので、心配する必要はありません。!

ドメインの選択とWordPressのクリーンコピーのインストールについてさらに詳しい情報が必要な場合は、先に進んでこのガイドにアクセスしてください(ステップ2にスクロールします)。.

この時点で、空のWordPress Webサイトがインストールされているはずです。.

  • メインのドメイン名(例:., YOURSTORE.com
  • に行くことによって管理パネルにログインすることができます YOURSTORE.com/wp-admin

次に、優れたWooCommerceプラグインを使用して、空白のWordPress Webサイトを完全に機能するeコマースストアに変えましょう。.

ステップ3. WooCommerceプラグインをインストールする(無料)

すべてのWordPressプラグインと同様に、楽しみは WordPressダッシュボード/プラグイン/新規追加. そこに移動したら、検索フィールドに「woocommerce」と入力します。最初の検索結果としてWooCommerceが表示されます。

woocommerceインストール

プラグインの横にある「今すぐインストール」ボタンをクリックするだけです.

数秒後、ボタンのテキストが「アクティブ化」に変わります。さあ、クリックして.

ウーコマースアクティベート

この段階で、WooCommerceの画面上の起動/セットアップウィザードが表示されます。これにより、プロセスが非常に簡単になり、すべてを手作業で行うことができます。開始するには、「Let’s Go!」をクリックします

woocommerceウィザード1

エッセンシャルストアページを作成する

オンラインストアは 特に 一種のウェブサイト、そして彼らはいくつかが必要です 特に 正しく機能するページ。 WooCommerceウィザードの最初のステップは、これらのページを作成することです。

  • 「ショップ」– これはあなたの製品が表示される場所です.
  • 「カート」– これは、顧客がチェックアウトに進む前に注文を調整できるショッピングカートです。.
  • “チェックアウト” – これは、顧客が配送/配送方法を選択し、購入したものに対して支払う場所です.
  • “マイアカウント” – 登録済み顧客向けの一種のプロファイルページ(過去の注文を表示したり、その他の詳細を管理したりできます).

WooCommerceウィザードのこの段階で行う必要があるのは、「続行」ボタンをクリックすることだけです。 WooCommerceがこれらのページを設定します.

ロケールを設定する

ロケールは、ストアのセットアップにおいて本当に重要な部分です。これらのいくつかのパラメーターは、ビジネスの起源、通貨、優先単位を定義します。

woocommerceウィザード2

完了したら、[続行]をクリックします.

消費税を理解する

税金はeコマースストアを運営する上で最も刺激的な部分ですが、残念ながら無視することもできません。.

WooCommerceもこの部分を支援してくれることを嬉しく思います.

まず、物理的な商品を発送するかどうかを選択できます。チェックボックスをオンにすると、WooCommerceは設定に残りの配送関連の詳細を事前設定します.

woocommerceウィザード配送

次に、税金! WooCommerceには非常にきちんとした税モジュールがあります。これの最も良い点は、店舗の場所に基づいて税率を把握できることです(前のステップで設定しました)。.

消費税を課す場合(ほとんどの場合は課税)、メインの税ボックスをオンにします。これを行うとすぐに、新しいボックスのセットが表示され、次に何が起こるかが通知されます.

woocommerce税切り替え

注:WooCommerceは税の設定を事前に入力しますが、特に米国以外にいる場合は、実際の現在の課税規則が何であるかを地方自治体に再確認する必要があります。 WooCommerceの消費税の取り扱い方法について詳しく知る, これを読む. 後ですべてを変更できるので、現時点でルールが不明な場合でも心配する必要はありません.

[続行]をクリックします。

お支払い方法を選択してください(PayPalをお勧めします)

オンライン決済を受け入れることができることは、あらゆるeコマースストアの中核であり、WooCommerceは実際に利用可能なソリューションの面で多くを提供しています.

以下から選択できます。

woocommerceウィザードの支払い

最も人気のある2つの支払いオプション、つまりPayPalとStripeが一番上にあります。サイトを両方に統合することを強くお勧めします。対応するチェックボックスをクリックするだけです.

他の意味のあるお支払い方法を選択することもできます。後でWooCommerce設定パネルでさらに多くのオプションが利用できるようになります.

注:オンライン決済を機能させるには、PayPalまたはStripeのいずれかに個別にサインアップする必要があります。 WooCommerceの設定は、既存のPayPalおよびStripeアカウントを新しいeコマースWebサイトと統合するためだけのものです.

もう一度、完了したら[続行]をクリックします.

次のステップは、すべてがうまくいったことを確認する画面です。この段階で、基本的なサイトのセットアップが完了しました。WooCommerceを使用して、空のeコマースストアを構築しました。!

次のステップは製品の追加です:

ステップ4.最初の製品を追加する

店舗を営業と呼ぶには、データベースにいくつかの製品(またはサービス、ダウンロード、または販売したいもの)が必要です。.

製品の使用を開始するには、ダッシュボードに移動してから 製品/製品の追加

製品を追加

表示されるのは、クラシックなWordPressコンテンツ編集画面です。

woocommerce製品追加

  1. 商品名.
  2. メイン 製品説明. この大きなフィールドでは、製品に関する情報を必要なだけ入力できます。これはワードプレスなので、単純なテキストだけでなく、画像、列、見出し、ビデオ、その他のメディアも配置できます。基本的に、あなたが合うと思うものは何でも!
  3. 中央 製品データセクション. これは、追加する製品のタイプを設定する場所であり、それが物理的なものかどうか、 ダウンロード可能または 仮想製品(サービスも仮想製品と見なされます)。この中央セクションの一部として、製品のさまざまなパラメーターのタブも表示されます。
    1. 一般的な. ここで価格と税金を設定します.
    2. 在庫. WooCommerceでは、在庫レベルを管理できます.
    3. 運送. 重量、寸法、および送料を設定します.
    4. リンクされた製品. アップセルやクロスセールスなどの設定に最適です(「 この また買った それ.」)
    5. の属性. カスタム製品属性を設定します。たとえば、シャツを販売している場合、ここで代替色を設定できます.
    6. 上級. 追加の設定。必須ではない.
  4. 簡単な説明. これは、商品ページの名前の下に表示されるテキストです。製品が何であるかの短い要約として最適に機能します.
  5. 製品カテゴリ. 同様の製品をグループ化します。例:「帽子」標準のWordPressカテゴリと同じように機能します.
  6. 商品タグ. 製品のデータベースを整理するのに役立つ追加の方法。標準のWordPressタグと同じように機能します.
  7. 商品画像. 主な商品画像.
  8. 製品ギャラリー. 彼らの素晴らしさを紹介する追加の製品画像.

このパネルに初めてアクセスすると、WooCommerceは各フィールドの目的を説明する便利なツールチップをいくつか表示します。

woocommerceは製品のツールチップを追加します

上記のすべての設定が完了したら、大きな[公開]ボタンをクリックします–最初の製品が追加されました!

少数の商品をデータベースに追加すると、ダッシュボードの商品セクションは次のようになります。

ウーコマース製品

ステップ5.オンラインストアのテーマを選択する(無料)

全体の視覚的な外観について説明する前に、ストアに製品を追加する方法を最初に説明したのには非常に良い理由があります。.

率直に言って、データベースに商品がないと、ストアの個々のページを代表的な形で見ることができません。あなたはすべてが正しく見えることを確認することができないでしょう.

これでほとんどの製品が追加されたので、純粋に視覚的な観点から物事が正しいことを確認できます.

WooCommerce vs現在のテーマ

デフォルトでは、WooCommerceは任意のWordPressテーマで動作します. これは特に、すでにデザインを選択していて、それを使い続けたい場合に朗報です。.

または、WooCommerceに最適化された特別なテーマを使用することもできます。これらのテーマには、すべてのWooCommerce要素が見栄えよくなる事前設定されたスタイルが付属しています.

以下が推奨事項です。

テーマ選択

公式のWooCommerceテーマ(適切に機能する可能性が最も高いテーマ)が呼び出されます 店先. デフォルトのバージョン 無料, そしてそれはあなたを始めるのに十分なはずです.

店先

または、 ThemeForestのeコマースセクション –ウェブ上のプレミアムWordPressテーマの最大のディレクトリ.

テーマフォレスト

現在のテーマに固執することに決めた場合や、WooCommerceに最適化された新しいものに取り掛かった場合でも、次に行う必要があるのは、ストアの個々のページが適切に表示されることを確認することです。それを今しましょう:

eコマースストアデザインのルール

重要な部分に入る前に、いくつかの重要な側面について説明しましょう.

主に– eコマースストアのデザインが優れている理由(読み取り:有益)? 最も重要なパラメータは次のとおりです。

  • デザイン 明確で、混乱しないようにする必要があります。混乱している訪問者は何も購入しません.
  • センターコンテンツブロック サイトにアクセスした直後に訪問者の注意を引く必要があります。その中央ブロックは製品が表示される場所です.
  • 調整可能なサイドバー. 必要なサイドバーの数を選択し、一部のページでサイドバーを完全に無効にできるようにする必要があります(詳細は後ほど).
  • レスポンシブでモバイル向けに最適化. 研究は示す [2] インターネット上の約80%の人がスマートフォンを所有しています。別の研究によると [3], モバイルの訪問者の61%は、すぐに去って、苛立たしいモバイルブラウジングエクスペリエンスを持っている場合、競合他社に行きます。つまり、ウェブサイトがモバイル向けに最適化されていることを確認することが重要です.
  • 良いナビゲーション構造. わかりやすい明確なメニューが必要です。訪問者が探しているページを見つけられるようにするためです。.

上記を念頭に置いて、ストアの個々のページでできることは次のとおりです。

あなたのショップページ

ここに、製品のメインリストが表示されます。 WooCommerceセットアップウィザードを完了した場合、このページは次の場所にあります。 YOURDOMAIN.com/shop

これは標準のWordPressページです–次の方法で編集できます WordPressダッシュボード/ページ.

やる価値のあること:

  • あなたの訪問者があなたと一緒に買い物をするのを促すいくつかのコピーを追加してください.
  • ページにサイドバーを表示するかどうかを決定します。これは、テーマの独自のページテンプレートを通じて行われます。たとえば、Storefrontを使用すると、全幅を使用できます。

全角

ショップページの主な特徴は、標準コンテンツのすぐ下にあり、商品リストを表示するカスタムパーツを備えています。これは、ストアフロントテーマでの表示です。

woocommerceショップページ

ご覧のように、素敵な商品画像が鍵です。それは、あなたが正しく理解すべき最初のことです!言い換えれば、あなたはおそらく他の何よりもあなたの製品画像に取り組むべきです.

WooCommerceでは、このページに別の方法で製品を表示することもできます。あなたが行くとき WordPressダッシュボード/ WooCommerce /設定/製品 そして、 表示 セクション:

woocommerce製品ディスプレイ

…ショップページに個々の製品または製品カテゴリを表示するかどうかを選択できます。自分にとって最も意味のあるものを選択して、設定を保存します.

個別の製品ページ

それらを見るために、ショップページから製品リストをクリックしてください。.

高品質のテーマを使用している場合、この特定のページで問題が発生することはありません。基本的にできることは、個々の製品の説明に使用するテキストの量を調整して、すべてが視覚的に収まるようにし、購入者を混乱させる可能性のある空白部分がないことを確認することです。.

Storefrontテーマを使用した例(追加のカスタマイズなし)は次のとおりです。

woocommerce製品リスト

ショッピングカート

調整できる別の重要なページ ダッシュボード/ページ.

私たちがお勧めするのは、全幅レイアウトにすることです。購入手続きに進むことを除いて、このページであまり多くのオプションを購入者に与えたくない.

woocommerceカート

チェックアウト

チェックアウトはおそらくそれらすべての中で最も重要なページです。購入者が注文を確定して支払いを行う場所です.

実際には、1つを除いてそのページを調整することはお勧めしません。

チェックアウトページは全幅にする必要があります。購入者がページから出る唯一の許容できる方法は、注文を確定することであり、サイドバーで利用できるものに気を取られないようにする必要があります。.

あなたはこれを行うことができます ダッシュボード/ページ (ショップページで行ったプロセスを繰り返すだけです).

それとは別に、チェックアウトページのデフォルトの外観は素晴らしいです:

woocommerceチェックアウト

この段階で、基本的にストアのデザインの調整が完了しました。次に、ストアの機能を拡張する可能性を見てみましょう.

ステップ6. WooCommerceの拡張–方法?

WooCommerceを印象的なeコマースソリューションにするもう1つのことは、数十または数百もの拡張機能とプラグインが利用できることです。.

最も便利なものをいくつか挙げてみましょう。

WooCommerce拡張

拡張機能から始めましょう– WooCommerceチームによって承認された公式のアドオン.

何が利用可能かを確認するには、 このページ.

そのカタログは本当に印象的で広大です。私たちはあなたがそれに怯えて感じることを望んでいない。もちろん、これらすべての拡張機能は必要ありません。そのリストをビュッフェとして扱います–クールだと思われるものをすべて選択.

より価値のある言及のいくつか:

  • 支払いゲートウェイ. これらの拡張機能により、標準のPayPalに加えて、より多くの支払い方法を受け入れることができます。一般的に、受け入れることができる支払い方法が多いほど(多くの場合、これらのゲートウェイは支払いを受ける)、より良い.
  • 配送延長. UPSやFedExなどの会社からの公式の配送料と店舗を自動的に統合したい場合は、これらが便利です。.
  • 会計拡張. WooCommerceストアを選択した会計ツールと統合します.
  • WooCommerceの予約. サイトを離れることなく、サービスの予約を顧客が予約できるようにします.
  • WooCommerceサブスクリプション. 顧客があなたの製品やサービスを購読し、毎週、毎月、または毎年の料金を支払うことができます.
  • EU VAT番号. EU内で事業を行っている方.
  • TaxJar. 自動操縦に消費税を課す.

または、新しい拡張機能にお金をかけたくない場合は、 無料カテゴリ. あなたを占領し続けるのに十分なものがあります.

Eコマースストアを強化するプラグイン

拡張機能を脇に置いて、他のWordPressプラグインを使用してストアをさらに強化することもできます。取得する必要があるものは次のとおりです。

一言で言えば、オンラインストアを作成する

ご覧のとおり、WordPressを使用して独自のeコマースストアを作成することの難易度はそれほど高くありませんが、上記のすべての手順を完了するにはまだ時間がかかります。.

たとえば、5年前に開発者を雇って5,000ドル以上払わなければ、同様のものが作成されないことを考えると、それは信じられないことです。今、あなたは自分ですべてを行うことができます!

とにかく、必要なすべてのタスクを完了するのに役立つ, 以下は、切り取って保管するチェックリストです。

あなたが始める前に

  • ドメイン名を取得し、Webホスティングにサインアップし、動作するWordPressインストールを実行する.
  • 新しい空のWordPressサイトが正しく機能することを確認します(ポップアップなどの明らかなエラーがないこと)。.

WooCommerceのインストール

  • メインのWooCommerceプラグインをインストールしてアクティブ化する.
  • WooCommerceセットアップウィザードを実行します。
    • 必要な4つのページを作成する (ショップ、カート、チェックアウト、マイアカウント).
    • ストアロケールの設定.
    • 消費税と送料の設定.
    • 初期支払い方法の選択.

製品

  • ほとんどまたはすべての製品または製品カテゴリをストアに追加します.

設計

  • eコマースストアに適したWordPressテーマを選択します。既存のテーマを使用するか、他の可能性を参照してください。その際、eコマースストアのデザインのルールを確認する.
  • ショップページを調整する.
  • 個別の製品ページを調整する.
  • カートページを調整する.
  • チェックアウトページを調整する.

拡張

  • 使用する支払いゲートウェイをインストールします.
  • 配送延長の一部を検討する.
  • 会計拡張を検討する.
  • 他を閲覧する 拡張 そしてその 無料カテゴリ.

プラグイン

eコマースストアを強化するすべてのプラグインをインストールすることを検討してください。

  • Yoast SEO
  • Yoast WooCommerce SEO
  • WooCommerce Multilingual
  • お問い合わせフォーム7
  • UpdraftPlus
  • GetSocialによるソーシャル共有ボタン
  • MonsterInsights
  • iThemesのセキュリティ
  • W3合計キャッシュ.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map