ElementorなしでWooCommerceショップページを編集する方法は？

あなたの WooCommerce ショップページを群を抜いて目立たせる方法を知りたいですか? 最良の方法の 1 つは、ページを編集して買い物客にとって使いやすいものにすることです。 たとえば、Elementor の製品ウィジェットを追加してカスタマイズを強化できます。

しかし、WooCommerce ショップ ページを編集する方法はたくさんありますが、どの方法を使用しますか? まあ、それはすべて、あなたが快適に作業できる方法に依存します. プラグイン、エレメント、コード、またはエレメントと Shopready の組み合わせを使用できます。

これ以上苦労することなく、ユーザー エクスペリエンスを強化するために、要素なしで WooCommerce ショップ ページを編集する方法を見てみましょう。

オンライン ビジネスの売り上げを伸ばしたい場合は、まず WooCommerce ショップ ページを編集する必要があります。 このようにして、より使いやすくすることができます。 以下は、ショップ ページをカスタマイズする最も効果的な方法の一部です。

方法 1: 手動編集

少しのコーディングに問題がなければ、WooCommerce ショップ ページを手動で編集できます。 以下は、その方法に関する段階的なガイドです。

ステップ 1: 子テーマを取得して名前を付ける

サイトのテーマを購入すると、子テーマが付属しているはずです。 ただし、見つからない場合は、いつでもテーマ開発者に提供してもらうことができます。

子テーマに名前を付けるには、WordPress コントロール パネルを開き、[ファイル マネージャー] をクリックします。 次に、[WP-Content] > [Themes] > [Your-theme-name] を選択します。 ここから、子テーマに Twenty-twenty-child またはそれに近い名前を付けることができます。

ステップ 2: 子テーマにフォルダー構造を追加する

子テーマを作成したら、次のステップはその中にフォルダー構造を作成することです。 まず、テーマの下にある子テーマ フォルダー (twenty-twenty-child) をクリックします。 次に、その下に新しいフォルダーを作成し、WooCommerce という名前を付けます。

ステップ 3: サブフォルダーを作成する

WooCommerce フォルダーの下に別のフォルダーを作成し、「archive-product-.php」という名前を付ける必要があります。 この製品アーカイブ テンプレートフォルダーは、ショップ ページ テンプレート ファイルとして機能します。

ステップ 4: ショップ ページ テンプレート ファイルにコンテンツを追加する

手順 3 で作成したショップ ページ テンプレート ファイルは空になります。 したがって、機能させるには、コンテンツを追加する必要があります。 これを行うには、コードを使用できます。 しかし、それについての知識がない場合は、次のステップにジャンプしてください。

ステップ 5: ショップページのテンプレートをデザインする

ここでは、ゼロから WooCommerce ショップ ページを設計する必要はありません。 代わりに、デザイン済みの製品ページ テンプレートを使用できます。 次に、親テーマを探して、single.php または index.php ファイルを選択します。 次に、いずれかのファイルをコピーして、手順 2 で作成した WooCommerce フォルダーに貼り付けます。

その後、既存の「archive-product.php」ファイルを削除します。 次に、新しいファイル (single.php または index.php) に「archive-product.php」という名前を付けます。 次に、ショートコードを使用してページを編集する必要があります。

ステップ 6: ショートコードを使用する

最初のステップは、製品ページを行または列に分割することです。 たとえば、2 つの製品を 1 つの 2 列の行に配置することができます。 この場合、ショートコードを使用できます。

ただし、製品を 2 列に表示し、各列に最大 6 個の製品を表示するには、次のショートコードを使用します。

archive-product.php ファイルにコードを入力するだけです。 ただし、まず、既存のコードを削除する必要があります。 希望するショップページの外観が得られるまで、さまざまなショートコードを試すこともできます.

方法 2: Elementor を使用する

コーディングしたくないですか？ Elementor を使用して、デフォルトの WooCommerce 製品ページをカスタマイズすることもできます。 この方法は非常に使いやすいです。 そして、ここにあなたを助けるための簡単なステップがあります.

ステップ 1: WordPress エレメントを有効にする

Elementor がない場合は、WordPress ダッシュボードに移動し、[プラグイン]、[新規追加] オプションの順にクリックします。 検索ボックスで Elementor ウェブサイト ビルダーを探し、インストールすることを選択します。 最後に、有効化ボタンを押します。

ステップ 2: 新しい製品アーカイブを設計する

Elementor をインストールしたら、新しい製品アーカイブ テンプレートを作成するだけです。 これを行うには、WordPress 管理ダッシュボードに移動し、[マイ テンプレート] を選択します。

[テンプレート] で、ダッシュボードの左上にある [新規追加] タブをクリックし、[製品アーカイブ] を選択します。 最後に、テンプレートの作成オプションを使用して、テンプレートに名前を付けます。

ステップ 3: テンプレートをカスタマイズする

