I'm trying to customise WooCommerce checkout process to be it similar as Shopify! It means - checkout process is splitted in steps: Customer info, Shipping, Payment. And on the right side of every step there is product list with totals (including Coupon and Shipment info)!
For multiply step I'm using plugin.
For right side product list I'm using table from /checkout/review-order.php the same table with specific customisations, but removing table class "woocommerce-checkout-review-order-table" (otherwise it making problems) like this:
<div class="checkout-right-side-product-list">
<table class="shop_table">
<thead>
<tr>
<th class="product-name"><?php _e( 'Product', 'woocommerce' ); ?></th>
<th class="product-total"><?php _e( 'Total', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody>
<?php
do_action( 'woocommerce_review_order_before_cart_contents' );
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_checkout_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
?>
<tr class="<?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ); ?>">
<td class="product-name">
<?php
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
echo '<div class="checkout-cart-thumbnail">' . $thumbnail . '<span class="product-quantity">' . $cart_item['quantity'] . '</span></div>';
echo '<div class="checkout-cart-name">' . $_product->get_name() . '<br />' . wc_get_formatted_cart_item_data( $cart_item ) . '</div>'; ?>
</td>
<td class="product-total">
<?php echo apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); ?>
</td>
</tr>
<?php
}
}
//do_action( 'woocommerce_review_order_after_cart_contents' );
?>
</tbody>
<tfoot>
<tr class="cart-subtotal">
<th><?php _e( 'Subtotal', 'woocommerce' ); ?></th>
<td><?php wc_cart_totals_subtotal_html(); ?></td>
</tr>
<?php foreach ( WC()->cart->get_coupons() as $code => $coupon ) : ?>
<tr class="cart-discount coupon-<?php echo esc_attr( sanitize_title( $code ) ); ?>">
<th><?php wc_cart_totals_coupon_label( $coupon ); ?></th>
<td><?php wc_cart_totals_coupon_html( $coupon ); ?></td>
</tr>
<?php endforeach; ?>
<tr class="cart-shipping">
<th><?php _e( 'Shipping', 'woocommerce' ); ?></th>
<td><?php echo WC()->cart->get_cart_shipping_total();
?></td>
</tr>
<?php foreach ( WC()->cart->get_fees() as $fee ) : ?>
<tr class="fee">
<th><?php echo esc_html( $fee->name ); ?></th>
<td><?php wc_cart_totals_fee_html( $fee ); ?></td>
</tr>
<?php endforeach; ?>
<?php if ( wc_tax_enabled() && ! WC()->cart->display_prices_including_tax() ) : ?>
<?php if ( 'itemized' === get_option( 'woocommerce_tax_total_display' ) ) : ?>
<?php foreach ( WC()->cart->get_tax_totals() as $code => $tax ) : ?>
<tr class="tax-rate tax-rate-<?php echo sanitize_title( $code ); ?>">
<th><?php echo esc_html( $tax->label ); ?></th>
<td><?php echo wp_kses_post( $tax->formatted_amount ); ?></td>
</tr>
<?php endforeach; ?>
<?php else : ?>
<tr class="tax-total">
<th><?php echo esc_html( WC()->countries->tax_or_vat() ); ?></th>
<td><?php wc_cart_totals_taxes_total_html(); ?></td>
</tr>
<?php endif; ?>
<?php endif; ?>
<?php do_action( 'woocommerce_review_order_before_order_total' ); ?>
<tr class="order-total">
<th><?php _e( 'Total', 'woocommerce' ); ?></th>
<td><?php wc_cart_totals_order_total_html(); ?></td>
</tr>
<?php do_action( 'woocommerce_review_order_after_order_total' ); ?>
</tfoot>
</table>
</div>
For Shipping as third step I customised /checkout/review-order.php to display shipping methods
<div class="checkout-shipping-wrapp">
<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
<?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
<table class="checkout-shipping-table">
<tbody>
<?php wc_cart_totals_shipping_html(); ?>
</tbody>
</table>
<?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>
</div>
The problem is that now Shipping info on the right side table is not changing ajax when shipping method is changed...
Question - how it could be possible to display shippment info and update all totals ajax when changing shipment method...?
EDITED (situation more extended): WooCommerce has /checkout/review-order.php where by default is table with classes "shop_table woocommerce-checkout-review-order-table", this whole table totally "redraws" after coupon inserting/removing, shipping method change, payment method change. It detects table by woocommerce-checkout-review-order-table and ajax redraw it! But now I totally changed this file to show just shippment methods (my 2nd code fragment).
And whole table from this file was taken and used to /checkout/review-order.php, /checkout/form-billing.php and /checkout/payment.php when I'm displaying table on the right side as cart totals. And I'm removing this class "woocommerce-checkout-review-order-table" (because then it on shippment method change redraws this table with everything that is in review-order.php and that is not what I need) and table shows OK. But of course, when now changing shippment method, this table that is now on the right side and has no class "woocommerce-checkout-review-order-table" is not "redrawing".
And what I want to achieve is - that this table (which I have on the right side (and still is in form with name "checkout" but without class "woocommerce-checkout-review-order-table") "redraws" on shippment method change/coupon insert/remove)!
Is the only option to totally rebuild this with custom ajax function where I recaluclate everything with php and execute ajax with this custom php function on shippment change/coupon form submit? Or there is some easier/quicker solution?
