Elementor Connector for Measurement Price Calculator

Overview 

The WooCommerce Measurement Price Calculator is a powerful plugin designed for WooCommerce that allows businesses to sell products based on their dimensions, square footage, volume, or weight. This is particularly useful for businesses selling items like liquids, fabric, fencing, tiles, or other products sold in quantity by length, area, volume or weight.

The plugin provides two calculation modes: quantity-based and user-defined. In quantity-based mode, customers can select a predetermined quantity of the product. In user-defined mode, customers can enter their desired dimensions and the plugin calculates the required quantity and price.

Additionally, the plugin supports complex pricing models, variable products, and allows you to control the minimum and maximum values a customer can enter. It also integrates seamlessly with WooCommerce, ensuring a smooth customer experience.

Elementor Connector for WooCommerce enhances the user experience and functionality of WooCommerce Measurement Price Calculator in the following ways:

1. Improved Customization: Elementor’s drag-and-drop interface would allow users to easily customize the look and feel of the Measurement Price Calculator, making it seamlessly fit with their website’s design.
2. Streamlined Editing: Users could directly see changes in real-time within the Elementor editor, reducing the time spent on modifications and previewing changes.
3. Advanced Layout Options: With Elementor, users could place the calculator in any part of the single product page to improve user engagement and conversions.
4. Enhanced Responsiveness: Elementor’s responsive design settings would ensure that the Measurement Price Calculator looks great on all devices.
5. Integration with Other Widgets: Users could take advantage of Elementor’s vast library of widgets to enhance the functionality of the Measurement Price Calculator, such as adding pop-ups, forms, or additional product information.

Overall, Elementor Connector for WooCommerce makes WooCommerce Measurement Price Calculator more flexible, user-friendly, and visually consistent with the rest of the website.

---

Requirements

↑ Back to top

In order to use these widgets, you’ll need the following:

• WooCommerce
• WooCommerce Currency Converter
• Elementor
• Elementor Pro (For adding the measurement calculator widget to the single product page templates)
• Elementor Connector for WooCommerce

---

Measurement Price Calculator Widget

↑ Back to top

Content Tab

↑ Back to top

1. Choose specific product – Determines if the measurement pricing table is displayed for a specific product. Default value is ‘true’.
2. Select Product – Allows selection of a specific product for the measurement pricing table display. Appears only under certain conditions*.

Style Tab

↑ Back to top

1. Table Colors – Changes the color of the pricing table. 
2. Background – Sets the background of the pricing table. Options include classic and gradient types. Video backgrounds not supported.
3. Table Borders – Sets the border style of the pricing table. 
4. Border – Sets the border of the pricing table. 
5. Box Shadow – Toggles the box shadow for the pricing table. 
6. Table Dimensions – Sets the dimensions of the pricing table. 
7. Padding – Sets the padding around the pricing table. Values can be specified in different units**.
8. Margin – Sets the margin around the pricing table. Values can be specified in different units**.
9. Width – Sets the width of the pricing table. The default unit is ‘%’, default size is 100, range for percentage is 0 to 100.

---

Add-To-Cart Widget: Additional Controls

↑ Back to top

Elementor Connector for WooCommerce also adds additional controls to the Add to Cart widgets of Elementor Pro. These controls focus on the Measurement Price Calculator section that’s added to the add-to-cart buttons on a single product page.

Style Tab

↑ Back to top

Measurement Calculator Section – This section contains all the controls that allow you to modify the appearance of the Measurement Calculator widget. 

1. Backgrounds – This is a toggle control that opens a popover containing controls for modifying the background of the table and input fields.*
2. Table Background – This control allows you to set the background of the table. You can choose between classic and gradient types. Image backgrounds are excluded.
3. Input Field Background – This control allows you to set the background of the input fields. You can choose between classic and gradient types. Image backgrounds are excluded.
4. Borders – This is a toggle control that opens a popover containing controls for modifying the border of the table, input fields, and calculated price.*
5. Table Border – This control allows you to set the border of the table.
6. Input Field Border – This control allows you to set the border of the input fields.
7. Calculated Price Border – This control allows you to set the border of the calculated price. Color selection is excluded from this control.*
8. Calculated Price Border Color – This control allows you to set the color of the calculated price border. This control only shows if the calculated price border is not set to none or empty.
9. Border Radius – This is a toggle control that opens a popover containing controls for modifying the border radius of the table and input fields.*
10. Table Border Radius – This control allows you to set the border radius of the table. You can choose between units^.
11. Input Field Border Radius – This control allows you to set the border radius of the input fields. You can choose between units^.
12. Dimensions – This is a toggle control that opens a popover containing controls for modifying the padding and width of the table, table cells, and input fields.*
13. Table Padding – This control allows you to set the padding of the table. You can choose between units^.
14. Table Cells Padding – This control allows you to set the padding of the table cells. You can choose between units^.
15. Input Fields Padding – This control allows you to set the padding of the input fields. You can choose between units^.
16. Table Width – This control allows you to set the width of the table. You can choose between units. The default value is 100%^.
17. Input Fields Width – This control allows you to set the width of the input fields. You can choose between units. The default value is 50%^.
18. Tooltip Color – This control allows you to set the color of the tooltip icon.
19. Alignment – This control allows you to set the alignment of the table. The default value is left.
20. Typography – This control allows you to modify the typography of the table.
21. Font Colors – This is a toggle control that opens a popover containing controls for modifying the color of the general text, input fields, and calculated price.*
22. General Color – This control allows you to set the color of the general text.
23. Input Fields Color – This control allows you to set the color of the input fields.
24. Calculated Price Color – This control allows you to set the color of the calculated price.