Customizing WooCommerce Product Custom Fields in WordPress

Customizing WooCommerce Product Custom Fields in WordPress

You may want to customize the WooCommerce product request page fields in the WordPress site, and this is certainly not difficult at all. You may want to add the cities field with an optional list or an additional information field such as date of birth, ID number, or text field, all of which are for example but not limited to, and for this purpose you can take advantage of The following explanation.

Customizing the Fields of the Product Request Page and WaCommerce and WordPress Using the Extension:

اضافة WooCommerce Checkout & Account Field Editor

Help you add, edit, delete and rearrange custom fields on the WooCommerce order page and registration page.

Features of this add-on in its free version:

  • Add/Edit/Delete fields of a product order page for Wacomers
  • Option to add label and placeholder in each field
  • Reorder fields or change or rearrange fields on the order page at Wacomers.
  • Add custom fields in the Additional fields section.
  • View fields on orders page and emails
  • Activate / deactivate the fields of the product request page, Wacomers and the account
  • Reset exit fields to default option.
  • Reorder fields, change the order or rearrange the order of fields on the WooCommerce registration page

All you have to do is go to the WordPress dashboard, then click on Plugins , Add New , and search for this plugin.

Customizing the Fields of the Product Request Page and WaCommerce and WordPress Using the Extension:

After installing the previous add-on, you can now create the custom fields you want. As in the order and as shown in the picture

  1. field type,
  2. Field name (type the name in English and unique)
  3. The name of the representative or the definition of the field that will be shown to the user
  4. Options, put a comma immediately after the option and a space after the comma each time
  5. Choose field width (for format)
  6. add field
  7. Also, save all changes
Custom fields for adding WooCommerce and WordPress

Add Checkout Field Editor for WooCommerce

If you are wondering how to customize the WooCommerce product and account order page fields, this plugin fulfills your request as well as before

Add Checkout Field Editor for WooCommerce

Free features of this add-on:

  • Add new custom field(s).
  • Edit fields.
  • View on order details page and email.
  • remove fields.
  • Enable / disable the domain (fields).
  • Change the order of the fields of the order page.
  • Reset to the default field set.
  • The available field types are
  1. short text
  2. password
  3. E-mail
  4. Phone
  5. to set
  6. long text
  7. horizontal selection

As in the previous add-on, go to the add-on settings after installing it and work on adding custom fields

Customizing the WooCommerce product and account request page fields in WordPress with the code

Now, Wowcommerce also provides you with the service of modifying fields, deleting and canceling, as well as adding the new field to the product order page. We will now try to present the idea of ​​adding fields through codes, knowing that these codes are pasted into the functions.php file, whether in the template if you are the one who is developing Or in the functions.php in the child template, and the goal is not to lose these fields when adding a new update to the template in case you are using a ready-made template:

Add a text custom private field

 * Add the field to the checkout<font></font>
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );<font></font>
function my_custom_checkout_field( $checkout ) {<font></font>
    echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';<font></font>
    woocommerce_form_field( 'my_field_name', array(<font></font>
        'type'          => 'text',<font></font>
        'class'         => array('my-field-class form-row-wide'),<font></font>
        'label'         => __('Fill in this field'),<font></font>
        'placeholder'   => __('Enter something'),<font></font>
        ), $checkout->get_value( 'my_field_name' ));<font></font>
    echo '</div>';<font></font>

Next, we need to validate the field when posting the application form. In this example if the field is required and not optional:

 * Process the checkout<font></font>
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');<font></font>
function my_custom_checkout_field_process() {<font></font>
    // Check if set, if its not set add an error.<font></font>
    if ( ! $_POST['my_field_name'] )<font></font>
        wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );<font></font>

Finally, let’s save the new field to order custom fields with the following code:

 * Update the order meta with field value<font></font>
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );<font></font>
function my_custom_checkout_field_update_order_meta( $order_id ) {<font></font>
    if ( ! empty( $_POST['my_field_name'] ) ) {<font></font>
        update_post_meta( $order_id, 'My Field', sanitize_text_field( $_POST['my_field_name'] ) );<font></font>

The field is now saved in the request.

If you want to display the value of the custom field on the order release page in WooCommerce, you can add this code:

 * Display field value on the order edit page<font></font>
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );<font></font>
function my_custom_checkout_field_display_admin_order_meta($order){<font></font>
    echo '<p><strong>'.__('My Field').':</strong> ' . get_post_meta( $order->id, 'My Field', true ) . '</p>';<font></font>
field 2

Now this lesson is over to customize the WooCommerce product and account request page fields in WordPress. If you still have any question, you can leave it in the comments below