WooCommerce Custom Product Fields

WooCommerce Custom Product Fields

Add custom fields to your WooCommerce products with a complete admin interface and frontend display functionality.

// Add custom fields to product general tab
add_action('woocommerce_product_options_general_product_data', 'add_custom_product_fields');
function add_custom_product_fields() {
    global $post;

    echo '<div class="options_group">';

    // Custom text field
    woocommerce_wp_text_input(array(
        'id'          => '_custom_product_text_field',
        'label'       => __('Custom Text Field', 'woocommerce'),
        'placeholder' => 'Enter custom text',
        'desc_tip'    => 'true',
        'description' => __('Enter a custom text value for this product.', 'woocommerce'),
    ));

    // Custom number field
    woocommerce_wp_text_input(array(
        'id'          => '_custom_product_number_field',
        'label'       => __('Custom Number Field', 'woocommerce'),
        'placeholder' => '',
        'type'        => 'number',
        'custom_attributes' => array(
            'step' => 'any',
            'min'  => '0'
        )
    ));

    // Custom select field
    woocommerce_wp_select(array(
        'id'      => '_custom_product_select',
        'label'   => __('Custom Select', 'woocommerce'),
        'options' => array(
            ''        => __('Select option', 'woocommerce'),
            'option1' => __('Option 1', 'woocommerce'),
            'option2' => __('Option 2', 'woocommerce'),
            'option3' => __('Option 3', 'woocommerce'),
        )
    ));

    // Custom checkbox
    woocommerce_wp_checkbox(array(
        'id'          => '_custom_product_checkbox',
        'label'       => __('Enable Custom Feature', 'woocommerce'),
        'description' => __('Check this box to enable the custom feature.', 'woocommerce')
    ));

    echo '</div>';
}

// Save custom fields
add_action('woocommerce_process_product_meta', 'save_custom_product_fields');
function save_custom_product_fields($post_id) {
    // Save text field
    $custom_text = isset($_POST['_custom_product_text_field']) ?
        sanitize_text_field($_POST['_custom_product_text_field']) : '';
    update_post_meta($post_id, '_custom_product_text_field', $custom_text);

    // Save number field
    $custom_number = isset($_POST['_custom_product_number_field']) ?
        sanitize_text_field($_POST['_custom_product_number_field']) : '';
    update_post_meta($post_id, '_custom_product_number_field', $custom_number);

    // Save select field
    $custom_select = isset($_POST['_custom_product_select']) ?
        sanitize_text_field($_POST['_custom_product_select']) : '';
    update_post_meta($post_id, '_custom_product_select', $custom_select);

    // Save checkbox
    $custom_checkbox = isset($_POST['_custom_product_checkbox']) ? 'yes' : 'no';
    update_post_meta($post_id, '_custom_product_checkbox', $custom_checkbox);
}

Display Custom Fields on Frontend

// Display custom fields on product page
add_action('woocommerce_single_product_summary', 'display_custom_product_fields', 25);
function display_custom_product_fields() {
    global $product;

    $custom_text = get_post_meta($product->get_id(), '_custom_product_text_field', true);
    $custom_number = get_post_meta($product->get_id(), '_custom_product_number_field', true);
    $custom_select = get_post_meta($product->get_id(), '_custom_product_select', true);
    $custom_checkbox = get_post_meta($product->get_id(), '_custom_product_checkbox', true);

    echo '<div class="custom-product-fields">';

    if (!empty($custom_text)) {
        echo '<p class="custom-text"><strong>Custom Info:</strong> ' . esc_html($custom_text) . '</p>';
    }

    if (!empty($custom_number)) {
        echo '<p class="custom-number"><strong>Custom Number:</strong> ' . esc_html($custom_number) . '</p>';
    }

    if (!empty($custom_select)) {
        echo '<p class="custom-select"><strong>Selected Option:</strong> ' . esc_html($custom_select) . '</p>';
    }

    if ($custom_checkbox === 'yes') {
        echo '<p class="custom-feature"><span class="badge">Special Feature Enabled</span></p>';
    }

    echo '</div>';
}

Add Custom Fields to Inventory Tab

// Add custom fields to inventory tab
add_action('woocommerce_product_options_inventory_product_data', 'add_custom_inventory_fields');
function add_custom_inventory_fields() {
    woocommerce_wp_text_input(array(
        'id'          => '_custom_supplier',
        'label'       => __('Supplier Name', 'woocommerce'),
        'placeholder' => 'Enter supplier name',
        'desc_tip'    => true,
        'description' => __('Enter the supplier name for this product.', 'woocommerce')
    ));

    woocommerce_wp_text_input(array(
        'id'          => '_custom_reorder_point',
        'label'       => __('Reorder Point', 'woocommerce'),
        'placeholder' => '10',
        'type'        => 'number',
        'desc_tip'    => true,
        'description' => __('Stock level at which to reorder.', 'woocommerce')
    ));
}

Display in Admin Order Details

// Show custom fields in admin order items
add_action('woocommerce_before_order_itemmeta', 'display_custom_fields_in_admin_order', 10, 3);
function display_custom_fields_in_admin_order($item_id, $item, $product) {
    if (!$product) {
        return;
    }

    $custom_text = get_post_meta($product->get_id(), '_custom_product_text_field', true);

    if ($custom_text) {
        echo '<div class="custom-field-info">';
        echo '<strong>Custom Info:</strong> ' . esc_html($custom_text);
        echo '</div>';
    }
}

Add to Cart Item Data

// Add custom field data to cart item
add_filter('woocommerce_add_cart_item_data', 'add_custom_field_to_cart_item', 10, 3);
function add_custom_field_to_cart_item($cart_item_data, $product_id, $variation_id) {
    $custom_text = get_post_meta($product_id, '_custom_product_text_field', true);

    if (!empty($custom_text)) {
        $cart_item_data['custom_field'] = $custom_text;
    }

    return $cart_item_data;
}

// Display custom field in cart
add_filter('woocommerce_get_item_data', 'display_custom_field_in_cart', 10, 2);
function display_custom_field_in_cart($item_data, $cart_item) {
    if (isset($cart_item['custom_field'])) {
        $item_data[] = array(
            'name'  => __('Custom Info', 'woocommerce'),
            'value' => $cart_item['custom_field']
        );
    }

    return $item_data;
}

Styling

.custom-product-fields {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
}

.custom-product-fields p {
    margin: 8px 0;
}

.custom-product-fields .badge {
    display: inline-block;
    padding: 5px 10px;
    background: #0073aa;
    color: white;
    border-radius: 3px;
    font-size: 12px;
}

Features

• Easy Admin Interface: Uses WooCommerce's built-in field functions
• Multiple Field Types: Text, number, select, and checkbox fields
• Frontend Display: Shows custom fields on product pages
• Cart Integration: Displays custom data in cart and checkout
• Order Display: Shows custom fields in admin order details
• Extensible: Easy to add more custom fields