WooCommerce电子邮件订单 - 产品对齐

Question

I want to edit the email template for the WooCommerce Order, so that instead of the usual product per line table, I get 3 products per line (screenshot). I don't know how to set a limit of 3 products per line though. Only first 3 products show correctly.

Here is my snippet.

<?php
/**
 * Email Order Items
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

foreach ( $items as $item_id => $item ) :
    $_product     = apply_filters( 'woocommerce_order_item_product', $order->get_product_from_item( $item ), $item );
    $item_meta    = new WC_Order_Item_Meta( $item, $_product );

    if ( apply_filters( 'woocommerce_order_item_visible', true, $item ) ) {
        ?>

    <td class="<?php echo esc_attr( apply_filters( 'woocommerce_order_item_class', 'order_item', $item, $order ) ); ?>" style="text-align:center; vertical-align:middle; border: 1px solid #eee; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap:break-word;"><?php

            // Show title/image etc
            if ( $show_image ) {
                echo apply_filters( 'woocommerce_order_item_thumbnail', '<div style="margin-bottom: 5px"><img src="' . ( $_product->get_image_id() ? current( wp_get_attachment_image_src( $_product->get_image_id(), 'thumbnail') ) : wc_placeholder_img_src() ) .'" alt="' . esc_attr__( 'Product Image', 'woocommerce' ) . '" height="' . esc_attr( $image_size[1] ) . '" width="' . esc_attr( $image_size[0] ) . '" style="vertical-align:middle; margin-right: 10px;" /></div>', $item );
                echo  nl2br ("
");
            }

            // Product name
            echo apply_filters( 'woocommerce_order_item_name', $item['name'], $item, false );
            echo  nl2br ("
");

            //Product quantity
            echo apply_filters( 'woocommerce_email_order_item_quantity', $item['qty'], $item );
            echo  nl2br (" piece(s)
");


            echo apply_filters( 'woocommerce_cart_item_weight', $_product->get_weight());
            echo  nl2br (" gr
");


            // SKU
            if ( $show_sku && is_object( $_product ) && $_product->get_sku() ) {
                echo  nl2br ("
");
                echo ' (#' . $_product->get_sku() . ')';
            }

            // allow other plugins to add additional product information here
            do_action( 'woocommerce_order_item_meta_start', $item_id, $item, $order, $plain_text );

            ?></td>

    <?php
}

if ( $show_purchase_note && is_object( $_product ) && ( $purchase_note = get_post_meta( $_product->id, '_purchase_note', true ) ) ) : ?>
    <tr>
        <td colspan="3" style="text-align:left; vertical-align:middle; border: 1px solid #eee; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;"><?php echo wpautop( do_shortcode( wp_kses_post( $purchase_note ) ) ); ?></td>
    </tr>
<?php endif; ?>

Answer 1

I found a solution to it in case anyone is interested in aligning his products like this.

I inserted a counter $x to count the products in the end of the foreach loop and once it reaches the 3rd product, I have an if statement to change the table row and restart the counter.

Here is how the email looks like now: http://imgur.com/6q14Pes

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

$x = 0;

foreach ( $items as $item_id => $item ) :
$_product     = apply_filters( 'woocommerce_order_item_product', $order->get_product_from_item( $item ), $item );
$item_meta    = new WC_Order_Item_Meta( $item, $_product );
$x += 1;

if( $x > 3 ){ ?>
    <tr></tr>
    <?php
    $x = 0;
}

if ( apply_filters( 'woocommerce_order_item_visible', true, $item ) ) {
          ?>

    <td class="<?php echo esc_attr( apply_filters( 'woocommerce_order_item_class', 'order_item', $item, $order ) ); ?>" style="text-align:center; vertical-align:middle; border: 1px solid #eee; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap:break-word;"><?php

    // Show title/image etc
    if ( $show_image ) {
        echo apply_filters( 'woocommerce_order_item_thumbnail', '<div style="margin-bottom: 5px"><img src="' . ( $_product->get_image_id() ? current( wp_get_attachment_image_src( $_product->get_image_id(), 'thumbnail') ) : wc_placeholder_img_src() ) .'" alt="' . esc_attr__( 'Product Image', 'woocommerce' ) . '" height="' . esc_attr( $image_size[1] ) . '" width="' . esc_attr( $image_size[0] ) . '" style="vertical-align:middle; margin-right: 10px;" /></div>', $item );
        echo  nl2br ("
");
    }

    // Product name
    echo apply_filters( 'woocommerce_order_item_name', $item['name'], $item, false );
    echo  nl2br ("
");

    //Product quantity
    echo apply_filters( 'woocommerce_email_order_item_quantity', $item['qty'], $item );
    echo  nl2br (" piece(s)
");

    //Product weight
    echo apply_filters( 'woocommerce_cart_item_weight', $_product->get_weight());
    echo  nl2br (" gr
");

    // SKU
    if ( $show_sku && is_object( $_product ) && $_product->get_sku() ) {
        echo  nl2br ("
");
        echo ' (#' . $_product->get_sku() . ')';
    }

    // allow other plugins to add additional product information here
    do_action( 'woocommerce_order_item_meta_start', $item_id, $item, $order, $plain_text );

        ?></td><?php
}

if ( $show_purchase_note && is_object( $_product ) && ( $purchase_note = get_post_meta( $_product->id, '_purchase_note', true ) ) ) : ?>
    <tr>
    <td colspan="3" style="text-align:left; vertical-align:middle; border: 1px solid #eee; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;"><?php echo wpautop( do_shortcode( wp_kses_post( $purchase_note ) ) ); ?></td>
    </tr>
<?php endif; ?>