How can I call a value from a Custom Text Field and dynamically place it in Form Attribute?

Question

I am working on a WordPress eCommerce website, where I am using the WooCommerce platform to power the Shopping features.

I have created a Custom Text Box, which appears on the Product Page. This text box allows site visitors to enter any text they would like to appear on their Product. To create this Custom Text Box, I have entered the following code into the functions.php file:

<div>
    <label class="product-custom-text-label" for="engrave_text"><?php _e( 'Engraving option:', 'woocommerce'); ?><br>
        <input style="min-width:220px" type="text" class="product-counter" name="engrave_text" placeholder="<?php _e( 'Enter Your Custom Letters ...', 'woocommerce'); ?>" minlength="2" maxlength="3" />
    </label>
</div>

As you can see, I have manually/statically entered the minlength="2" maxlength="3" attributes. Rather than having to manually enter said attributes, I want to dynamically call the values from a Custom Field, within the WooCommerce Product Dashboard.

WooCommerce Product Dashboard: Custom Field

To create the Custom Field, within the WooCommerce Product Dashboard, I entered the below code into the functions.php file:

function product_custom_lettering(){

    echo '<div class="product_custom_field">';    

    woocommerce_wp_text_input(
        array(
            'id'        => '_minimum_engrave_text_option',
            'desc'      =>  __('set custom minimum Lettering text field', 'woocommerce'),
            'label'     => __('Minimum Letters', 'woocommerce'),
            'desc_tip'  => 'true'
        )
    );

    echo '</div>';
    }

add_action('woocommerce_product_options_general_product_data', 'product_custom_lettering');

Is anyone aware of how this can be achieved?

Elvin Haci Elvin Haci · Accepted Answer · 2017-11-24T18:21:56

This function has custom_attributes parameter which can pass the parameters you need. I have added "name" attribute to your function:

function product_custom_lettering(){

    echo '<div class="product_custom_field">';    

    woocommerce_wp_text_input(
        array(
            'id'        => '_minimum_engrave_text_option',
            'name'        => '_minimum_engrave_text_option',
            'desc'      =>  __('set custom minimum Lettering text field', 'woocommerce'),
            'label'     => __('Minimum Letters', 'woocommerce'),
            'desc_tip'  => 'true'
        )
    );

    echo '</div>';
    }

add_action('woocommerce_product_options_general_product_data', 'product_custom_lettering');

Next we need to add save custom field function which it seems you haven't added:

add_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );
function woocommerce_product_custom_fields_save($post_id)
{
    $woocommerce_custom_product_text_field = $_POST['_minimum_engrave_text_option'];
    if (!empty($woocommerce_custom_product_text_field))
        update_post_meta($post_id, '_minimum_engrave_text_option', esc_attr($woocommerce_custom_product_text_field));
}

So, now we already have a custom field which can be set via wp-admin.

Last we need to call it in custom code:

<div>
    <label class="product-custom-text-label" for="engrave_text"><?php _e( 'Engraving option:', 'woocommerce'); ?><br>
        <input style="min-width:220px" type="text" class="product-counter" name="engrave_text" placeholder="<?php _e( 'Enter Your Custom Letters ...', 'woocommerce'); ?>" minlength="<?php global $post; echo get_post_meta($post->ID,'_minimum_engrave_text_option',true);?>" maxlength="3" />
    </label>
</div>

How can I call a value from a Custom Text Field and dynamically place it in Form Attribute?

1 Answers