19 Nov

2015

WC Fields Factory API

November 19, 2015 Saravana Kumar K 33 Comment(s)

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 
}

Author

Saravana Kumar K

Saravana Kumar K ( sark ) manages sarkware.com, also a freelancer who have solid background in developing Themes and Plugins for Wordpress and Shopify Platforms. You can find more about him at IamSark.com

33 Comment(s)

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.

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:

Mike Heffner March 21, 2018

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

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.

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

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

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

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

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?

Saravana Kumar K December 6, 2017

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

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

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 */
	}
}

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

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.

Xitrec September 12, 2017

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

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

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:

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

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?

Sergey March 31, 2017

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

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.

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 ?

Saravana Kumar K March 15, 2017

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

Raf January 16, 2017

Hii

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

Thanks
Raf

Jim January 8, 2017

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

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 🙂

hemant August 7, 2016

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

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.

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.

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
}

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 
}

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

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" );

Pingback: WC Fields Factory - a wordpress plugin to add custom fields to woocommerce product page - Sarkware

Default rendering flow

Custom rendering flow

Author

Saravana Kumar K

Leave a Reply Cancel reply

33 Comment(s)