WooCommerce lets you add your own custom cart item data by using hooks provided by WooCommerce.
Here’s a step-by-step guide on how to add custom cart item data in WooCommerce:
1. Create a custom plugin or use your theme’s functions.php file
Create a custom plugin or use your theme’s functions.php file to add your custom code.
It’s recommended to use a custom plugin to ensure your modifications are not lost during theme updates. In my case, we have created a function.php file and we add all code inside it.
<?php /** * Plugin Name:WooCommerce Custom Cart Item Data * Description: How To Add Custom Cart Item Data in WooCommerce. * Plugin URI: https://webkul.com/ * Version: 1.0.0 * Author: Webkul * Author URI: https://webkul.com/ * Text Domain: webkul */
2. Add a custom field to the product page
Note that we are inserting our custom field using an action Woocommerce_before_add_to_cart_button.
As you can guess from its name, this action starts just before the ‘Add to Cart’ button is displayed on the product page.
/**
* Add a custom input field to the product page.
*/
function wk_add_text_field() { ?>
<div class="custom-field-wrap" style="margin: 10px;">
<label for="custom-field"><?php esc_html_e( 'Quote', 'webkul' ); ?></label>
<input type="text" name='custom-field' id='custom-field' value=''>
</div>
<?php
}
add_action( 'woocommerce_before_add_to_cart_button', 'wk_add_text_field' );
3. Validating the custom field data
Validating custom field data with the help of woocommerce_add_to_cart_validation filter.
/**
* Validate custom input field value
*/
function wk_add_to_cart_validation( $passed, $product_id, $quantity, $variation_id = null ) {
if ( empty( $_POST['custom-field'] ) ) {
$passed = false;
wc_add_notice( __( 'Quote is a required field.', 'webkul' ), 'error' );
}
return $passed;
}
add_filter( 'woocommerce_add_to_cart_validation', 'wk_add_to_cart_validation', 10, 4 );
4. Adding the custom field data in WooCommerce
We’re using another filter, Woocommerce_add_cart_item_data, to add custom cart item data.
/**
* Add custom cart item data
*/
function wk_add_cart_item_data( $cart_item_data, $product_id, $variation_id ) {
if ( isset( $_POST['custom-field'] ) ) {
$cart_item_data['pr_field'] = sanitize_text_field( $_POST['custom-field'] );
}
return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'wk_add_cart_item_data', 10, 3 );
5. Display the custom WooCommerce metadata in the cart
To display custom data in the cart with the help of the wocommerce_get_item_data filter.
/**
* Display custom item data in the cart
*/
function wk_get_item_data( $item_data, $cart_item_data ) {
if ( isset( $cart_item_data['pr_field'] ) ) {
$item_data[] = array(
'key' => __( 'Quote', 'webkul' ),
'value' => wc_clean( $cart_item_data['pr_field'] ),
);
}
return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'wk_get_item_data', 10, 2 );
6. Add the custom cart metadata to the WooCommerce order
We use an action called Woocommerce_checkout_create_order_line_item which allows us to update the line item when the order is saved.
/**
* Add custom meta to order
*/
function wk_checkout_create_order_line_item( $item, $cart_item_key, $values, $order ) {
if ( isset( $values['pr_field'] ) ) {
$item->add_meta_data(
__( 'Quote', 'webkul' ),
$values['pr_field'],
true
);
}
}
add_action( 'woocommerce_checkout_create_order_line_item', 'wk_checkout_create_order_line_item', 10, 4 );
Viewing custom metadata on the order review page
Viewing custom metadata in the order admin page
Support
Thank you for reading this dev article, for any technical assistance, please reach us by email at [email protected]
Kindly visit the WooCommerce Plugins page to add more features to your online store or get a Custom WordPress Theme for your store. Also, you may Hire WooCommerce Developers to work on your projects.
Have a Great Day Ahead!
See you in the next post. Keep reading 🙂
1 comments