How to Add URL Field with Validation as Input Field on WooCommerce Product Page?

When selling customized products such as printed T-shirts, customers often have specific designs or reference products from other sites. By adding an input URL field on the product page, this feature allows customers to specify their customization preferences easily.

For instance, if a customer wants to order a custom-printed T-shirt featuring a specific image, they can simply provide the URL of the reference image. And with this WooCommerce customization customers can get exactly what they’re looking for using these custom input fields. Curious about how it works? Let’s take a closer look at how you can do just with a custom URL input field.

Solution: Add URL Field with Validation as Input Field on WooCommerce Product Page

This code adds a URL input field to the WooCommerce product page and ensures that a valid URL is entered before allowing the product to be added to the cart.

// Adding URL field on product page
add_action( 'woocommerce_before_add_to_cart_button', 'ts_add_url_field_to_product_page', 9 );
function ts_add_url_field_to_product_page() {
    echo '<div class="custom-url-field-wrapper">';

    // URL Field
    woocommerce_form_field( 'custom_url', array(
        'type' => 'url',
        'required' => true,
        'label' => 'Product URL',
        'placeholder' => 'Enter product URL...',
        'class' => array('custom-url-field'),
    ));

    echo '</div>';
}

// Validate URL field before adding to cart
add_filter( 'woocommerce_add_to_cart_validation', 'ts_validate_url_field', 10, 3 );
function ts_validate_url_field( $passed, $product_id, $quantity ) {
    if ( empty( $_POST['custom_url'] ) || ! filter_var( $_POST['custom_url'], FILTER_VALIDATE_URL ) ) {
        wc_add_notice( 'Please enter a valid URL for the product.', 'error' );
        $passed = false;
    }
    return $passed;
}

// Save custom URL to cart item data
add_filter( 'woocommerce_add_cart_item_data', 'ts_save_custom_url_to_cart_item_data', 10, 2 );
function ts_save_custom_url_to_cart_item_data( $cart_item_data, $product_id ) {
    if ( isset( $_POST['custom_url'] ) ) {
        $cart_item_data['custom_url'] = sanitize_text_field( $_POST['custom_url'] );
        $cart_item_data['unique_key'] = md5( microtime().rand() ); // Ensure unique cart item
    }
    return $cart_item_data;
}

// Display custom URL in the cart
add_filter( 'woocommerce_get_item_data', 'ts_display_custom_url_cart', 10, 2 );
function ts_display_custom_url_cart( $item_data, $cart_item ) {
    if ( isset( $cart_item['custom_url'] ) ) {
        $item_data[] = array(
            'name' => 'Product URL',
            'value' => esc_url( $cart_item['custom_url'] )
        );
    }
    return $item_data;
}

// Save custom URL to order meta
add_action( 'woocommerce_checkout_create_order_line_item', 'ts_save_custom_url_to_order_items', 10, 4 );
function ts_save_custom_url_to_order_items( $item, $cart_item_key, $values, $order ) {
    if ( isset( $values['custom_url'] ) ) {
        $item->add_meta_data( 'Product URL', $values['custom_url'], true );
    }
}

// Add a custom column header to the admin order items table
add_filter( 'woocommerce_admin_order_item_headers', 'ts_add_custom_column_header' );
function ts_add_custom_column_header() {
    echo '<th class="custom-url">Product URL</th>';
}

// Display the custom URL in the custom column on the admin order items table
add_action( 'woocommerce_admin_order_item_values', 'ts_add_custom_column_value', 10, 3 );
function ts_add_custom_column_value( $_product, $item, $item_id ) {
    if ( $item->get_meta( 'Product URL' ) ) {
        echo '<td class="custom-url">' . esc_url( $item->get_meta( 'Product URL' ) ) . '</td>';
    } else {
        echo '<td class="custom-url">-</td>';
    }
}

Output

When a customer visits a product page, they’ll see a “Product URL” input field alongside the product details. They can enter the URL of a specific image or reference product they want to use for customization.

Suppose a customer has a specific design they want to be printed on a custom-printed T-shirt. In this case, they can enter the URL of the reference image.

The customer entered URL on the product page will be shown on the admin order details page which allows the admin to click on the URL and view the reference image.

The admin can view the reference image from the URL clicked and get the customization image that the customer expects.

Also note that only if a valid URL is entered, customers can proceed to add the product to their cart; if not an error message prompts them to correct the input.

While the URL input field requires customers to provide necessary information, it could potentially distract them from the product page. Alternatively, radio buttons added as custom input fields to product pages offer a simpler solution. With a set of predefined options presented to customers, selecting from radio buttons becomes effortless. Customers can quickly choose from the available options without the need to input URLs, making the customization process easier.