とともに Product Size Charts module by ShopEngine, you can add a product size chart of any information you want in an image format on the product page. You can add as many charts as you want, and a single one from  the product settings of each product.

Add Product Size Charts to your WooCommerce site using ShopEngine #

あなたは付け加えられます 製品サイズ表 to your WooCommerce Elementor website by following the simple steps.
Before that, get ShopEngine Pro now 👇

ステップ 1: ShopEngine の製品サイズ チャート モジュールを有効にする #

From the WordPress dashboard –

• Go to ShopEngine Modules
• Find Product Size Charts, enable it and click on the settings icon.

設定を確認したら、 モジュールを有効にする. You should see a successfully saved message after that.

Note:  You can also enable all the modules at the same time. Check out how you can すべてのモジュールを一度にオンにします。

Step 2: Add a new product size chart #

新しいサイズ チャートを追加するには、 +新規追加 ボタン

Epand the arrow sign, then –

• give a name for the chart title
• Click on the select icon to 画像を選択してください for this product size chart
• Select category to which you want to assign the size chart.
• Finally, click on Save Changes.

注記: 割り当てられたサイズ表は、そのカテゴリのすべての製品に適用されます。

注記: チャートは必要なだけ追加できます。追加して保存した後は、いつでも戻って見ることができます グラフのタイトルと画像を編集する すでに追加されているチャートの数。そしてまた 消去 既存のチャートのいずれか。

Step 3: Add Product Size Charts widgets to Single Product Template #

Once you are done creating your size charts, you need to add the WooCommerce Product Size Charts widget to your single product page template by ShopEngine to make it visible on the front end. 

注記： 方法についてサポートが必要な場合は、 shopEngine の単一の製品テンプレートを作成および編集する ドキュメントをチェックしてください。

1. From ShopEngine widgets
2. Find product size chart, turn it on
3. 変更を保存します

単一製品テンプレートの「Elementor で編集」モードになったら、次のように検索します。 Product Size Chart widget そしてただ単に ドラッグアンドドロップ ご希望の場所に。

Step 4: Customize the Widget #

You will get two settings for the size chart in the コンテンツタブ which includes:

• View cart as: サイズチャートは 2 つの方法で表示できます。 モーダルとノーマル。

モーダル： Modal is the default option and with modal you also get the option to カスタムボタンのラベルを設定します。

普通： 通常モードを選択する場合は、「グラフを表示」ドロップダウンから「通常」を選択します。標準を選択すると、画像のカスタム見出しを設定できる新しいオプションのチャート見出しが表示されます。

ボタンラベル: It allows you to customize the text displayed on the button.

ステップ 5. モーダル/通常の製品サイズ表のスタイル設定 #

選択したビュー サイズ チャート オプションの種類に応じて、関連するスタイル設定が得られます。スタイル設定にアクセスするには、Elementor エディターのスタイル タブに移動します。

Style Settings for Modal Size Chart #

For the modal view option of size chart, you will get the following style settings that you can customize according to your choice.

サイズチャートボタン: Expand the size chart menu, and you will find the following option:

• タイポグラフィ：フォント サイズ、フォント ファミリー、フォントの太さを選択します。
• 色と背景色: ホバー表示と通常表示の両方の色と背景色を選択します。
• 枠線の種類: 境界線のタイプは、なし、実線、二重、破線などから選択できます。
• 幅： 左右上下の幅を選択します。
• 色： 境界線の色を選択します。
• 境界線の半径 (ピクセル):  境界線の半径を指定します。
• パディング(ピクセル): 上、右、下、左のパディングを調整します。

Size Charts Popups: サイズチャートのポップアップを展開して、次のオプションをカスタマイズします。

• 境界線の半径 (ピクセル): 境界線の半径の値を選択します。
• パディング(ピクセル): 上、右、下、左のパディングを調整します。
• 背景色: ここで画像の背景色を選択できます。

モーダルビューを使用したい場合 すべての変更を加えた後 「更新」をクリックして保存し、次のステップに進みます。

Size Settings for Normal Size chart #

一方、通常のビューを選択すると、[サイズ チャート スタイル] オプションの下にカスタマイズできる多くのオプションが表示されます。

• 配置: ここで、サイズチャートの見出しの位置を調整できます。
• 見出しの色: 見出しの色を選択します。
• タイトルのタイポグラフィ: ここでは、フォントファミリー、サイズ、フォントの太さ、行の高さをカスタマイズできます。
• 見出しの余白 (px): ここで見出しの周囲の余白を調整します。
• 画像の幅 (ピクセル): ここで画像の高さを調整できます。
• 画像のパディング (ピクセル): 画像のパディング値を指定します
• 画像の境界線の半径 (ピクセル): 境界線の半径の値を選択します。

Finally click on update to save WooCommerce product size charts.

Add size charts to product (Optional) #

あなたがしたい場合は 新しい異なるサイズ表を特定の製品に割り当てます。 then you can follow these steps. The new size chart that you will assign to a new product will have カテゴリ サイズ チャートよりも優先されます。

1. From the WordPress dashboard go to WooCommerce
2. 商品 ⇒ 全商品
3. Click on edit option of the product you want to edit

Now from the product settings –

• 行く に Size Charts
• Check the Product chart option
• Once you check the chart option, the chart dropdown will be accessible. Choose the option you want from the dropdown.

Finally, update the product and see preview #

Once you choose your product chart, scroll up and click on update to save. 

最終結果を確認するには、編集したばかりの製品ページに移動すると、以下のプレビューのような製品グラフが表示されるはずです。

注記： サイズ表を表示したいすべての商品に手動でサイズ表を追加する必要があります。

Here is a preview of Product size cart with normal view.