WPMet Site Logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie Ai
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
WPMet Site Logo
Popular Search headermenumegafootermetform

Getting Started with ShopEngine

  • Getting Started
  • Getting started with ShopEngine RTL support
  • Enable All Module
  • Enable All Widgets
  • Guideline to Increase Your Server Performance by ShopEngine

ShopEngine Builder Templates

  • Shop Page
  • Cart Page Template
  • Create Single Product Page
  • Create Checkout Page
  • Create Order/Thank You Page
  • Archive Page
  • Order Thank You
  • Quick Checkout Template
  • Create Conditional Template
  • My Account Page
  • Empty Cart Template
  • Checkout Form – Billing
  • Quick View Builder Template
  • Reset Password Template

ShopEngine Account Settings

  • My Account Page
  • Account Address
  • Account Navigation
  • Account Logout
  • Account Form – Login
  • Account Dashboard
  • Account Form – Register
  • Account Details
  • Account Order Details
  • Account Downloads

ShopEngine Modules

  • Sales Notification
  • Preorder Module
  • Partial Payment
  • Checkout Additional Field
  • Badges
  • Flash Sale Countdown
  • Quick Checkout
  • Currency Switcher
  • Quick View
  • Variation Swatches
  • Wishlist
  • Back-Order
  • Sticky Fly Cart
  • Product Size Charts
  • Product Comparison
  • Multistep Checkout
  • ShopEngine Vacation
  • Advanced Coupon
  • Cross Sell Popup
  • Avatar Module

ShopEngine General Widgets

  • Categories
  • Archive Title Widget
  • Cart Table Widget
  • Upsell
  • Product Rating
  • Product Image
  • Add To Cart
  • Flash Sale Products
  • Product Tags
  • Thank You Address Details
  • Product Price
  • Product Title
  • Filterable Product List
  • Product Tabs
  • Currency Switcher
  • Product Share
  • Order by Filter
  • Breadcrumbs
  • Product Meta
  • Product Excerpt
  • Product Stock
  • Order Details
  • Product Description
  • Related Products
  • Order Confirm
  • Recently Viewed Products
  • Checkout Form – Payment
  • Checkout Form – Shipping
  • Product Category List
  • Additional Information
  • Checkout Form-Additional
  • Add Product SKU Using ShopEngine 
  • Product Categories
  • My Account Orders
  • Product Review
  • Return To Shop
  • Archive Description Widget
  • Cart Total
  • Archive Products Widget
  • Cross-sell
  • Deal Products
  • Product List
  • Archive Result Count
  • Archive View Mode
  • Empty Cart Message
  • Avatar Widget
  • Product Carousel (Pro)
  • Reset Password Form Widget

ShopEngine Product widgets

  • Products Per Page Filter
  • Advanced Search Widget
  • Deal Products
  • Filterable Product List
  • Flash Sale Products
  • Product Categories
  • Product Category List
  • Product Description
  • Product Excerpt
  • Product Image
  • Product List
  • Product Meta
  • Product Price
  • Product Rating
  • Product Review
  • Product Share
  • Add Product SKU Using ShopEngine 
  • Product Stock
  • Product Tabs
  • Product Tags
  • Product Title
  • Recently Viewed Products
  • Related Products

ShopEngine Archive Widgets

  • Archive Description Widget
  • Archive Products Widget
  • Archive Title Widget
  • Archive Result Count
  • Archive View Mode
  • Product Filters

ShopEngine Checkout Widgets

  • Checkout Form-Coupon
  • Checkout Form – Billing
  • Checkout Form – Payment
  • Checkout Form – Shipping
  • Checkout Form-Additional
  • Checkout Shipping Methods
  • Checkout Form Login
  • Checkout- Order Review
  • Checkout Order Pay

ShopEngine FAQ

  • ShopEngine FAQ

ShopEngine Support Hooks

  • Theme Integration with ShopEngine
  • Builder Templates Hooks

ShopEngine Gutenberg

  • ShopEngine Gutenberg Addon
  • ShopEngine Gutenberg Template
  • ShopEngine Gutenberg Modules

Multilingual Support - ShopEngine

  • Multi-Language Templates with WPML
  • Setup WPML and Translate WooCommerce Pages
  • WPML String Translation For ShopEngine
  • Multi-Language Templates with Polylang
  • ShopEngine Multilingual Hooks for Developers
  • Home
  • Doc
  • ShopEngine
  • ShopEngine Modules
  • Product Size Charts

Product Size Charts

With the 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.

How to add Product Size Charts to your WooCommerce site using ShopEngine #

You can add a Product Size Charts to your WooCommerce Elementor website by following 7 simple steps.

Step 1: Enable Product Size Charts module of ShopEngine #

From the WordPress dashboard,  go to ShopEngine ⇒ Modules ⇒ Product Size Charts and click on the settings icon.

path to product size charts of shopEngine

Once you see the settings, turn on the Enable the Module option. You should see a successfully saved message after that.

enable product size charts

