In this documentation, we will discuss the customization of the WooCommerce Tracking Form widget, brought to you by the Element Pack Pro addon for Elementor.
Enable The WooCommerce Elements Widget
To use the Timeline widget from Element Pack Pro, first, you have to enable the widget.
- Go to WordPress dashboard > Element Pack Pro Plugin dashboard.
- Then, Click the 3rd Party Widgets Tab.
- Search the WooCommerce Elements Widget Name.
- Enable the WooCommerce Elements Widget.
- Hit the Save Settings Button.
Note: The WooCommerce Tracking Form is located inside the WooCommerce Elements widget. To make it visible in the editor, you need to enable the WC Elements widget first.
Inserting the WooCommerce Elements widget
1. Go to the Elementor Editor Page and Hit the “+” icon Button.
2. Search the WC – Elements widget.
3. Drag the widget and Drop it on the editor page.
Work With The Content Tab
Element Section
Go to Content > Element
1. Element: Here you can choose the element type for Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account. In this example, we selected Order Tracking Form to demonstrate the Element feature.
Work with The Style Tab
Label Section
Go to Style > Label
1. Color: You can change the label color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Input Section
Go to Style > Input
1. Placeholder Color: You can change the placeholder color with this option.
2. Text Color: You can change the input text color with this option.
3. Background Color: You can change the background color with this option.
4. Padding: This option allows you to adjust the inner space of the input field.
5. External Space: You can adjust the space between the input field and the button with this option.
6. Border Style: Enable the switcher to get more options to customize the border.
7. Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
8. Border Width: Set the thickness of the border with this option.
9. Border Color: You can change the border color with this option.
10. Border Radius: This option controls the roundness of the border.
Button Style Section
Go to Style > Button Style
In this section, we have two more tabs. These are Normal & Hover. Let’s start with the Normal Tab –
1. Text Color: You can change the button text color with this option.
2. Background Color: You can change the background color with this option.
3. Border Type: You can add and change the border type with this option.
4. Border Radius: This option controls the roundness of the border.
5. Box Shadow: You can add a shadow effect to the trigger button with this option.
6. Padding: You can adjust the inner space of the trigger button with this option.
7. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now let’s proceed to the Hover Tab –
8. Text Color: You can change the button text hover color with this option.
9. Background Color: You can change the background color with this option.
All done! You have successfully customized the WooCommerce Tracking Form widget in your website.
Video Assist
You can also watch the video tutorial to learn more about the WooCommerce Tracking Form widget. Please visit the demo page for examples.
Thanks for being with us.
