questions

Increase the displayed text size of a WooCommerce email custom field

Rate this post

I want to increase the text size of just the custom field in the HTML email. How can I do it using this code?

add_filter( 'woocommerce_email_order_meta_fields', 'custom_woocommerce_email_order_meta_fields', 10, 3 );
function custom_woocommerce_email_order_meta_fields($fields, $sent_to_admin, $order) {
    $fields['name_460'] = array(
        'label' => __( 'Customer Notes' ),
        'value' => get_post_meta( $order->id, 'name_460', true ),
    );
    return $fields;
}

 

✔️Solution:

To increase the text size of your custom field value on WooCommerce email notifications, you can use the following instead:

add_filter( 'woocommerce_email_order_meta_fields', 'filter_wc_email_order_meta_fields', 10, 3 );
function filter_wc_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $size = 20; // Set here the text size in pixels (px)
    
    $fields['name_460'] = array(
        'label' => __( 'Customer Notes' ),
        'value' => '<span style="font-size:'.$size.'px;">' . $order->get_meta('name_460') . '</span>',
    );
    return $fields;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.


If you need to increase also the label text replace the line:

'label' => __( 'Customer Notes' ),

with:

'label' => '<span style="font-size:'.$size.'px;">' . __( 'Customer Notes' ) . '</span>',

You can also use instead the following way, with a different hook:

add_filter( 'woocommerce_email_order_meta', 'action_wc_email_order_meta', 20, 4 );
function action_wc_email_order_meta( $order, $sent_to_admin, $plain_text, $email ) {
    $size  = 20; // Set here the text size in pixels (px)
    $label = __('Customer Notes', 'woocommerce'); // Define the label text
    $value = $order->get_meta('name_460'); // Get custom field value
    
    echo '<p style="font-size:'.$size.'px;"><strong>' . $label . ':</strong> ' . $value . '</p>';
}

Leave a Reply

Your email address will not be published.

Back to top button