title: Trying to customize the order review table in the Woocommerce checkout page with a custom layout. Can someone review my code please?
body: <p>In order review section from Woocommerce checkout page, I am attempting to incorporate the following design:</p>
  <p><a href="https://i.stack.imgur.com/4W3ky.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4W3ky.jpg" alt="enter image description here" /></a></p>
  <p>This is the code snippet I have tried using:</p>
  <pre><code>&lt;?php
  /**
   * Review order table
   *
   * This template can be overridden by copying it to yourtheme/woocommerce/checkout/review-order.php.
   *
   * HOWEVER, on occasion WooCommerce will need to update template files and you
   * (the theme developer) will need to copy the new files to your theme to
   * maintain compatibility. We try to do this as little as possible, but it does
   * happen. When this occurs the version of the template file will be bumped and
   * the readme will list any important changes.
   *
   * @see https://docs.woocommerce.com/document/template-structure/
   * @package WooCommerce/Templates
   * @version 3.8.0
   */
  
  defined( 'ABSPATH' ) || exit;
  ?&gt;
  
  &lt;!-- Custom Order Review Section Layout Starts here --&gt;
  &lt;div class=&quot;co_review_section shop_table woocommerce-checkout-review-order-table&quot;&gt;
          &lt;?php
          do_action( 'woocommerce_review_order_before_cart_contents' );
  
          foreach ( WC()-&gt;cart-&gt;get_cart() as $cart_item_key =&gt; $cart_item ) {
              $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
  
              if ( $_product &amp;&amp; $_product-&gt;exists() &amp;&amp; $cart_item['quantity'] &gt; 0 &amp;&amp; apply_filters( 'woocommerce_checkout_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
                  ?&gt;
                  &lt;div class=&quot;&lt;?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ); ?&gt;&quot;&gt;
                      &lt;div class=&quot;product-name co_product_name&quot;&gt;
                          &lt;?php echo apply_filters( 'woocommerce_cart_item_name', $_product-&gt;get_name(), $cart_item, $cart_item_key ) . '&amp;nbsp;'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?&gt;
                          &lt;?php echo apply_filters( 'woocommerce_checkout_cart_item_quantity', ' &lt;strong class=&quot;product-quantity&quot;&gt;' . sprintf( '&amp;times;&amp;nbsp;%s', $cart_item['quantity'] ) . '&lt;/strong&gt;', $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?&gt;
                          &lt;?php echo wc_get_formatted_cart_item_data( $cart_item ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;product-total co_product_total&quot;&gt;
                          &lt;?php echo apply_filters( 'woocommerce_cart_item_subtotal', WC()-&gt;cart-&gt;get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;?php
              }
          }
  
          do_action( 'woocommerce_review_order_after_cart_contents' );
          ?&gt;
      &lt;tfoot&gt;
  
          &lt;div class=&quot;cart-subtotal co_product_subtotal&quot;&gt;
              &lt;th&gt;&lt;?php esc_html_e( 'Subtotal', 'ecw-checkout-widget' ); ?&gt;&lt;/th&gt;
              &lt;td&gt;&lt;?php wc_cart_totals_subtotal_html(); ?&gt;&lt;/td&gt;
          &lt;/div&gt;
  
          &lt;?php foreach ( WC()-&gt;cart-&gt;get_coupons() as $code =&gt; $coupon ) : ?&gt;
              &lt;tr class=&quot;cart-discount coupon-&lt;?php echo esc_attr( sanitize_title( $code ) ); ?&gt;&quot;&gt;
                  &lt;th&gt;&lt;?php wc_cart_totals_coupon_label( $coupon ); ?&gt;&lt;/th&gt;
                  &lt;td&gt;&lt;?php wc_cart_totals_coupon_html( $coupon ); ?&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;?php endforeach; ?&gt;
  
          &lt;?php if ( WC()-&gt;cart-&gt;needs_shipping() &amp;&amp; WC()-&gt;cart-&gt;show_shipping() ) : ?&gt;
  
              &lt;?php do_action( 'woocommerce_review_order_before_shipping' ); ?&gt;
  
              &lt;?php wc_cart_totals_shipping_html(); ?&gt;
  
              &lt;?php do_action( 'woocommerce_review_order_after_shipping' ); ?&gt;
  
          &lt;?php endif; ?&gt;
  
          &lt;?php foreach ( WC()-&gt;cart-&gt;get_fees() as $fee ) : ?&gt;
              &lt;tr class=&quot;fee&quot;&gt;
                  &lt;th&gt;&lt;?php echo esc_html( $fee-&gt;name ); ?&gt;&lt;/th&gt;
                  &lt;td&gt;&lt;?php wc_cart_totals_fee_html( $fee ); ?&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;?php endforeach; ?&gt;
  
          &lt;?php if ( wc_tax_enabled() &amp;&amp; ! WC()-&gt;cart-&gt;display_prices_including_tax() ) : ?&gt;
              &lt;?php if ( 'itemized' === get_option( 'woocommerce_tax_total_display' ) ) : ?&gt;
                  &lt;?php foreach ( WC()-&gt;cart-&gt;get_tax_totals() as $code =&gt; $tax ) : // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited ?&gt;
                      &lt;tr class=&quot;tax-rate tax-rate-&lt;?php echo esc_attr( sanitize_title( $code ) ); ?&gt;&quot;&gt;
                          &lt;th&gt;&lt;?php echo esc_html( $tax-&gt;label ); ?&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;?php echo wp_kses_post( $tax-&gt;formatted_amount ); ?&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;?php endforeach; ?&gt;
              &lt;?php else : ?&gt;
                  &lt;tr class=&quot;tax-total&quot;&gt;
                      &lt;th&gt;&lt;?php echo esc_html( WC()-&gt;countries-&gt;tax_or_vat() ); ?&gt;&lt;/th&gt;
                      &lt;td&gt;&lt;?php wc_cart_totals_taxes_total_html(); ?&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;?php endif; ?&gt;
          &lt;?php endif; ?&gt;
  
          &lt;?php do_action( 'woocommerce_review_order_before_order_total' ); ?&gt;
  
          &lt;tr class=&quot;order-total&quot;&gt;
              &lt;th&gt;&lt;?php esc_html_e( 'Total', 'ecw-checkout-widget' ); ?&gt;&lt;/th&gt;
              &lt;td&gt;&lt;?php wc_cart_totals_order_total_html(); ?&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;?php do_action( 'woocommerce_review_order_after_order_total' ); ?&gt;
  
      &lt;/tfoot&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>But I got stuck. Now, this led to this structure:</p>
  <p><a href="https://i.stack.imgur.com/LTWlb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LTWlb.jpg" alt="enter image description here" /></a></p>
  <p>which has been messed up in terms of layout.</p>
  <p>I've used <a href="https://wordpress.org/plugins/change-quantity-on-checkout-for-woocommerce/" rel="nofollow noreferrer">Change Quantity on Checkout for WooCommerce</a> plugin, to get the quantity button &amp; delete button, to appear inside the order table. But this is not helping out too as you could see.</p>
  <p>Now I am badly stuck! Please help me correct the code.</p>
  <p>P.S - The Product thumb image, Product Name &amp; Variants, Price &amp; Delete icon needs to be placed in 1/3 + 2/3 + 1 /3 layout.</p>
  <p>Thanks in advance.</p>