WooCommerce product customizations

One common requirement in WooCommerce is to add customizations to products. This can include adding extra fields, modifying the product display, or performing custom actions when a product is added to the cart. Here’s an example of how you can achieve this using WordPress hooks and filters:

/**
 * Add custom fields to the product page
 */
function wpsnippets_add_custom_fields() {
    // Add a custom text field
    woocommerce_wp_text_input( array(
        'id'          => 'custom_field',
        'label'       => __( 'Custom Field', 'woocommerce' ),
        'placeholder' => __( 'Enter custom value', 'woocommerce' ),
        'desc_tip'    => true,
        'description' => __( 'This is a custom field for the product.', 'woocommerce' ),
    ) );
}
add_action( 'woocommerce_product_options_general_product_data', 'wpsnippets_add_custom_fields' );

/**
 * Save custom field data when the product is saved
 *
 * @param int $product_id The ID of the product being saved
 */
function wpsnippets_save_custom_fields( $product_id ) {
    // Save the custom field value
    $custom_field = isset( $_POST['custom_field'] ) ? sanitize_text_field( $_POST['custom_field'] ) : '';
    update_post_meta( $product_id, 'custom_field', $custom_field );
}
add_action( 'woocommerce_process_product_meta', 'wpsnippets_save_custom_fields' );

In this example, we use the woocommerce_wp_text_input function to add a custom text field to the product page. We hook this function to the woocommerce_product_options_general_product_data action, which is fired when the general product data section is displayed.

To save the custom field data, we hook the wpsnippets_save_custom_fields function to the woocommerce_process_product_meta action. This function retrieves the value of the custom field from the $_POST array, sanitizes it using sanitize_text_field, and saves it using the update_post_meta function.

This code can be useful when you need to collect additional information from customers when they purchase a product, such as engraving text, color preferences, or any other customizations specific to your products.

Examples

Example 1: Adding a custom field to WooCommerce product

This use case demonstrates how to add a custom field to a WooCommerce product. The code example adds a custom text field to the product edit page in the admin area.

function wpsnippets_add_custom_field() {
    echo '<div class="options_group">';
    woocommerce_wp_text_input( array(
        'id'          => 'custom_field',
        'label'       => __( 'Custom Field', 'woocommerce' ),
        'placeholder' => __( 'Enter custom field', 'woocommerce' ),
        'desc_tip'    => true,
        'description' => __( 'This is a custom field for the product.', 'woocommerce' ),
    ) );
    echo '</div>';
}
add_action( 'woocommerce_product_options_general_product_data', 'wpsnippets_add_custom_field' );

The wpsnippets_add_custom_field function adds a custom text input field to the product edit page in the WooCommerce admin area. The field is displayed within a div with the class options_group. The woocommerce_wp_text_input function is used to generate the input field with the specified attributes, such as ID, label, placeholder, description, etc.

Example 2: Saving custom field data for WooCommerce product

This use case demonstrates how to save the custom field data entered by the user for a WooCommerce product. The code example saves the custom field value as post meta.

function wpsnippets_save_custom_field( $post_id ) {
    $custom_field = isset( $_POST['custom_field'] ) ? sanitize_text_field( $_POST['custom_field'] ) : '';
    update_post_meta( $post_id, 'custom_field', $custom_field );
}
add_action( 'woocommerce_process_product_meta', 'wpsnippets_save_custom_field' );

The wpsnippets_save_custom_field function retrieves the value of the custom field from the $_POST superglobal, sanitizes it using sanitize_text_field, and then saves it as post meta using the update_post_meta function. The custom field value is associated with the product ID.

Example 3: Displaying custom field value on WooCommerce product page

This use case demonstrates how to display the value of a custom field on the WooCommerce product page. The code example retrieves the custom field value and displays it below the product title.

function wpsnippets_display_custom_field() {
    global $product;
    $custom_field = get_post_meta( $product->get_id(), 'custom_field', true );
    echo '<p>' . esc_html( $custom_field ) . '</p>';
}
add_action( 'woocommerce_single_product_summary', 'wpsnippets_display_custom_field', 6 );

The wpsnippets_display_custom_field function retrieves the value of the custom field using the get_post_meta function and the product ID. The value is then displayed within a paragraph tag using esc_html to sanitize the output. The function is hooked to the woocommerce_single_product_summary action with a priority of 6 to display the custom field below the product title.