Ecommerce Shopify WordPress Discussion

Custom fields after product variation name in WooCommerce cart and checkout

I have two custom field in a specific product. I wanna add each custom field after each variation name in cart and checkout page. add_action('woocommerce_before_add_to_cart_button', 'action_before_add_to_cart_button', 20); function action_before_add_to_cart_button() { global $post, $product; if (is_product() && $post->ID == 19652) { ?> <div class="custom-fields"> <div> <input class="form-control alt" name="first_custom_name" type="text" placeholder="<?php esc_html_e('Name for First bottle'); ?>" required> </div> <div> <input class="form-control alt" type="text" name="sec_custom_name" placeholder="<?php esc_html_e('Name for Second bottle'); ?>"> </div> </div> <?php } } This is the custom field for the product page, but I have no clue how to extract the data from the custom field to the cart order line. I have seen somewhere to update the meta function, but since the data is input by customers, data is updated in meta. What if a different variation is chosen? Does it have the same data? I want to add different data for different variations. Is this possible?
The following code, will save your custom fields, displaying them in cart, checkout, orders and email notifications. // Utility function (your custom field settings) function get_custom_fields_data() { return array( 'first_custom_name' => esc_html__('Name for First bottle'), 'sec_custom_name' => esc_html__('Name for Second bottle'), ); } // Displaying custom input fields in single product add_action('woocommerce_before_add_to_cart_button', 'action_before_add_to_cart_button', 20); function action_before_add_to_cart_button() { global $post, $product; if ( is_product() && $post->ID == 19652 ) { echo '<div class="custom-fields">'; foreach ( get_custom_fields_data() as $field_key => $field_label ) { printf('<div><input class="form-control alt" name="%s" type="text" placeholder="%s" required> </div>', $field_key, $field_label ); } echo '</div>'; } } // Save custom fields as custom cart item data add_filter('woocommerce_add_cart_item_data', 'add_custom_cart_item_data', 20, 2 ); function add_custom_cart_item_data( $cart_item_data, $product_id ) { foreach ( get_custom_fields_data() as $field_key => $field_label ) { if ( isset($_POST[$field_key]) && ! empty($_POST[$field_key]) ) { $cart_item_data[$field_key] = sanitize_text_field($_POST[$field_key]); } } return $cart_item_data; } // Display custom fields in Cart and Checkout add_filter( 'woocommerce_get_item_data', 'display_custom_cart_item_data', 20, 2 ); function display_custom_cart_item_data( $cart_data, $cart_item ) { foreach ( get_custom_fields_data() as $field_key => $field_label ) { if( isset($cart_item[$field_key]) ) { $cart_data[] = array( 'key' => $field_label, 'value' => $cart_item[$field_key], ); } } return $cart_data; } // Save and display custom fields (custom order item metadata) add_action( 'woocommerce_checkout_create_order_line_item', 'save_order_item_custom_meta_data', 10, 4 ); function save_order_item_custom_meta_data( $item, $cart_item_key, $values, $order ) { foreach ( get_custom_fields_data() as $field_key => $field_label ) { if( isset($values[$field_key]) ) { $item->update_meta_data($field_key, $values[$field_key]); } } } // Add readable "meta key" label name replacement add_filter('woocommerce_order_item_display_meta_key', 'filter_wc_order_item_display_meta_key', 10, 3 ); function filter_wc_order_item_display_meta_key( $display_key, $meta, $item ) { if( $item->get_type() === 'line_item' ) { foreach ( get_custom_fields_data() as $field_key => $field_label ) { if( $meta->key === $field_key ) { $display_key = $field_label; } } } return $display_key; } Code goes in functions.php file of your child theme (or in a plugin). Tested and work.

February 4, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.