WooCommerce Docs
WooCommerce CustomizerはWordPress > Customizeの一部で、コードを一切触らずに、ストア通知、商品カタログ、商品画像にサイト全体に適用するオプションを選択できるようにします
WooCommerce Customizerはどこにあるか トップページに戻る
WordPressダッシュボードから、に移動します。 外観 > カスタマイズに進みます。
カスタマイズメニューで、WooCommerce:
WooCommerceの下にある5つのオプションが表示されます。
- Store Notice
- Product Catalog
- Product Page
- Product Images
- Checkout
以下、それぞれの詳細について説明します。
ストア通知 トップに戻る
ストア通知では、あなたのストアを訪れるすべての人に表示されるサイト全体のメッセージを入力することができます。 メッセージの内容は、
- Informational – 天候による配送の遅れを知らせるメモ。
- プロモーション – イベント、ホリデースペシャル、バンドル、全商品/一部商品のセール、送料無料などの広告。
ストア通知を表示する トップに戻る
サイト全体のストア通知を顧客に表示するには：
1/ に移動します。 外観 > カスタマイズ > WooCommerce > Store Notice:
2/ テキストエリアにメッセージを入力する。
3/ ストア通知を有効にするのボックスをチェックします。
4/ サイト/ストアでのストア通知の見え方をプレビューします。
5/ 満足したら公開し、ストア通知を公開する。
What Visitors See Back to top
ストア通知はあなたのストアやサイトのフロントエンドでどのように表示されるかが示されます。
*Store Notice の場所と外観は、使用しているテーマによって異なります。 上のスクリーンショットは、無料のStorefrontテーマを使用したものです。
ストア通知の編集または削除 トップに戻る
サイト全体のストア通知を変更または表示を停止するには：
1/ 次へ移動します。 外観 > カスタマイズ > WooCommerce > Store Notice:
2/ Store Noticeを変更するには：
- テキストエリアでメッセージを編集して変更してください。
- 訪問者への表示を停止するには、[ストア通知を有効にする]のチェックボックスをオフにします。
ストア通知のスケジュール トップに戻る
ストア通知のスケジュールオプションを使用すると、期間限定のプロモーションを実行したり、特定の日の深夜にセール/割引を終了したりする場合に便利です。
1/ 外観 > カスタマイズ > WooCommerce > Store Notice にアクセスして、現在または公開されているプロモーションを表示しアクセスします。
2/ Enable Store Notice にチェックボックスを外す。 パネルが開きます。
4/ 右のメニューで［スケジュール］を選択し、変更を有効にしたい日時を入力します。
5/ ［スケジュール］を選択して、入力した将来の日時に変更を行います。
*セール割引、クーポンコードまたは期間限定キャンペーンは無効化する必要があります。 通知を削除しても、プロモーションは自動的に停止しません。
製品カタログ トップに戻る
製品カタログのすべてのオプションは、次の場所で見つけることができます。 外観 > カスタマイズ > WooCommerce > Product Catalogで確認できます。
Product Catalogで選択可能です。
- Shop ページに表示するもの
- Category ページに表示するもの
- Category 内の商品の並び順
- 一度に表示する商品数の目安。
- 1ページに表示する商品の列数
ショップページ トップに戻る
ショップページには、商品を表示できます。 カテゴリ、またはその両方。
1/ ドロップダウンから製品またはカテゴリを選択します。
2/ 選択したものをライブでプレビューします。
3/ 保存して公開する。
Category Pages Back to top
カテゴリ ページでは、製品またはカテゴリ内のサブカテゴリ、あるいは両方を表示することができます。
1/ ドロップダウンから製品またはサブカテゴリーを選択します。
2/ 選択をライブでプレビューします。
3/ 保存してライブにするために公開する。
Default product sorting Back to top
商品のデフォルト順は、ショップとカテゴリ ページのデフォルトで表示される商品の表示順を制御できます。 訪問者は、必要に応じて別の方法で製品を並べ替えることができます。
デフォルトの並べ替え（カスタム順序 + 名前） – 名前のアルファベット順に製品を表示します。 商品の並べ替え順序がカスタマイズされている場合、そのカスタム順序が最初に考慮され、名前によるアルファベットは 2 番目に考慮されます (商品が同じ順序の位置を共有している場合)。
Sort by Popularity (sales) – 商品の販売数を多いものから少ないものへ表示します。 お客様には「人気順」で表示されます。
Sort by Average rating – レビューの平均評価に基づいて、高いものから低いものへと製品を表示します。
Sort by most recent – ストアに追加された順番に、新しいものから古いものへと商品を表示します。
Sort by price (asc / desc) – 価格の低い順（asc）または高い順（desc）で製品を並べ替えます。 顧客には、Sort by price: low to high、またはSort by price: high to lowのいずれかが表示されます。
この例では、Sort by price (asc) (Sort by price: low to high, shown with a✔) を選択しており、顧客はSort by newsnessを選択しようとしているところです。
デフォルトの並べ替えを選択するには：
1/ ドロップダウンからオプションを選択：
2/ 選択結果をライブプレビューしてください。
3/ 保存して公開する。
Products per Row トップに戻る
Products per Row では、ショップおよびカテゴリ ページに 1 行で表示するアイテム数が選択可能です。
- 商品画像のサイズ
- コンピュータ/ラップトップ、タブレット、またはモバイル デバイス上のスペース
- 商品を表示および購入する顧客の最適な体験
1/ 商品の数を増やす/減らすには矢印を使用します。
2/ 選択した商品をライブでプレビューできます。 ショップ ページまたはカテゴリ ページを表示できます。
3/ 異なるデバイスでテストします。 以下は、同じ設定を使用して、異なる表示をした例です。
- パソコン/ノートパソコンの画面で
- タブレットで
- モバイル機器で
※画像サイズや見え方のスケールは変化します。 お使いのテーマによって異なります。
4/ Publish to save and go live.
Rows per Page トップページに戻る
Rows per Page では、ショップとカテゴリーページに表示する行数を選択することができます。
- 商品画像のサイズ
- 販売する商品の数
- コンピュータ/ラップトップ、タブレット、またはモバイルデバイス上のスペース
- 商品を閲覧し購入する顧客が最適な体験をするかどうか
1/ 行数を増やす/減らすために矢印を使用します。
2/ 選択した商品をライブでプレビューできます。 ショップ ページまたはカテゴリ ページを表示できます。
3/ 異なるデバイスでテストします。 以下は、同じ設定を使用して、異なる表示をした例です。
- パソコン/ノートパソコンの画面で
- タブレットで
- モバイル機器で
* 画像サイズと見た目の縮小率は異なります。 お使いのテーマによって異なります。
4/ Publish to save and go live.
商品ページ トップに戻る
商品ページには、単一商品ページに適用する 2 つのオプションがあります：
- Sticky Add-to-Cart – 関連商品情報とカート追加ボタンを含むブラウザ ウィンドウ上部に小さなコンテンツ バーがあります。 標準のカートに追加ボタンがスクロールして表示されなくなると、スライドして表示されます。
- Product Pagination – 製品ページで次と前のリンクを表示します。 製品のサムネイルが表示され、カーソルを合わせるとタイトルが表示されます。
Product Images トップに戻る
Product Images には、2 つの機能があります。
- カタログとサムネイル画像のサイズとトリミング方法を選択可能
- 公開された変更が行われた場合、カタログとサムネイル画像のサイズをサイト全体で自動的に変更*
これにより、1 つずつ手動でトリミングとサイズ変更を行う時間とエネルギーを節約することが可能です。
画像の種類 ページトップへ
- カタログ画像は、ショップページ、カテゴリページ、関連商品、アップセル、クロスセルに表示される中サイズの画像です。
- サムネイル画像は、カート、ウィジェット、（オプション）ギャラリー画像で個々の製品詳細ページの単一製品画像の下に使用される最小サイズの画像です。 WooCommerceカスタマイザーのProduct Imagesの設定はこれには適用されません。 Single Product ImageやProduct Image Galleryを追加、編集、削除するには、以下を参照してください。 商品画像とギャラリーの追加」
* 以前は、サムネイルはサードパーティのプラグインを使用して再生成する必要がありました。 WooCommerce 3.3x では、この処理が行われるようになりました。 プレビュー モードでのみ行われた変更については、再生成はトリガーされません。
サムネイル画像のリサイズとトリミング トップに戻る
1/に移動します。 外観 > カスタマイズ > WooCommerce > Product Images.
2/ 選択：
- 1:1 – スクエアイメージ
- カスタム – イメージを切り取る比率を選択します。 この例では、1:2 が入力されています。
- トリミングなし – 画像はそのまま表示され、同じサイズと解像度で写真を使用しない場合はすべて異なる結果になることがあります。 下のスクリーンショットはその例です。
3/ 異なるデバイスでテストしてください。 以下は、同じ設定を使用して、異なる表示の例です。
- コンピュータ/ノートパソコンの画面で
- タブレットで
- モバイルデバイスで。
4/ Publish to save and go live.
チェックアウト トップページに戻る
チェックアウトに関するすべてのオプションは以下で確認することができます。 外観 > Customize > WooCommerce > Checkout.
収集したいデータに応じて、特定のフィールドを必須またはオプションに設定することができるようになりました。 また、必須フィールドをアスタリスクで強調表示することも可能で、これはデフォルトです。
Privacy Policy および Terms and Conditions ページを作成し、ここでそれらを設定することをお勧めします。 設定されたページは、入力したテキストとともにリンクされ、チェックアウトのページに次のように表示されます:
「プライバシーポリシー」リンクは新しいウィンドウでページを開き、「利用規約」リンクはページ上に利用規約のページの内容を示すボックスを表示します。 必要な利用規約にチェックを入れないと注文できません。
よくある質問 トップに戻る
WooCommerceカスタマイザーが見当たりません。 トップページへ戻る
WooCommerce3.3x+を使用している店舗では、このオプションが利用可能です。 外観 > カスタマイズ > WooCommerce。 WooCommerce 3.3.0以前のバージョンを使用している店舗は、「店舗のお知らせ」と「商品画像」が以下の場所に表示されます。 WooCommerce > 設定 > 商品 > 表示セクション; 商品カタログが新しくなりました。
新機能や改良機能を利用するために、WooCommerceの最新バージョンにアップデートすることをお勧めします。 ありがとうございます！
プラグイン「Regenerate Thumbnails」はまだ使用できますか？ トップへ戻る
はい、できます。 しかし、WooCommerce 3.3.0以上を使用している場合は不要です。新しいまたは異なるテーマへの変更、または商品カタログや商品画像のライブ変更は、WooCommerceがあなたのためにサムネイルと商品カタログ画像を自動サイズ調整および自動更新するトリガーになります。
Regenerate Shop Thumbnailsオプションも使用できます。 WooCommerce > Status > Tools.
で、ショップサムネイルを再生成するオプションを使用することもできます。