How to Add Custom Fields to Your Woocommerce Product Page

Are you looking to add custom fields to your WooCommerce product pages. With WooCommerce’s flexibility and customization options, you can easily add additional input fields and even you can apply extra costs based on customer selections.

Adding Custom Fields to Woocommerce Product Pages

To begin, let’s add custom fields to product page. This enables customers to specify additional details for their order. Here’s a code snippet that will show you how to include custom text and color fields in prodcut page:

function custom_add_product_fields() { ?>
    <div class="custom-field-wrap" style="margin: 10px;">
        <label for="custom_text"><?php esc_html_e( 'Custom Text', 'woocommerce' ); ?></label>
        <input type="text" name='custom_text' id='custom_text' value=''>
    </div>
    <div class="custom-field-wrap" style="margin: 10px;">
        <label for="custom_color"><?php esc_html_e( 'Custom Color', 'woocommerce' ); ?></label>
       <input type="color" name="custom_color" id="custom_color" value=''>
    </div>
    <?php
}
add_action( 'woocommerce_before_add_to_cart_button', 'custom_add_product_fields' );

Saving Custom Field Values to Cart

Next, let’s ensure that the custom field values are saved when customer add product to their cart. Additionally, we’ll apply an extra cost if the custom text field is filled:

function save_custom_field_values_to_cart( $cart_item_data, $product_id, $variation_id ) {
    if ( isset( $_POST['custom_text'] ) ) {
        $cart_item_data['custom_text'] = sanitize_text_field( $_POST['custom_text'] );

        // Add extra cost if custom field is filled
        $cart_item_data['custom_field_extra_cost'] = 200;
    }

    if ( isset( $_POST['custom_color'] ) ) {
        $cart_item_data['custom_color'] = sanitize_text_field( $_POST['custom_color'] );
    }

    return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'save_custom_field_values_to_cart', 10, 3 );

Applying Extra Cost to Cart Total

If the custom text field is filled, then let’s apply an extra cost to the cart total. This ensures that customers are informed of any additional charges before proceeding to checkout. If you don’t want to add extra cost to order then you can just skip this step:

function add_extra_cost_to_cart_total() {
    global $woocommerce;
    
    foreach ($woocommerce->cart->cart_contents as $cart_item_key => $cart_item) {
        if (isset($cart_item['custom_field_extra_cost'])) {
            $extra_cost = $cart_item['custom_field_extra_cost'];
            $woocommerce->cart->add_fee(__('Custom Cost', 'woocommerce'), $extra_cost);
        }
    }
}
add_action('woocommerce_cart_calculate_fees', 'add_extra_cost_to_cart_total');

Displaying Custom Item Data in the Cart

Finally, let’s ensure that the custom item data is displayed accurately in the cart, checkout, order and user email, providing customers with a clear overview of their selections:

function get_custom_item_data( $item_data, $cart_item_data ) {
    if ( isset( $cart_item_data['custom_text'] ) ) {
        $item_data[] = array(
            'key'   => __( 'Custom Text cart page', 'woocommerce' ),
            'value' => wc_clean( $cart_item_data['custom_text'] ),
        );
    }

    if ( isset( $cart_item_data['custom_color'] ) ) {
        $item_data[] = array(
            'key'   => __( 'Custom Color cart', 'woocommerce' ),
            'value' => wc_clean( $cart_item_data['custom_color'] ),
        );
    }
    
    return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'get_custom_item_data', 10, 2 );

Conclusion

By implementing custom fields and extra costs in your WooCommerce store, you can offer customers greater flexibility and personalization options while potentially increasing your revenue through additional charges. Experiment with these features to see how they can enhance your store’s functionality and cater to your customers’ unique preferences.