How to format WooCommerce Emails?

  • Resolved WhiteRoyal15

    (@whiteroyal15)


    8 years, 7 months ago

    Hi,

    I have a long list of attributes for each product that I want to properly format when the details of an order is printed out in the emails.

    Like for example, I have a tshirt product with maybe colors and sizes and many more details. Is it possible to make sure each variations that is printed out in the email to have its own classes so that I can break into sections or something of that sort? Right now, the emails are being printed out like this:

    My T-Shirt
Attribute #1: Attribute #1 Value
Attribute #2: Attribute #2 Value
Attribute #3: Attribute #3 Value
Attribute #4: Attribute #4 Value
Attribute #5: Attribute #5 Value

    and I want something like this for easier readability:

    My T-Shirt
Attribute #1: Attribute #1 Value
Attribute #2: Attribute #2 Value

Attribute #3: Attribute #3 Value

Attribute #4: Attribute #4 Value
Attribute #5: Attribute #5 Value

    I found the file where the variations is being printed out in folder woocommerce/emails/email-order-items.php and has something to do with lines 49-51 but I have no idea how to customize this to what I want:

    // Variation
				if ( ! empty( $item_meta->meta ) ) {
					echo '<br/><small class="'.$item_meta->meta_key.'">' . nl2br( $item_meta->display( true, true, '_', "\n" ) ) . '</small>';
				}

    Is there any hooks , filters that will enable me to do any sort of formatting?

    Thanks

    https://www.ads-software.com/plugins/woocommerce/

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi, @whiteroyal15. Since email-order-items.php is a WooCommerce template file, you can copy it to yourtheme/woocommerce/emails/email-order-items.php, and then make your own changes directly to that copy.

    See also Template Structure + Overriding Templates via a Theme in the WooCommerce docs.

    Thread Starter WhiteRoyal15

    (@whiteroyal15)

    Hi @girlieworks, I have copied it to my theme folder but my problem is I do not know how to go about the changes.

    Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    Well, I’m not sure how you can go about these changes either. How do you know that Attribute #3 needs to be in it’s own section, and #1 & #2 can be together?

    You can add custom html to the template before/after the <small> tags. But I’m not sure why you can just style the small tags appropriately. They even have custom class names per each attribute.

    Thread Starter WhiteRoyal15

    (@whiteroyal15)

    I thought I would let you guys know I manage to solve the email formatting. I am not sure how to put this as a hook so I just overwrote the woocommerce file by copying the original to my theme folder.

    Basically what this code does is that it reformat the item meta display to my own layout by finding a specific keyword in the $meta[key] array.

    Hopefully this helps someone.

    // Variation
if ( ! empty( $item_meta->meta ) ) {
	$formatted_meta = $item_meta->get_formatted('_');

	if ( ! empty( $formatted_meta ) ) {
      $meta_list = array();

      foreach ( $formatted_meta as $meta ) {

      	$keywords = array('YOUR_OWN_KEYWORD');
      	$meta_key = sanitize_html_class( sanitize_text_field( $meta['key'] ) );
      	$variationSections = false;

		foreach($keywords as $keyword) {
	        if (stripos($meta_key,$keyword) !== false) {
				$meta_list[] = '<br/>';
			}
	    }

		$meta_list[] = '
			<div class="variation-' . $meta_key . '">
			<span>'. wp_kses_post( $meta['label'] ) . ':</span>
			<span>'. wp_kses_post( make_clickable( $meta['value'] ) ) . '</span>
			</div>
		';

      } // endforeach

      if ( ! empty( $meta_list ) ) {
        $output .= '<div class="variation">' . implode( '', $meta_list ) . '</div>';
      }
      $output = apply_filters( 'woocommerce_order_items_meta_display', $output, $this );
      echo $output;
    }
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to format WooCommerce Emails?’ is closed to new replies.