Add Advanced Custom Fields to WooCommerce Product Variation

Question

I am using plugins called Advanced Custom Fields (ACF) and WooCommerce. I want to create a text and image field for WooCommerce product variation. I created fields in ACF and assigned them to "Post Type" > "product_variation".

But for I don't see these fields under product > Variations. I searched and it looks like I have to write a custom code to accommodate these fields. I tried searching the problem and most of the suggestions and tutorials I founds are about creating custom fields via code and not using ACF which is not helping me as the fields have to be using ACF and that is because I am using Visual Composer to pull these ACF fields on front end.

Answer 1

It's not acf but you just have to add some code to your "function.php" of your child theme under /public_html/wp-content/themes/yourtheme-child/function.php.

Please have a look to this tutorial http://www.remicorson.com/mastering-woocommerce-products-custom-fields/

For instance, in my code I've added 2 fields for the RRP and another one for personal use (Price per Pair):

        /* Adds RRP or PPP* price after each product price throughout the shop for user != Customer & Guest
    .Not displayed in cart as it's not per var and we don't need to.
    PPP = Price Per Pair (for product composite/bundle display)
    ================================================== */

// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    // Text Field creation
woocommerce_wp_text_input( 
    array( 
        'id'          => '_rrpprice', 
        'label'       => __( 'RRP price ($)', 'woocommerce' ), 
        'placeholder' => 'e.g. 499',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the RRP .', 'woocommerce' )
    )
);
woocommerce_wp_text_input( 
    array(  
        'id'          => '_pppprice', 
        'label'       => __( 'Price Per Pair*', 'woocommerce' ),
        'placeholder' => 'e.g. 122',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the PPP (Price Per Pair) if Bundle/composite .', 'woocommerce' ) 
    )
);  
}
function woo_add_custom_general_fields_save( $post_id ){

    // TextField save
    $woocommerce_rrpprice = $_POST['_rrpprice'];
    update_post_meta( $post_id, '_rrpprice', esc_html( $woocommerce_rrpprice ) );
    if( !empty( $woocommerce_rrpprice ) )

    // TextField save
    $woocommerce_pppprice = $_POST['_pppprice'];
    if( !empty( $woocommerce_pppprice ) )
    update_post_meta( $post_id, '_pppprice', esc_html( $woocommerce_pppprice ) );
}

// Display Custom Field Value

if ( is_user_logged_in() && !(current_user_can('customer'))) {
    function sv_change_product_price_display( $price ) {
        $product = wc_get_product( get_the_ID() );
        $priceRRP = get_post_meta( get_the_ID(), '_rrpprice', true );
        $pricePPP = get_post_meta( get_the_ID(), '_pppprice', true );
          if ( (is_shop() || is_product()) && !is_cart() ) { //double belt check
            if($product->is_type( 'variable' )){
                $price .= ' + GST<br /><span class="rrp-price">RRP: $' . $priceRRP .'</span>';
            }else{

                $price = ' <span class="rrp-price"><b>$' . $pricePPP .' + GST </b></span>' . '<br /><span class="rrp-price">RRP: $' . $priceRRP .'</span>';
            }
          }
        return $price;          
    }
    add_filter( 'woocommerce_get_price_html', 'sv_change_product_price_display' );
    add_filter( 'woocommerce_cart_item_price', 'sv_change_product_price_display' );
}

If you have any question please feel free to ask.

Answer 2

As far as I know the Advanced Custom Fields plugin only allows you to add custom fields for editors. These fields cannot be used to build the front-end except by putting hands in the code.

If you want to add custom fields for your products (so the customers can do some personalization), you have to use another plugin. I personally use WC Fields Factory, it let you define additional data for your products, like size, color, image, etc. Just use the new Field Factory menu.

Of course there should be other ones I haven't tried.

Answer 3

I faced this problem myself and given how frequently WooCommerce changes I was hesitant to shim some extra fields in with code. I did figure out a minimal code workaround which may or may not fit your needs. Essentially it's "proxying" the variation's custom fields in a regular post and accessing those fields by putting that post ID in the product variation's SKU field.

I started by setting up a post category "custom-fields" - which I hide via a redirect to the similarly named product. I set up my custom fields for the post category: custom-fields and then I added a post e.g. "widget x red" and I input the custom fields for the red variation. Once the post saved I added the post ID to the product variation SKU field. Customizing the CSS I hid the SKU field and editing the child theme woocommerce/single-product.php I added a little PHP to retrieve the custom fields.

$product = wc_get_product($post->ID);
$pv = new WC_Product_Variable($product->get_id());
$variations = $pv->get_available_variations();  
$custom_fields=[];
if(!empty($variations)){
    foreach($variations as $variation){
        $vid = $variation['variation_id'];
        $sku = $variation['sku'];
        if($vid && $sku){
            $fields = get_fields($sku);
            if($fields){
                $custom_fields[$vid] = $fields;
            }
        }
    }
}

After which I had the custom fields indexed by variation ID