Note:  You can also enable all the modules at the same time. Check out how you can turn on all the modules at once.

Step 2. Add a new product size chart #

To add a new size chart click on the +Add New button

click on Add new to create a new product size chart

Expand the arrow sign, give a name for the chart tile, click on the select icon to choose a image for this product size chart and select category to which you want to assign the size chart. Once you start typing the category name, a drop down will appear, you can select from that. And finally, click on save changes.

Note: The assigned size chart will be applicable on all the products of the category.

WooCommerce product size chart

Note: You can add as many charts as you want. After you add and save you can come back anytime to edit the chart title and image of already added charts. And also delete any of the existing charts.

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

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

Note: If you need help on how to create and edit a single product template of shopEngine checkout our documentation.

Once you are on the Edit with Elementor mode of the single product template, search for Product Size Charts widgets and simply just drag and drop on your desired place.

drag and drop product size charts

Step 4. Choose Normal Size Chart/ Modal Size Chart Type and customize #

You will get two settings for size chart which includes:

You can display the size chart in two ways, Modal and Normal.

Modal Size Chart: #

Modal is the default option and with modal you also get the option to set a custom button Label.

Product size chart modal settings

Normal Size Chart: #

If you want to choose a normal mode, from the View chart as dropdown choose Normal. After you choose normal, you will get a new option Chart heading where you can set a custom heading for the image.

size chart normal mode settings

Step 5. Style Settings of Modal/Normal Product Size Chart #

Depending on the type of view size chart option you choose, you will get relevant style settings. To access the style settings, move to the style tab on the Elementor editor.

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.

Size Charts Button: Expand the size chart menu and you will find the following option:

  • Typography:Choose the font size, font family and font weight.
  • Color and background color: Select the color and background color for both hover and normal view.
  • Border Type: You can choose border type as none, solid, doubled, dashed etc.
  • Width: Choose the left, right, top and bottom width.
  • Color: Select a color for the border.
  • Border Radius (px):  Provide a border radius.
  • Padding (px): Adjust the top, right , bottom and left padding.
Product size chart button style settings modal mode

Size Chart Popups: Expand the size chart popup to customize the following option:

  • Border Radius (px): Choose a border radius value.
  • Padding (px): Adjust the top, right , bottom and left padding
  • Background Color: Here you can choose the background color of the image.
Size charts popup style settings

If you want to go for the Modal view then after making all the changes click update to save and move to the next step.

Size Settings for Normal Size chart:  #

On the other hand, if you go for a normal view, you will find many options under the Size Chart Style option that you can customize:

  • Alignment: Here you can adjust the alignment of the size chart heading.
  • Heading Color: Choose a color for the heading.
  • Title Typography: Here you can customize the font family, size, font weight and line height.
  • Heading margin (px): Adjust the margin around the heading here.
  • Image width (px): Here you can adjust the height of the image.
  • Image padding (px): Provide padding value for the image
  • Image border radius (px): Select a value for the border radius.

Finally click on update to save.

size chart style settings for normal view

Step 6. Add size charts to product (Optional) #

Note: If you want to assign a new different size chart to a specific product, then you can follow this step. The new size chart that you will assign to a new product will have higher priority than the category size chart.

To add the product size chart to your products, from the WordPress dashboard go to Products ⇒ All products and click on edit option of the product you want to edit.

edit products to add size charts

Now from the product settings, go to 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

select size chart from drop down and update

Step 7. Finally, update the product and see preview #

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

update product chart and preview

Now to see the final result go to the product page you just edited and you should see the product chart like the preview below.

Note: You need to manually add size charts to all the products for which you want to display the size chart.

Here is preview of Product size cart with normal view

preview normal size chart

Here is preview of Product size chart with Popup view

Here is preview of Product size cart with normal view
What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on August 31, 2022
Partial Payment
Table of Contents
  • How to add Product Size Charts to your WooCommerce site using ShopEngine
    • Step 1: Enable Product Size Charts module of ShopEngine
    • Step 2. Add a new product size chart
    • Step 3. Add Product Size Charts widgets to Single Product Template
    • Step 4. Choose Normal Size Chart/ Modal Size Chart Type and customize
      • Modal Size Chart:
      • Normal Size Chart:
    • Step 5. Style Settings of Modal/Normal Product Size Chart
      • Style Settings for Modal Size Chart:
      • Size Settings for Normal Size chart: 
    • Step 6. Add size charts to product (Optional)
    • Step 7. Finally, update the product and see preview

Get Subscribed Today!

WPMet Site Logo
© 2023, Wpmet. All Rights Reserved. Built with ElementsKit.

Company

About us
Contact us
Support
Blog
Collaborate
Documentation

Resources

Affiliates
Affiliate Area
Privacy Policy
Terms & Conditions
Refund Policy
Login/Register

Our Products

Elements Kit
ShopEngine
GetGenie Ai
Metform
WP Social
Wp Ultimate Review
Wp Fundraising

Follow Us

Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT