Return to previous page

Advise on custom order field how to add them

This topic has 15 replies, 2 voices, and was last updated 3 months ago ago by Luca Rossi

  • Avatar: Family Care
    Family Care
    Participant
    January 8, 2025 at 21:04

    I want to create a custom field on my orders page in the admin side only like admin can add a delivery tracking code and when status of order is changed to shipped, it should pick that text in email builder.
    Might be its not your concern but I hope you are polite enough to advise how to achieve this using custom code or plugin which is free. Any idea or advice will be highly appreciated.

    #429926 Copied
    14 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    January 9, 2025 at 11:09

    Dear Abdul Moiz,

    We hope this message finds you well.

    To assist you further, we would like to recommend a couple of 3rd party plugins that may be helpful. Kindly take a look at the following options:

    – https://woocommerce.com/products/shipment-tracking/
    – https://wordpress.org/plugins/woo-orders-tracking/

    Should you have any questions or require additional support, please do not hesitate to reach out.

    Best regards,
    The 8Theme Team

    #429980 Copied
    Avatar: Family Care
    Family Care
    Participant
    January 9, 2025 at 14:14

    The second link helps a bit but what I want is to use their tracking info created on edit order admin page. Like I want that their tracking properties should be available in email builder.
    Not sure if you can help me with that? Using a hook or how, I don’t know.
    If you can help or have an idea please share.

    #430020 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    January 10, 2025 at 05:28

    Dear Abdul Moiz,

    We hope this message finds you well.

    We wanted to inform you that we have not yet reviewed the Orders Tracking for WooCommerce plugin. At your convenience, could you kindly take a look at the documentation? There might be a shortcode available that you can incorporate into the Email Builder.

    Thank you for your attention to this matter. Please feel free to reach out if you have any questions or require further assistance.

    Best regards,
    The 8Theme Team

    #430084 Copied
    Avatar: Family Care
    Family Care
    Participant
    January 10, 2025 at 09:15

    Thank you very much I understand sir.

    Well, we tried another plugin i.e. Advanced Shipment Tracking for WooCommerce and it looks better. The only thing is if we use completed email of xstore email builder, we don’t see any tracking info or widget in email which we can expect because that plugin is not formatting emails which we created in woocommerce.

    I talked to their support and they replied me below to add tracking code but honestly, we are not sure how to achieve this in xstore email builder. If you can guide a little bit, it will be great. We want that tracking info etc. to be sent using completed email.

    We include the tracking widget in the Completed Order Status email using the woocommerce_email_before_order_table action hook. You can access this hook in your XStore Email Builder to include tracking details like the tracking code in your customized emails.

    #430105 Copied
    Avatar: Family Care
    Family Care
    Participant
    January 10, 2025 at 10:37

    I have solved that hook issue and I am able to show the tracking info in the completed order in xstore theme builder using hook as shown in screenshot.

    Now, only issue is that we want that info to be center aligned but its left aligned. We didn’t find any way to place to add css in email builder to place it in center. screenshot how it looks in final email to customer. Please help with that.

    Files is visible for topic creator and
    support staff only.
    #430117 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    January 10, 2025 at 17:32

    Hi @Abdul Moiz,

    Where did you add the custom codes so we can take a closer look?

    Thank you!

    #430187 Copied
    Avatar: Family Care
    Family Care
    Participant
    January 10, 2025 at 18:16

    No more code then the screenshot I already shared.
    But I explain everything in this screen recording: https://monosnap.com/file/6eo83IVQM0w3bhxYq08BUy9a9havW5

    Please contact administrator
    for this information.
    #430194 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    January 11, 2025 at 17:11

    Hi @Abdul Moiz,

    Unfortunately, there is no settings to add the custom CSS codes to the WooCommerce order emails.

    To add the custom CSS codes, please add this code into your functions.php file locates in your child theme:

    
/**
 * @snippet       Add CSS to Specific WooCommerce Email
 * @how-to        businessbloomer.com/woocommerce-customization
 * @author        Rodolfo Melogli, Business Bloomer
 * @compatible    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */
 
add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_new_order_email', 9999, 2 );
 
function bbloomer_add_css_to_new_order_email( $css, $email ) { 
   if ( $email->id == 'customer_completed_order' ) {
      $css .= '
         table tr td {text-align: center;}
      ';
   }
   return $css;
}

    For more information, please take a look at this article: https://www.businessbloomer.com/woocommerce-add-css-woocommerce-emails/.

    Best regards,
    The 8Theme Team

    #430244 Copied
    Avatar: Family Care
    Family Care
    Participant
    January 11, 2025 at 19:23

    Thank you for the advice but unfortunately it doesn’t work. I have tried a few times but it didn’t work.
    Please check this screen recording: https://monosnap.com/file/oDZeI0sLyqLH4oGArocOREAWyg2iSx

    Please contact administrator
    for this information.
    #430252 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    January 13, 2025 at 06:02

    Hi @Abdul Moiz,

    Please try adding this code instead:

    
add_action('woocommerce_email_before_order_table', 'n2t_woocommerce_email_before_order_table');
function n2t_woocommerce_email_before_order_table(){
	?>
    <style> table tr td {text-align: center !important;} </style>
	<?php
}

    Please note that it could make all the TD elements center.

    Best regards,
    The 8Theme Team

    #430302 Copied
    Avatar: Family Care
    Family Care
    Participant
    January 13, 2025 at 13:09

    Can you confirm if it will only work on completed order or for all other email templates?

    Also, can js also work there? If yes, we might be able to find exact td.

    Thanks.

    #430399 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    January 13, 2025 at 14:02

    Dear @Abdul Moiz,

    Thank you for reaching out to us.

    The provided hook will apply to all your order-related emails. Kindly review the following code snippet, which you can use to target completed orders: 

    
do_action( 'woocommerce_email_before_order_table', $order, $sent_to_admin, $plain_text, $email );

    Please note, however, that any additional customization beyond this would fall outside the scope of the standard support services we provide.

    We sincerely appreciate your understanding in this matter. Should you have any further questions, feel free to let us know.

    Best regards,
    The 8Theme Team

    #430419 Copied
    Avatar: Family Care
    Family Care
    Participant
    January 13, 2025 at 16:26

    I don’t want to ask you to develop js for this reason but wanna request to share idea if possible so we can do it.
    Your knowledge and clues will help us.

    #430457 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    January 14, 2025 at 10:14

    Hi @Abdul Moiz,

    The hook we provided is very clear. Please take some Google searchs for this.

    It could be like this:

    
add_action('woocommerce_email_before_order_table', 'n2t_woocommerce_email_before_order_table', 100, 4);
function n2t_woocommerce_email_before_order_table($order, $sent_to_admin, $plain_text, $email){
if($order->get_status() == 'completed'):
	?>
    <style> table tr td {text-align: center !important;} </style>
	<?php
endif;
}

    Please note the code above didn’t test yet in real website.

    Best regards,
    The 8Theme Team

    #430508 Copied
  • Viewing 15 results - 1 through 15 (of 15 total)

The issue related to '‘advise on custom order field how to add them’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Marseille 01 – WordPress WooCommerce Theme
lazy-placeholder
Ecoenergy – WordPress WooCommerce Theme
lazy-placeholder
Minimal Store – WordPress WooCommerce Theme
lazy-placeholder
Skate – WooCommerce Theme
lazy-placeholder
Grocery Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Corporate – WordPress Theme
lazy-placeholder
Marseille 02 – WordPress WooCommerce Theme
lazy-placeholder
Lingerie Store – WordPress WooCommerce Theme
lazy-placeholder
Animals Store – WooCommerce Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.