WC Fields Factory API

Here we are going to look how WC Fields Factory render custom fields on product page and how we can customize those rendering behavior through various actions & filters.

Before WCFF V2.0.0 hooks are ( wccpf/before/fields/start, wccpf/before/fields/start, wccpf/after/fields/end, wccpf/after/field/end, wccpf/before/field/rendering, wccpf/after/field/rendering ) and after WCFF V2.0.0 (wccpf_before_fields_start, wccpf_before_fields_start, wccpf_after_fields_end, wccpf_after_field_end, wccpf_before_field_rendering, wccpf_after_field_rendering ).

Default rendering flow

 


<!-- 'wccpf_before_fields_start' will be triggered here -->

<!-- 'wccpf_before_field_start' will be triggered here -->

<table class="wccpf_fields_table <!-- 'wccpf_fields_container_class' -->" cellspacing="0">
	<tbody>
		<tr>
			<td class="wccpf_label"><label for=""></label></td>
			<td class="wccpf_value">
				<input type="text" class="wccpf-field" name="" value="" placeholder="" maxlength="" />
			</td>
		</tr>
	</tbody>
</table>

<!-- 'wccpf_after_field_end' will be triggered here -->

// Next field is here, and .....

<!-- 'wccpf_after_fields_end' will be triggered here -->

Both wccpf_before_fields_start and wccpf_after_fields_end actions will be triggered before the start of custom field rendering and after all the custom fields rendered. So you you can use these actions to wrap all your custom fields with some container.

add_action( 'wccpf_before_fields_start', 'wccpf_wrapper_start' );
function wccpf_wrapper_start() {
	/* Wrapper element start */
	echo '<div class="your-custom-wrapper-class">';
}

add_action( 'wccpf_after_fields_end', 'wccpf_wrapper_end' );
function wccpf_wrapper_end() {
	/* Wrapper element end */
	echo '</div>';
}

Both wccpf_before_field_start and wccpf_after_field_end action will be triggered respectively before and after each custom field. So you can use these actions to add anything around each custom fields individually. you could add any additional messages, labels or add some additional wrapper too.

add_action( 'wccpf_before_field_start', 'wccpf_field_wrapper_start' );
function wccpf_field_wrapper_start( $field ) {
	/* Individual wrapper element start */
	echo '<div class="your-custom-field-wrapper-class">';
	/* You can even test for any specific field and add your own elements elements accordingly  */
	if( $field["type"] == "file" ) {
		echo '<h5>Please upload images with size of less than 1MB</h5>';
	}
}

add_action( 'wccpf_after_field_end', 'wccpf_field_wrapper_end' );
function wccpf_field_wrapper_end(  $field ) {
	/* Individual wrapper element end */
	echo '</div>';
}

Custom rendering flow

By default WC Fields Factory render each custom fields with table element as a wrapper ( as shown above ). For some reason if you want to override this behavior you do so by using wccpf_before_field_rendering and wccpf_after_field_rendering actions.

By registering handlers for these two actions, you are changing the rendering flow like this. ( both actions should have hooked )

<!-- 'wccpf_before_fields_start' will be triggered here -->

<!-- 'wccpf_before_field_start' will be triggered here -->

<!-- 'wccpf_before_field_rendering will be triggered here -->

	<input type="text" class="wccpf-field" name="" value="" placeholder="" maxlength="" />

<!-- 'wccpf_after_field_rendering' will be triggered here -->

<!-- 'wccpf_after_field_end' will be triggered here -->

// Next field is here, and .....

<!-- 'wccpf_after_fields_end' will be triggered here -->
add_action( 'wccpf_before_field_rendering', 'wccpf_field_custom_render_start' );
function wccpf_field_custom_render_start( $field ) { ?>	
	<div class="your-individual-custom-field-wrapper-class">
	<label><?php echo $field["label"]; ?></label>
	<?php 
}

add_action( 'wccpf_after_field_rendering', 'wccpf_field_custom_render_end' );
function wccpf_field_custom_render_end(  $field ) { ?>
	</div>
	<?php 
}

Leave a Reply to Saravana Kumar K Cancel reply

Your email address will not be published.

 

