In certain cases, you may not be able to achieve exactly what you want using only the styling options. To further customize the look and layout of your order tracking pages, you can add some of your own CSS.
We’ve added a Custom CSS input area to the top of the Basic settings page, which you can use to add your custom CSS. If you’d prefer, you can also/instead use the Additional CSS area in your theme’s customizer for this.
Please note that using custom CSS to modify the look of your order tracking pages requires knowledge of CSS. Attempting to modify your order tracking pages without this knowledge may result in messing up the layout and even possibly altering/removing certain functionality.
As an example, let’s say that you wanted to make the font size bigger in the main tracking form. The following CSS would help you to achieve that:
.ewd-otp-order-tracking-form-div {
font-size: 1.5em;
}
CSS Selectors
Some common CSS selectors from the plugin are:
.ewd-otp-form
Main overall container for the order tracking form
.ewd-otp-order-tracking-form-div h3
Tracking form title
.ewd-otp-tracking-form label
Tracking form input label
.ewd-otp-tracking-form input
Tracking form input field
.ewd-otp-submit
Tracking form submit button
.ewd-otp-tracking-results
Main overall container for the tracking results
.ewd-otp-tracking-graphic
The tracking graphic/status bar
.ewd-otp-tracking-results-field
Container for each row on the tracking results page
.ewd-otp-tracking-results-label
Label for each row on the tracking results page
.ewd-otp-tracking-results-value
Value for each row on the tracking results page
.ewd-otp-tracking-results-value iframe
The tracking map
.ewd-otp-status-label
Selector for each row of the past statuses area on the tracking results page
.ewd-otp-statuses-header
Selector for each entry in the header row of the past statuses area on the tracking results page
.ewd-otp-statuses
Selector for each entry in the rest of the rows in the past statuses area on the tracking results page
.ewd-otp-print-results
The “Print” button on the tracking results page
.ewd-otp-matching-orders
The table on the customer or sales rep tracking results page
.ewd-otp-customer-order-form
Main oversall container for the customer order form
.ewd-otp-customer-order-form-field
Selector for each row in the customer order form
.ewd-otp-customer-order-form-label
Input label in the customer order form
.ewd-otp-customer-order-form-value
Input field container in the customer order form
.ewd-otp-submit
Submit button in the customer order form