商品ページのテンプレートをカスタマイズするには、最初から行うことを選択できます。 この場合、使用できる編集パネルにいくつかのユニークなウィジェットがあります。

または、事前に設計されたテンプレートを使用することもできます。 Elementor では、さまざまな製品ページのレイアウトとスタイルを選択できます。 したがって、スタイルを選択して、ブランドに合わせてカスタマイズするだけです.

ステップ 4: 製品ウィジェットを利用する

WooCommerce ショップ ページをさらにカスタマイズするには、ウィジェットを追加する必要があります。 Elementor WordPress ダッシュボードで、[要素] タブをクリックします。 メニュー カート、製品、カスタム カートへの追加など、多数のウィジェットから選択できます。

ステップ 5: カスタム ショップ ページをプレビューする

公開ボタンを押す前に、製品ページをプレビューする必要があります。 左下のパネルに、目の形をしたアイコンが表示されます。 アイコンをクリックし、プレビュー設定を選択します。 次に、プレビューする特定の製品を選択します。

ステップ 6: 保存して公開する

ショップページの編集が完了し、カスタマイズに満足したら、[公開] ボタンをクリックします。 条件の追加フィールドが表示され、製品テンプレートをどこに表示するかを尋ねられます。

[ショップ ページ] オプションを選択し、[保存して閉じる] ボタンをクリックします。 カスタムの WooCommerce ショップ ページが公開されました。

方法 3: プラグインの使用

プラグインはたくさんあるので好きなプラグインを使えばOKです。 ただし、この投稿では、elementor と Shopready プラグインの組み合わせの使用に焦点を当てます。 以下の手順に従ってショップページを編集してください。

ステップ 1: Shopready をインストールする

WordPress ダッシュボードで、[プラグイン] タブをクリックし、[新規追加] オプションを選択します。 次に、パネルの右上のセクションにある検索ボックスで、Shopready を検索し、[有効化] ボタンをクリックします。

ステップ 2: ショップページのテンプレートを追加する

次に、ショップ ページ テンプレートを開発して、デフォルトの WooCommerce 製品ページをカスタマイズする必要があります。 これを行うには、Shopready プラグインを見つけて、[ダッシュボード] で [テンプレート] を選択します。 ここには、ブランドのスタイルに合わせて選択できるさまざまな事前作成済みのテンプレートがあります。

テンプレートを選択し、トグル スイッチを右に動かしてテンプレートを有効にします。 最後に、[変更を保存] ボタンをクリックします。

ステップ 3: テンプレートをカスタマイズする

Shopready ページ テンプレートを選択したら、Elementor を使用してカスタマイズします。 商品詳細ページ ビルダー、カート ページ ビルダー、アーカイブ ページ ビルダー、さらにはアカウント ページ ビルダーを使用してカスタマイズできます。 Shopready は非常に多くのカスタマイズ機能を提供します。 WooCommerce ショップ ページの編集が完了したら、[更新] ボタンをクリックするだけです。

Shopready を使用して WooCommerce ショップページを編集する理由

ショップページの編集に他のプラグインではなく、Shopready を使用すべき理由がわかりませんか? 理由のいくつかを次に示します。

使いやすさ

Shopready は、WooCommerce ショップ ページを編集するのに使いやすいだけでなく、ナビゲートしやすいカスタマイズ機能も備えています。 さらに良いことに、事前に設計された製品ページ テンプレートオプションが付属しています。 したがって、このプラグインを使用するのに技術者である必要はありません。

完全なプラグイン キット

elementor と Shopready の組み合わせの使用を検討すべきもう 1 つの理由は、このプラグインが完全なキットとして提供されるためです。 簡単に言えば、ショップ ビルダーなど、WooCommerce ショップ ページをカスタマイズするために必要なものがすべて付属しています。

優れたカスタマーサポート

Shopready を使用して WooCommerce ショップ ページを編集すると、24 時間サポートと無料トレーニングが保証されます。 そのため、どこかで行き詰まった場合は、いつでもカスタマー サポートに連絡して支援を求めることができます。

無料版と有料版で利用可能

予算が限られている場合は、多くのカスタマイズ オプションを提供する Shopready の無料バージョンを利用できます。 ただし、より多くのサイト ライセンスが必要な場合は、Startup、Business、または Agency Shopready バージョンを選択できます。

結論

e コマース Web サイトで製品を提示する方法は、売上に大きな影響を与える可能性があります。 このため、デフォルトの WooCommerce ショップ ページをカスタマイズすることは非常に理にかなっています。 ただし、ページを手動で編集するか、Elementor を使用するか、プラグインを使用するかを決定する必要があります。

全体として、基本的なコーディングの知識がある場合は、ショップ ページを手動で編集することをお勧めします。 ただし、カスタマイズをすばやく簡単に行う方法が必要な場合は、Elementor の使用を検討できます。 一方、独自のカスタマイズ機能を提供する方法が必要な場合は、 elementor と Shopready を組み合わせて使用​​する必要があります。