WooCommerceのcoming soonページを編集する方法を知りたいですか？
WooCommerceのcoming soonページは、ローンチ前にストアを隠すのに最適です。しかし、デザインを変更したり、ローンチの詳細を更新したり、新しいコンテンツを追加したい場合は、何も壊すことなく編集する簡単な方法が必要です。
このガイドでは、WooCommerceのcoming soonページをステップバイステップで作成・編集する方法をご紹介します。数回クリックするだけで、いつでもページを更新できるようになります。
なぜWooCommerceのComing Soonページを作成するのか？
WooCommerceのcoming soonページを作成することは、未完成のオンラインストアを隠す優れた方法です。そうすれば、エラーページや公開準備ができていない中途半端なストアフロントを表示する代わりに、潜在的な顧客が見るものをコントロールすることができます。
それに加えて、WooCommerce用のcoming soonページを作成することは、他にもいくつかの点で役立ちます：
- 来店客に、お店がいつオープンするのか詳細を伝える
- カウントダウンタイマーで発売日の興奮を高める
- サインアップフォームでメールアドレスを集め、リストを増やす
- 発売前に割引や特典を提供し、顧客を惹きつける
- クロール可能なウェブページで、検索エンジンランキングのスタートを切る
WooCommerceのcoming soonページがあなたのビジネスに役立つ方法は他にもたくさんあります。しかし、どのように作成するのでしょうか？
WooCommerceのカミングスーンページの作り方
このガイドでは、SeedProdを使ってWooCommerceのカミングページを作成します。
SeedProdは、ドラッグアンドドロップ機能を備えた最高のWordPressページビルダーです。そのライブビジュアルエディタを使用すると、コードを記述することなく、あなたのオンラインストアのためのcoming soonページを設定し、リアルタイムで変更を確認することができます。
また、SeedProdを使ってドラッグ＆ドロップでカスタムWooCommerceテーマを作成することもできます。
SeedProdがWooCommerceのcoming soonページに最適な理由は他にもいくつかあります：
- 準備が整うまでサイトを非表示にする、近日公開モードとメンテナンス・モードを内蔵。
- 100以上のランディングページ・テンプレートで素早く始められる
- ヘッダーやコール・トゥ・アクション（CTA）などの新しいセクションを追加するためのブロックが多数用意されている。
- WooCommerceのサポートにより、coming soonページから商品を販売することができます。
- 加入者ダッシュボードで加入を追跡・管理
- Constant ContactやActiveCampaignのような一般的なマーケティングプラットフォームとの統合
- ボットや不正なフォーム送信に対するスパム対策
このチュートリアルに従うだけで、開発者を雇ったり、コードを書いたりする必要はない。
ビデオ・チュートリアル
ステップ1：SeedProdのインストールと有効化
SeedProdを始めるのはとても簡単です。まず、下のボタンをクリックしてSeedProdを入手し、アカウントを作成してください。
注：SeedProdには無料版もあります。しかし、今日はPro版を使うことにしよう。なぜなら、Pro版には利用したいとてもクールな機能があるからだ。
次に、WordPressウェブサイトにプラグインをインストールし、有効化します。このステップでヘルプが必要な場合は、 WordPressプラグインのインストールに関する簡単なガイドに従ってください。
SeedProdをインストールし、有効化した後、WordPressダッシュボードからSeedProd " 設定に移動します。これにより、ライセンスキーを入力し、プラグインの更新や高度な機能にアクセスできるようになります。
SeedProdのライセンスキーは、SeedProdウェブサイトのダウンロードタブのアカウントにあります。
ライセンスキーを入力した後、Verify Keyボタンをクリックすると、WooCommerceのcoming soonページの作成が開始されます。
ステップ2: 近日公開ページの設定
WooCommerceのcoming soonページを作成するには、WordPressの管理パネルからSeedProd " Pagesにアクセスしてください。
この画面には、WordPressサイトにさまざまなタイプのページを作成するためのオプションがいくつか表示されます：
- Coming Soon Mode（近日公開モード） -建設中のあらゆるタイプのウェブサイトに近日公開のページを作成できます。
- メンテナンスモード- 軽微な変更やアップデートの際にメンテナンスメッセージを表示します。
- ログインページ- デフォルトのログイン画面をWordPressのカスタムログインページに置き換えます。
- 404ページ- カスタムの404エラーページを 設定することで、ユーザーをサイトに長く留まらせることができます。
そのセクションの下に、お好きな独立したランディングページを作成することもできます。
しかし、このチュートリアルでは、'Set up a Coming Soon Page'ボタンを選択します。
次に、SeedProdのレスポンシブテンプレートライブラリが表示されます。Coming Soonフィルターの下には、すぐに使える様々なcoming soonページのテンプレートがあります。
テンプレートにカーソルを合わせるとプレビューのオプションが表示され、チェックマークアイコンをクリックするとそのデザインを選択できます。
近日公開ページのテンプレートを選択すると、SeedProdが開き、ドラッグアンドドロップページビルダーに表示されます。このページでWooCommerceの近日公開ページをカスタマイズすることができます。
ステップ2.1：WooCommerceのカミングスーンページを編集する
WordPressダッシュボードのSeedProd " PagesからいつでもWooCommerce coming soonページを編集することができます。ボタンをクリックすると、設定ではなくページを編集と表示され、作成に使用したのと同じドラッグ＆ドロップビルダーが開きます。
クリックすると、SeedProdのドラッグ＆ドロップビルダーが開きます。そこから、最初に設定したときと同じように、テキスト、画像、色を変更したり、新しいセクションを追加したりすることができます。
完了したら、「保存」ボタンをクリックすると、変更がすぐにライブページに表示されます。
ステップ 3: WooCommerceのComing Soonページをカスタマイズして編集する
SeedProdのビジュアルエディタを使用して、WooCommerceの近日公開ページのすべての要素をカスタマイズまたは編集することができます。デザインのどの部分をクリックしても、テキスト、画像、またはボタンを更新することができ、変更した内容がライブで表示されます。
また、Eメール登録フォーム、商品グリッド、ソーシャルメディアリンクなど、新しいセクションを追加するのに最適なタイミングです。もし後でローンチ情報を更新する必要がある場合は、SeedProd " ページに戻り、ページ編集ボタンを使って素早く変更することができます。
画面の右側には、デザインのライブプレビューが表示され、編集してリアルタイムで変更を確認することができます。
そして左側には、デザインを構築しカスタマイズするための様々なセクションやブロックがあります。
要素を編集するには、その要素をクリックするだけで、そのブロックの設定が左側に開きます。例えば、見出し要素をクリックすると、その内容の設定パネルが開きます。
そこから、コンテンツを編集したり、フォントの色やサイズを変更したり、見出しタグを変更して検索エンジン向けにページを最適化することもできる。
カウントダウンタイマー、段落テキスト、ソーシャルメディアアイコンなど、ページ上の他の要素にも同じことができます。
例えば、ソーシャルメディアのアイコンブロックをクリックすると、ソーシャルメディアのプロフィールリンクを追加することができます。また、「テンプレート」タブをクリックすると、アイコンの色やスタイルを素早く変更できます。
Standard、Advanced、WooCommerceのブロックセクションからブロックを選択することで、ページにコンテンツを追加することができます。
- 標準ブロックには、箇条書きリスト、画像、ボタン、動画などがあります。
- 高度なブロックには、オプトインフォーム、景品、カウントダウンタイマー、その他多くのリード生成ツールが含まれています。
- WooCommerceブロックでは、ショッピングカート、チェックアウト、商品グリッド、カート追加ボタンをカミングスーンページに追加することができます。
リストを増やすためにオプトインフォームを追加し、切迫感を演出するために近日公開のカウントダウンタイマーを追加することをお勧めします。
WooCommerceのcoming soonページをカスタマイズし、新鮮なコンテンツを追加するだけでなく、色、フォント、スタイルをグローバルにコントロールすることもできます。これにより、すべてのブロックを手動でカスタマイズする手間が省けます。
画面左下の歯車アイコンをクリックすると、グローバル設定パネルが表示されます。そこから任意の見出しをクリックして、グローバルな配色、フォント、背景画像などを追加します。
例えば、デフォルトの背景画像を削除し、より人目を引くものに置き換えた。
また、見出し、テキスト、ボタン、リンクの色を変更するために、「色」の見出しをクリックしました。
オンラインストアのカミングスーンページが完成したら、上部にある「保存」ボタンを押して、進捗を保存してください。
ステップ4: メールマーケティングサービスに接続する
WooCommerceのcoming soonページにメール登録フォームを追加した場合、メールマーケティングサービスに接続することをお勧めします。そうすることで、リードの収集、購読者の管理、見込み客へのメール送信が可能になります。
SeedProdのメール統合は、画面上部のConnectタブの下にあります。
そこから、ご希望のEメールサービスプロバイダをクリックし、指示に従ってアカウントの認証と接続を行います。
ステップ5：ページ設定を行う
近日公開予定のeコマースページを公開する前に、いくつかの設定を行う必要があります。そこで、ページ設定タブに切り替え、左側のナビゲーションパネルを探してください。
まず、Generalタブでページのタイトル、URL、ステータスを変更できます。
SeedProd Proユーザーであれば、アクセスコントロールタブが表示されます。この画面では、誰がWooCommerceの近日公開ページを見ることができるか、また、誰がウェブサイト構築中にアクセスできるかを選択することができます。
その結果、あなたのサイトで作業している開発者やフリーランサーにアクセス権を与えることができます。また、あなた自身が開発者であれば、クライアントに一時的なアクセスを提供し、進捗状況を見せることができます。
次のパネルはSEO設定で、SEOタイトルと説明文を追加できます。この情報は検索エンジンに表示され、検索結果に表示されます。
さらに、ファビコンやソーシャルメディアのサムネイルも追加できます。また、検索エンジンがあなたのページをインデックスするのをブロックしたい場合は、「インデックスなしを有効にする」オプションをオンにすることができます。
最後に、Google AnalyticsのトラッキングコードやFacebookピクセルなどのサードパーティ製スクリプトを「スクリプト」タブに追加します。
ステップ 6: WooCommerceのカミングスーンページを公開する
オンラインストアで近日公開予定のページを公開する前に、SeedProdのモバイルプレビュー画面でプレビューすることをお勧めします。そうすることで、モバイルデバイス上ですべてがうまく表示されることを確認できます。
下のツールバーのモバイルプレビューアイコンをクリックすると、ページのライブモバイルプレビューが表示されます。
そこからデザインを編集したり、デスクトップやモバイルで特定の要素を非表示にすることもできる。
例えば、ソーシャルアイコンをモバイルで非表示にするには、要素をクリックし、[詳細設定]タブを選択し、[デバイスの表示]見出しの下にある[モバイルで非表示]オプションをオンにするだけです。
ソーシャルアイコンはライブプレビューではグレーアウトされていますが、ライブページでは全く表示されません。
WooCommerce coming soonページを公開する準備ができたら、保存ボタンの横にあるドロップダウン矢印をクリックし、公開をクリックします。
ステップ 7: WooCommerceのカミングスーンモードを有効にする
あとはWooCommerceのcoming soonページをオンにするだけです。これを行うには、左側のWordPressダッシュボードパネルからSeedProd" PagesをクリックしてSeedProdダッシュボードに戻ります。
そしてComing Soon Modeの見出しの下にあるトグルボタンを「Active」に切り替える。
これで、訪問者があなたのWooCommerceウェブサイトを訪れると、あなたのcoming soonページが表示され、発売時期の最新情報を入手したり、Eメールに登録したりできるようになります。
WooCommerce Coming Soonページの編集に関するFAQ
コーディングのスキルがなくてもWooCommerceのcoming soonページを作成・編集する方法がわかりました。SeedProdを使えば、いつでもデザインを更新し、ローンチの詳細を変更し、新しいコンテンツを追加することができます。
この柔軟性により、店舗で作業している間、ページを新鮮で魅力的なものに保つことが容易になります。今すぐSeedProdを使い始め、自信を持って立ち上げましょう。
以下のWooCommerceガイドも参考になるでしょう：
- WooCommerceサイトを安全に保護する方法
- WooCommerceで在庫切れの商品を簡単に隠す方法
- WooCommerceの追加情報タブをカスタマイズする方法
- WooCommerceにカートを見るボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで関連商品を表示する方法
お読みいただきありがとうございました。この記事が気に入ったら、YouTube、Twitter、Facebookで、あなたのビジネスを成長させるために役立つコンテンツをもっとご覧ください。
