Add custom fields to woocommerce product archive page with ajax support

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.!

Leave a Reply to Florencia Cancel reply

Your email address will not be published.

 

14 Comment(s)

  1. 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!

  2. Pingback: woocommerce – custom input field | Walter's blog

  3. Kishan October 26, 2016

    sorry..

    top of the code work when product add-to-cart with ajax???

  4. Kishan October 26, 2016

    below code work when product add-to-cart with ajax???

  5. Khanh March 8, 2016

    Thanks for tutorial. But I want to add admin field data to single product page. Is it possible?

  6. Pingback: Add custom fields to woocommerce product page

  7. 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!

    1. Saravana Kumar K August 25, 2015

      Glad, you got it solved.!

  8. 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

  9. 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();

  10. 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

    1. 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.

      1. 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