Number

The Number option lets customers enter numeric values, such as measurements, quantities, or custom dimensions.

General Tab (Basic Settings)

This tab controls the core configuration of the Number field, including the label, help text, pricing behavior, numeric step values, and minimum or maximum limits.

Required

Enable this option to make the number field mandatory. Customers must enter a value before they can add the product to the cart.

Hide Label

Hide the field label from customers. Enable this when the purpose of the field is already clear or when you want a minimal layout.

Label

The visible name shown to customers (for example: “Quantity”, “Width”, or “Number of Items”). Keep the label short and descriptive so customers understand what numeric value they need to enter.

Help Text

Short instructional text shown to customers to guide their input. For examples:

• “Enter the desired quantity”
• “Specify the width in centimeters”
• “Enter a value between 1 and 10”

The display position of the help text can be controlled in the Style Tab.

Price Type

Defines how the entered number affects the product price.

• No Cost: The entered value does not add any additional cost.
• Fixed: Adds a fixed amount to the product price.
• Percentage: Adds a percentage based on the product price.

Price

The amount added to the product price based on the selected Price Type. For example:

• Fixed price adjustment based on the entered number
• Percentage-based pricing adjustment

Placeholder

Example text displayed inside the input box before the customer enters a value. Use placeholders to guide the customer on what to enter.

Example: Enter quantity

Steps

Defines the increment value when increasing or decreasing the number using the input controls. For example:

• 1 – increases by one unit at a time
• 5 – increases in steps of five

Enable Min-Max Value

Enable this option to restrict the range of numbers customers can enter.

• Min Value: Sets the minimum number that customers can enter.
• Max Value: Sets the maximum number that customers can enter.

Style Tab (Layout & Appearance)

This tab controls how the Number field appears on the product page, including help text placement, price display position, field width, and custom styling.

Help Text Position

Controls where the help text appears relative to the field.

• Below Label: Help text appears under the field label.
• Below Field: Help text appears below the number input field.
• Tooltip: Help text appears inside an information icon, saving space in the layout.

Price Position

Controls where the price adjustment label appears.

• With Title: The price appears next to the field label.
• With Option: The price appears near the number input field.

Field Width

Controls how wide the number field appears within the options layout.

• 33% – narrow column
• 50% – half width
• 66% – wide column
• 100% – full width

Class (Unique)

A unique CSS class assigned to the number field (example: wo_number_1).

Use this if you want to:

• apply custom CSS styling
• target the field with custom scripts
• customize its appearance using theme code

Conditions Tab

Use this tab to control the visibility of the Number option. You can show or hide it only when specific custom options or Shopify variants are selected. To learn how to configure conditional logic, follow this guide.

Get Support 👇

If you experience any issues while configuring the Number option, reach out to the WowApps support team via the in-app chat or email support@wowapps.io. You can also reach the dedicated manager at nayeem@wowapps.io.