33 Comment(s)

  1. Tamás November 7, 2021

    I would like to use “file”. But when i will try upload my photo (jpg) i cant put the product in the cart.

  2. Mike Heffner March 20, 2018

    Hello, Please help.

    I have a select field that I am using for shirt sizes. I have not selected “Default Option” and I have selected “Required”. However, it is defaulting to the first option in my select list. This is problematic as I want to force the customer to select the shirt size.

    Can you tell me how to force the customer to select the shirt size?

    Thanks,
    Mike Heffner

    For your reference the following is my select list:

    ws|Womanʼs Small
    wm|Womanʼs Medium
    wl|Womanʼs Large
    wxl|Womanʼs Extra Large
    w2xl|Womanʼs Double Extra Large
    ms|Manʼs Small
    ms|Manʼs Medium
    ml|Manʼs Large
    mxl|Manʼs Extra Large
    m2xl|Manʼs Double Extra Large

    1. Mike Heffner March 21, 2018

      Oops. Looks like I entered this in the wrong place. I will re-enter in the support forum.

    2. Saravana Kumar K March 21, 2018

      Put placeholder on the select field and go to fields factory setting select Yes on the Client Side Validation.

  3. Mike Heffner March 8, 2018

    Hello, I would like to modify the rendering on my site. I am using the code below just to test the hooks, but it is not working. This code works if I use different hooks in the theme, but not with your plugin. Can you offer any clues what I might be doing wrong?

    add_action( ‘wccpf/before/fields/start’ , ‘add_promotional_text_before’ );
    function add_promotional_text_before() {
    echo “Lets go golfing!!!”;
    }

    add_action( ‘wccpf/after/fields/end’ , ‘add_promotional_text_after’ );
    function add_promotional_text_after() {
    echo “Done golfing!!!”;
    }

    Thanks in advance for any help,
    Mike Heffner

    1. Mike Heffner March 8, 2018

      You can ignore my request for assistance. After studying your code I figured out that the correct name for the hook is wccpf_before_fields_start and not with the “/” as shown in the documentation.

      Thanks for an excellent plugin.
      Mike Heffner

      1. Saravana Kumar K March 13, 2018

        Hi Mike Heffner,
        Thankyou for mention it. We will correct it on our blog.
        And also before WCFF V2.0.0 it was be ‘wccpf/before/field/rendering’,
        After WCFF V2.0.0 we changed ‘wccpf_before_fields_start’.

    2. Saravana Kumar K March 15, 2018

      Hi Mike Heffner,

      Sorry for the miss communication after version 2.0.0 we are change hook name like wccpf_before_fields_start

      Please refer this url https://sarkware.com/wc-fields-factory-api/

      Please rate and review our plugin.

      Thanks

  4. Hemant November 27, 2017

    I have a text area for comments on product page, i want to show this comment on cart and email. Currently it sometime show and sometime not. I have other product attributes on the product as well (not from wc field factory). How to make sure if any content is added, it show on email and cart?

    1. Saravana Kumar K December 6, 2017

      Hi, have you updated to latest version, are you still having this issue.?

  5. Steven Mitchell November 10, 2017

    Hey – I’m looking to full data from one of my fields (in this instance) named first_line_of_address and want to place this data from the completed Subscription (i’m using woocommerce subscriptions) into the my-subscriptions page) so i’d have Subcription ID, First Line address, Next Due etc etc.

    How would i go about doing this?

    Thanks,
    Steven

    1. Saravana Kumar K November 21, 2017

      I don’t have much experience with Woocommerce Subscription, the subscription ID has to be a post id (in this case WC order ID).

      so you can do something like this

      /* Fetch the order object */
      $order = wc_get_order( $subscription_id );
      /* Fetch the line tems */
      $items = $order->get_items();
      /* Loop through order items */
      foreach ( $items as $item_id => $item_data ) {
      	if(isset($item_data["first_line_of_address"])) {
      	/* Do whatever you want with this */
      	}
      }
      
  6. bamabacho November 8, 2017

    How can I get the value of a field after add to cart to use elsewhere in my code? I want to be able to add a recipient (of a gift card) email address and then end out an additional email, but I need the value of the field I created. Thank

    1. Saravana Kumar K November 8, 2017

      function custom_add_to_cart_action_handler($_cart_item_data, $_product_id) {
          if(isset($_cart_item_data["wccpf_your_custom_field_name"])) {
              $value = $_cart_item_data["wccpf_your_custom_field_name"];
              /* Do your stuff with that user submitted value */
          }
      }
      add_filter('woocommerce_add_cart_item_data', array( $this, 'custom_add_to_cart_action_handler' ), 100, 2);	
      

      The above solution will only works <= V 1.4.0 Note : my next release (V2.0.0) will have some major changes, I will keep updating.

  7. Xitrec September 12, 2017

    Hi,
    How to set the value of a field via GET or POST?

  8. Brian August 2, 2017

    Great plugin and It looks great on our product page. I am building a site for a high school fundraiser and trying to keep it very simple. I would like the custom fields to display on the excerpt (custom list of products using the wp-types woocomerce-views plugin). Is there a code or short code I can use to display the custom fields within my custom layout?

    Thanks,
    Brian

  9. Krzysztof Michalski July 31, 2017

    Hi,

    https://lart.com.pl/produkt/pierwsza-testowa/

    I used WC Field Factory and used it like a calculator (width x height + third_field).
    I just want to add a actual price for any place after Custom Fields when i change a value of fields

    price = price * (width * height / 10000) + ((width / 100) * third_field).

    I use this code and price is good in cart:

    function calculate_gift_wrap_fee( $cart_object ) {
    if( !WC()->session->__isset( “reload_checkout” )) {
    foreach ( $cart_object->cart_contents as $key => $value ) {
    $orgPrice = floatval( $value[‘data’]->get_price() );
    if($value[ “wccpf_obszycie_4_z_za_metr” ] == “tak”){
    $value[‘data’]->set_price( ($orgPrice * $value[ “wccpf_szerokosc_w_cm” ] * $value[ “wccpf_wysokosc_w_cm” ] / 10000) + ($value[ “wccpf_szerokosc_w_cm” ] * 4 / 100) );
    } else{
    $value[‘data’]->set_price( ($orgPrice * $value[ “wccpf_szerokosc_w_cm” ] * $value[ “wccpf_wysokosc_w_cm” ] / 10000) );
    }
    }
    }
    }
    add_action( ‘woocommerce_before_calculate_totals’, ‘calculate_gift_wrap_fee’, 99 );

    How can i do dynamic calculator of price on product page?

  10. Janki June 19, 2017

    I just want to add wc field factory backend section for all the vendors in dokan. How can I do this?

  11. Sergey March 31, 2017

    How to add user verification (user role) and hide fields (without display:none) by canceling the output completely?

  12. Sergey March 31, 2017

    After add code from example to file function.php (child theme legenda / 8theme)
    add_action( ‘wccpf/before/fields/start’, ‘wccpf_wrapper_start’ );
    …..
    on page content-single-page
    stuck without error in the script (console).
    This is visible because it is impossible to select a variation of the product or add it to the basket … The whole page becomes in the “row product-info” element does not react to clicks. Also the tab section with the description of the goods does not work.

  13. Khoemanh March 11, 2017

    hi
    How to specific which field to be cloned only ?
    There is field I want to be cloned, but there is field I don’t want to be cloned, how to do this ?

    1. Saravana Kumar K March 15, 2017

      This is on our road map already, we will try to release it ASAP

  14. Raf January 16, 2017

    Hii

    Is there a way to populate a Select, for example, with custom information of products?

    Thanks
    Raf

  15. Jim January 8, 2017

    How do I access the WC Field value on woocommerce complete action?

  16. Martin November 8, 2016

    Hi Saravana, many thanks for your useful plugin.

    I use your plugin to create custom fields groups which show fine on a single product page but when trying to use the ‘Composite Products’ plugin the fields do not display?

    Another question – I have Fields Cloning turned on and when the custom fields are displayed in the cart/checkout they appear grouped in field groups rather than listed in order how they were completed per product.

    Hope this makes sense.

    Any help would be greatly appreciated 🙂

  17. hemant August 7, 2016

    drop down field is not woking. please tell me step for dropdown

  18. erich lehna June 10, 2016

    the fields geting proper rendered in a div layout at the product page. only the value is not getting into the system. if i delete the snippet from the function.php the fields appearing into a table layout and the values getting into the system.

  19. erich lehna June 10, 2016

    hey, thanx for the fast reply.
    i did. only this comment field was cutting out the code lines. i used your sniped from the “Custom rendering flow” chapter, the second field, exactly how its written there.

  20. erich lehna June 10, 2016

    Hey, First thanx vor this gerat plugin.

    i have a problem. if i use your following code in the function.php to change the rendering into the custom fields don’t appear anymore at the product cart. without the snippet all is fine.
    what i have to do to see the custom fields in the product cart?

    add_action( 'wccpf/before/field/rendering', 'wccpf_field_custom_render_start' );
    function wccpf_field_custom_render_start( $field ) { ?>    
        
        <?php
    }
    
    1. Saravana Kumar K June 10, 2016

      Hi, you need to implement both action ( before & after ) in order to work properly. So add the following snippets on your functions.php.

      add_action( 'wccpf/before/field/rendering', 'wccpf_field_custom_render_start' );
      function wccpf_field_custom_render_start( $field ) { ?>
       
          <?php 
      }
       
      add_action( 'wccpf/after/field/rendering', 'wccpf_field_custom_render_end' );
      function wccpf_field_custom_render_end(  $field ) { ?>
          
          <?php 
      }
      
  21. christine gibbons March 31, 2016

    Hi I have set the admin fields up in my create a product page but how do I get them to show on the actual product. Thank you

    1. Saravana Kumar K April 1, 2016

      HI this feature is under progress, probably released with my next release.

      mean time you can try the below snippet to do it by yourself, put it your functions.php

      function inject_wccaf_admin_field() {
          global $post;
          $all_fields = apply_filters( 'wcff/load/all_fields', $post->ID, 'wccaf', "any" );
          if( count( $all_fields ) > 0 ) {
              foreach ( $all_fields as $fields ) {
                  if( count( $fields ) > 0 ) {
                      foreach ( $fields as $key => $field ) {
                          $mval = "";
                          $mval = get_post_meta( $post->ID, "wccaf_". $field["name"], true );
                          if( !$mval ) {
                              if( isset( $field["default_value"] ) && $field["type"] != "radio" && $field["type"] != "select" ) {
                                  $mval = $field["default_value"];
                              } else {
                                  $mval = "";
                              }
                          }
                          $field["value"] = $mval;
                          $field["location"] = "product-page";
                          echo apply_filters( 'wcff/render/admin/field/type='.$field["type"], $field );
                      }
                  }
              }
          }
      }
      add_action( 'woocommerce_before_add_to_cart_button', "inject_wccaf_admin_field" );
      
  22. Pingback: WC Fields Factory - a wordpress plugin to add custom fields to woocommerce product page - Sarkware