Med 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 #

Du kan tilføje Produktstørrelsesdiagrammer to your WooCommerce Elementor website by following the simple steps.
Before that, get ShopEngine Pro now 👇

Trin 1: Aktiver modulet Produktstørrelsesdiagrammer i ShopEngine #

From the WordPress dashboard –

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

Når du ser indstillingerne, aktivere modulet. 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 tænde for alle moduler på én gang.

Step 2: Add a new product size chart #

For at tilføje et nyt størrelsesskema, klik på +Tilføj ny knap

Epand the arrow sign, then –

• give a name for the chart title
• Click on the select icon to choose an image for this product size chart
• Select category to which you want to assign the size chart.
• Finally, click on Save Changes.

Bemærk: Det tildelte størrelsesskema vil være gældende for alle produkter i kategorien.

Bemærk: Du kan tilføje så mange diagrammer, som du vil. Når du har tilføjet og gemt, kan du vende tilbage til enhver tid rediger diagrammets titel og billede af allerede tilføjede diagrammer. Og også slette nogen af de eksisterende diagrammer.

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. 

Bemærk: Hvis du har brug for hjælp til hvordan oprette og redigere en enkelt produktskabelon af shopEngine tjek vores dokumentation.

1. From ShopEngine widgets
2. Find product size chart, turn it on
3. Gem ændringerne

Når du er i Rediger med Elementor-tilstand for den enkelte produktskabelon, skal du søge efter Product Size Chart widget og simpelthen bare Træk og slip på dit ønskede sted.

Step 4: Customize the Widget #

You will get two settings for the size chart in the Content tab which includes:

• View cart as: Du kan vise størrelsesdiagrammet på to måder, Modal og Normal.

Modal: Modal is the default option and with modal you also get the option to indstille en brugerdefineret knaplabel.

Normal: Hvis du vil vælge en normal tilstand, skal du vælge Normal fra rullemenuen Vis diagram som. Når du har valgt normal, får du en ny indstilling Diagramoverskrift, hvor du kan indstille en brugerdefineret overskrift til billedet.

Knap etiket: It allows you to customize the text displayed on the button.

Trin 5. Stilindstillinger for Modal/Normal produktstørrelsesdiagram #

Afhængigt af hvilken type visningsstørrelsesdiagram du vælger, får du relevante stilindstillinger. For at få adgang til stilindstillingerne skal du flytte til stilfanen i Elementor-editoren.

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.

Størrelsesdiagramknap: Expand the size chart menu, and you will find the following option:

• Typografi:Vælg skriftstørrelse, skrifttypefamilie og skriftvægt.
• Farve og baggrundsfarve: Vælg farve og baggrundsfarve for både svæve- og normalvisning.
• Kanttype: Du kan vælge kanttype som ingen, solid, fordoblet, stiplet osv.
• Bredde: Vælg venstre, højre, top og bund bredde.
• Farve: Vælg en farve til kanten.
• Kantradius (px):  Angiv en kantradius.
• Polstring (px): Juster top, højre, bund og venstre polstring.

Size Charts Popups: Udvid pop op-vinduet med størrelsesdiagram for at tilpasse følgende mulighed:

• Kantradius (px): Vælg en grænseradiusværdi.
• Polstring (px): Juster top, højre, bund og venstre polstring.
• Baggrundsfarve: Her kan du vælge billedets baggrundsfarve.

Hvis du vil gå efter Modal-visningen derefter efter at have foretaget alle ændringerne klik på opdater for at gemme og gå videre til næste trin.

Size Settings for Normal Size chart #

På den anden side, hvis du går efter en normal visning, vil du finde mange muligheder under indstillingen Størrelsestabelstil, som du kan tilpasse:

• Justering: Her kan du justere justeringen af størrelsesskemaets overskrift.
• Overskriftsfarve: Vælg en farve til overskriften.
• Titeltypografi: Her kan du tilpasse skrifttypefamilie, størrelse, skriftvægt og linjehøjde.
• Overskriftsmargen (px): Juster margenen omkring overskriften her.
• Billedbredde (px): Her kan du justere højden på billedet.
• Billedpolstring (px): Angiv polstringsværdi for billedet
• Billedkantradius (px): Vælg en værdi for kantradius.

Finally click on update to save WooCommerce product size charts.

Add size charts to product (Optional) #

Hvis du vil tildele et nyt andet størrelsesskema til et specifikt produkt, then you can follow these steps. The new size chart that you will assign to a new product will have højere prioritet end kategoristørrelsesdiagrammet.

1. From the WordPress dashboard go to WooCommerce
2. Produkter ⇒ Alle produkter
3. Click on edit option of the product you want to edit

Now from the product settings –

• Gå til 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. 

Gå nu til den produktside, du lige har redigeret for at se det endelige resultat, og du bør se produktdiagrammet som eksempelet nedenfor.

Bemærk: Du skal manuelt tilføje størrelsestabeller til alle de produkter, som du vil vise størrelsesskemaet for.

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