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

Enable the widget.png

To use the Timeline widget from Element Pack Pro, first, you have to enable the widget.

  1. Go to WordPress dashboard > Element Pack Pro Plugin dashboard.

  2. Then, Click the 3rd Party Widgets Tab.

  3. Search the WooCommerce Elements Widget Name.

  4. Enable the WooCommerce Elements Widget.

  5. Hit the Save Settings Button.

Note: The WooCommerce Tracking Form is located under 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

Drag & Drop the widget.png

  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

Layout Section

Go to Content > Element

Element.png

1. Element: You can select the element type to the Cart Page, Single Product Page, Checkout Page, Order Tracking Form & My Account. Here, we selected the element as Order Tracking Form.

Work with The Style Tab

Label Section 

Go to Style > Label

Label.png

  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

Input - 01.png

  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.

Input 02.png

  1. External Space: You can adjust the space between the input field and the button with this option.

  2. Border Style: Enable the switcher to get more options to customize the border.

  3. 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.

  4. Border Width: Set the thickness of the border with this option.

Input 03.png

  1. Border Color: You can change the border color with this option.

  2. Border Radius: This option controls the roundness of the border.

Button Style Section

Go to Style > Button Style

Button - Normal 01.png

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.

Button - Normal 02.png

  1. Box Shadow: You can add a shadow effect to the trigger button with this option.

  2. Padding: You can adjust the inner space of the trigger button with this option.

  3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Button - Hover.png

Now let’s proceed to the Hover Tab -

  1. Text Color: You can change the button text hover color with this option.

  2. 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. Learn more about the WooCommerce Tracking Form widget. Please visit the demo page for examples.

Thanks for being with us.