If you ever wanted to get any additional information from customer while adding product to cart, it is easy in woocommerce, by using appropriate hooks you can achieve that, I have an in depth article about adding custom product fields.
However my previous article is for adding custom product fields on product detail page and also won’t work with woocommerce ajax add to cart action. so i decided to write another article for adding custom product fields to the Product Archive page with Ajax add to cart support.
Note :
This is not a complete article, the given snippets are used to add custom fields to product archive page with Ajax support, besides you need the following hooks and methods from my previous article
save_name_on_tshirt_field(), render_meta_on_cart_item(), render_meta_on_checkout_order_review_item(), tshirt_order_meta_handler(), tshirt_force_individual_cart_items()
Add the following snippet to the functions.php, which will add custom fields to all the products that has been currently displayed.
function add_custom_fields_on_product_listing() {
global $product;
echo '<div class="sark-custom-fields-wrapper"><label> Name On T Shirt</label>
<input type="text" id="name-on-tshirt-'. $product->id .'" value="" /></div>';
}
add_action( "woocommerce_after_shop_loop_item", 'add_custom_fields_on_product_listing', 1 );
Add the following snippet to the functions.php
function inject_custom_field_script() { ?>
<script type="text/javascript">
jQuery(document).on("adding_to_cart", function( e, btn, data ){
data["name-on-tshirt"] = jQuery("#name-on-tshirt-" + btn.attr( "data-product_id" )).val();
return true;
});
</script>
<?php }
add_action( "woocommerce_after_main_content", 'inject_custom_field_script', 1 );
The above snippet add a small js script, which in turn insert our custom fields with existing woocommerce ajax form data.
This is the default woocommerce Ajax form data
{
action : 'woocommerce_add_to_cart',
product_id : 1001,
quantity : 1
}
Our custom inserted js script will inject our custom fields like this.
{
action : 'woocommerce_add_to_cart',
product_id : 1001,
quantity : 1,
name-on-tshirt : 'Test Name'
}
Happy blogging.!
Denkzettel March 22, 2018
Thanks for the post, realy helpful.
Is it possible to make this field editable in the cart page?
Many thanks in advanced!
Pingback: woocommerce – custom input field | Walter's blog
Kishan October 26, 2016
sorry..
top of the code work when product add-to-cart with ajax???
Kishan October 26, 2016
below code work when product add-to-cart with ajax???
Khanh March 8, 2016
Thanks for tutorial. But I want to add admin field data to single product page. Is it possible?
Saravana Kumar K March 8, 2016
Yep, try this plugin
Pingback: Add custom fields to woocommerce product page
Sebastian August 25, 2015
Hi again,
ok, i got it!
The solution was quit simple, in my template files the hook woocommerce_after_main_content hook was missing.
Thanks again for your great post!
Saravana Kumar K August 25, 2015
Glad, you got it solved.!
Sebastian August 25, 2015
Hi,
thank you so much for the great tutorial.
I have a problem with displaying the products on a page via shortcode like [product_category category=“metals“ orderby=”title” order=”asc” per_page=”-1″]. It seems that the value from the custom product field istn’t save, because on the cart or checkout page the field “Name On T-Shirt” is empty.
On the shop page everything work fine with ajax add to cart action and the value from the custom product field is correct on cart and checkout page.
Any idea how it could work on pages?
Many thanks in advance.
Best Regards,
Sebastian
Florencia July 14, 2015
The code I insert is:
$site = new WP_Query(‘post_type=product&orderby=title&order=ASC&posts_per_page=20’);
while ($site->have_posts()) : $site->the_post(); ?>
wc_get_template_part( ‘content’, ‘single-product’ );
endwhile
wp_reset_query();
Florencia July 13, 2015
Hi this is a great post and wc field factory is an amazing plugin.
But I can’t get to work a custom field input in archive.
I’m reading this article and this one https://sarkware.com/adding-custom-product-fields-to-woocommerce-without-using-plugins/ but it fails validation.
Could you please share how to make this work?
Thanks and great work again
Saravana Kumar K July 14, 2015
Hi,
Using WC Fields Factory you can’t add custom fields to product archive page.
Could you post those validations hooks here.
Florencia July 14, 2015
Hi, I tried and if in a custom page I insert a wp_query for products and then as content I insert
it appears the custom field and it works.
Sorry for my bad english