The code snippet below demonstrates how to integrate WP Forms with WooCommerce in WordPress. This integration allows you to use WP Forms to create custom forms for your WooCommerce store, such as contact forms, order forms, or feedback forms.
/**
* Add custom fields to the WooCommerce checkout form.
*/
function wpsnippets_add_custom_fields_to_checkout( $checkout ) {
// Add a custom text field
woocommerce_form_field( 'custom_field', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Custom Field'),
'placeholder' => __('Enter something'),
'required' => true,
), $checkout->get_value( 'custom_field' ));
// Add a custom checkbox field
woocommerce_form_field( 'custom_checkbox', array(
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'label' => __('Custom Checkbox'),
'required' => false,
), $checkout->get_value( 'custom_checkbox' ));
}
add_action( 'woocommerce_after_order_notes', 'wpsnippets_add_custom_fields_to_checkout' );
/**
* Save custom fields data to the order meta.
*/
function wpsnippets_save_custom_fields_to_order_meta( $order_id ) {
if ( ! empty( $_POST['custom_field'] ) ) {
update_post_meta( $order_id, 'Custom Field', sanitize_text_field( $_POST['custom_field'] ) );
}
if ( ! empty( $_POST['custom_checkbox'] ) ) {
update_post_meta( $order_id, 'Custom Checkbox', 'Yes' );
}
}
add_action( 'woocommerce_checkout_update_order_meta', 'wpsnippets_save_custom_fields_to_order_meta' );
This code snippet adds custom fields to the WooCommerce checkout form using the woocommerce_form_field function. It adds a text field with the name custom_field and a checkbox field with the name custom_checkbox. The woocommerce_after_order_notes action hook is used to display these fields on the checkout page.
The second part of the code snippet saves the custom field data to the order meta using the woocommerce_checkout_update_order_meta action hook. The update_post_meta function is used to save the values of the custom fields to the order.
This integration can be useful when you need to collect additional information from customers during the checkout process, such as special instructions or custom requirements.
Examples
Example 1: Adding WooCommerce Product Field to WP Forms
This use case demonstrates how to integrate WooCommerce with WP Forms by adding a custom product field to a form. The code example below adds a product field to a WP Form, allowing users to select a product from the WooCommerce store.
function wpsnippets_add_woocommerce_product_field( $fields, $form_id ) {
if ( $form_id == 1 ) {
$fields['product'] = array(
'label' => 'Product',
'type' => 'select',
'options' => wpsnippets_get_woocommerce_products(),
);
}
return $fields;
}
add_filter( 'wpforms_fields', 'wpsnippets_add_woocommerce_product_field', 10, 2 );
function wpsnippets_get_woocommerce_products() {
$products = array();
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$products[get_the_ID()] = get_the_title();
}
}
wp_reset_postdata();
return $products;
}
The wpsnippets_add_woocommerce_product_field function adds a custom product field to a specific WP Form by modifying the form fields array. The wpsnippets_get_woocommerce_products function retrieves all WooCommerce products and returns them as an array of options for the product field.
Example 2: Displaying WooCommerce Product Details in Form Submission
This use case demonstrates how to display WooCommerce product details in the form submission email or entry. The code example below retrieves the selected product from the form submission and displays its details, such as title, price, and image.
function wpsnippets_display_woocommerce_product_details( $fields, $entry ) {
$product_id = $entry['fields']['product']['value'];
$product = wc_get_product( $product_id );
if ( $product ) {
$fields['product_details'] = array(
'label' => 'Product Details',
'value' => sprintf( '<strong>%s</strong><br>Price: %s<br>%s', $product->get_title(), $product->get_price_html(), $product->get_image() ),
);
}
return $fields;
}
add_filter( 'wpforms_entry_fields', 'wpsnippets_display_woocommerce_product_details', 10, 2 );
The wpsnippets_display_woocommerce_product_details function retrieves the selected product ID from the form submission and uses the wc_get_product function to get the product object. It then adds a custom field to the form submission with the product details, including title, price, and image.
Example 3: Updating WooCommerce Product Stock on Form Submission
This use case demonstrates how to update the stock quantity of a WooCommerce product when a form is submitted. The code example below retrieves the selected product from the form submission and updates its stock quantity based on a field value provided by the user.
function wpsnippets_update_woocommerce_product_stock( $fields, $entry ) {
$product_id = $entry['fields']['product']['value'];
$product = wc_get_product( $product_id );
if ( $product ) {
$stock_field_value = $entry['fields']['stock']['value'];
$new_stock_quantity = $product->get_stock_quantity() - intval( $stock_field_value );
$product->set_stock_quantity( $new_stock_quantity );
$product->save();
}
return $fields;
}
add_filter( 'wpforms_process_entry', 'wpsnippets_update_woocommerce_product_stock', 10, 2 );
The wpsnippets_update_woocommerce_product_stock function retrieves the selected product ID from the form submission and uses the wc_get_product function to get the product object. It then retrieves the stock field value from the form submission and calculates the new stock quantity. Finally, it updates the product’s stock quantity and saves the changes.