How to Customize WooCommerce Checkout Pages like a Hero | https://www.ibenic.com/customize-woocommerce-checkout-pages

checkout-form-final.php

<?php
/**
 * Checkout Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.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/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

wc_print_notices();

do_action( 'woocommerce_before_checkout_form', $checkout );

// If checkout registration is disabled and not logged in, the user cannot checkout
if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
    echo apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) );
    return;
}

?>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
    <div class="col2-set" id="customer_details">
        <?php if ( $checkout->get_checkout_fields() ) : ?>
            <div class="col-1">
            <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

            
                
                    <?php do_action( 'woocommerce_checkout_billing' ); ?>
                

                
                    <?php do_action( 'woocommerce_checkout_shipping' ); ?>
              
         

            <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
            </div>
        <?php endif; ?>
        <div class="col-2">
            <h3 id="order_review_heading"><?php _e( 'Your order', 'woocommerce' ); ?></h3>
              
            <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
            
   

                <?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
                    
                    <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
                       
                        <table class="my-custom-shipping-table">
                            <tbody>
                             <?php wc_cart_totals_shipping_html(); ?>
                            </tbody>
                        </table>
                   
                    <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

                <?php endif; ?>
          
            <div id="order_review" class="woocommerce-checkout-review-order">
                <?php do_action( 'woocommerce_checkout_order_review' ); ?>
            </div>

            <?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
        </div>
    </div>
</form>

<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>

form-checkout-changes.php

<?php
//child17/woocommerce/checkout/form-checkout.php
// Complete file: https://gist.githubusercontent.com/igorbenic/ad39ec3cd53d8b2d875f01870983f71d/raw/d7af10a4c1c954d1909a9776e2484ce5730f4834/form-checkout.php
// ....
?>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
    <div class="col2-set">
        <?php if ( $checkout->get_checkout_fields() ) : ?>
            <div class="col-1" id="customer_details">
              <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

                    <?php do_action( 'woocommerce_checkout_billing' ); ?>
                
                    <?php do_action( 'woocommerce_checkout_shipping' ); ?>

              <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
            </div>
        <?php endif; ?>
        <div class="col-2">
            <h3 id="order_review_heading"><?php _e( 'Your order', 'woocommerce' ); ?></h3>
              
            <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
          
            <div id="order_review" class="woocommerce-checkout-review-order">
                <?php do_action( 'woocommerce_checkout_order_review' ); ?>
            </div>

            <?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
        </div>
    </div>
</form>

<?php

// ...

?>

form-checkout-spot.php

<?php // Here will go our shipping methods ?>
<div id="order_review" class="woocommerce-checkout-review-order">
    <?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>

form-checkout.php

<?php
/**
 * Checkout Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.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/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

wc_print_notices();

do_action( 'woocommerce_before_checkout_form', $checkout );

// If checkout registration is disabled and not logged in, the user cannot checkout
if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
    echo apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) );
    return;
}

?>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
    <div class="col2-set">
        <?php if ( $checkout->get_checkout_fields() ) : ?>
            <div class="col-1" id="customer_details">
              <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

                    <?php do_action( 'woocommerce_checkout_billing' ); ?>
                
                    <?php do_action( 'woocommerce_checkout_shipping' ); ?>

              <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
            </div>
        <?php endif; ?>
        <div class="col-2">
            <h3 id="order_review_heading"><?php _e( 'Your order', 'woocommerce' ); ?></h3>
              
            <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
          
            <div id="order_review" class="woocommerce-checkout-review-order">
                <?php do_action( 'woocommerce_checkout_order_review' ); ?>
            </div>

            <?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
        </div>
    </div>
</form>

<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>

functions.php

<?php
/**
 * Child 17 child theme functions
 */

if( ! defined( 'ABSPATH' ) ) {
    return;
}

/**
 * Child Theme Functions
 */

add_action( 'wp_enqueue_scripts', 'enqueue_2017_css' );

/**
* Enqueue the Twenty Seventeen CSS
*/
function enqueue_2017_css() {
    wp_enqueue_style( '2017-css', get_template_directory_uri() . '/style.css');
}

functions2.php

<?php

add_filter( 'woocommerce_update_order_review_fragments', 'my_custom_shipping_table_update');

function my_custom_shipping_table_update( $fragments ) {
    
     
    ob_start();
    ?>
    <table class="my-custom-shipping-table">
        <tbody>

        <?php wc_cart_totals_shipping_html(); ?>
        </tbody>
    </table>
    <?php
    $woocommerce_shipping_methods = ob_get_clean();

    $fragments['.my-custom-shipping-table'] = $woocommerce_shipping_methods;
    

    return $fragments;
}

review-order.php

<?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/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>
<table class="shop_table woocommerce-checkout-review-order-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 echo apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . '&nbsp;'; ?>
                            <?php echo apply_filters( 'woocommerce_checkout_cart_item_quantity', ' <strong class="product-quantity">' . sprintf( '&times; %s', $cart_item['quantity'] ) . '</strong>', $cart_item, $cart_item_key ); ?>
                            <?php echo WC()->cart->get_item_data( $cart_item ); ?>
                        </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; ?>

        <?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() && 'excl' === WC()->cart->tax_display_cart ) : ?>
            <?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>

shipping-methods.php

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
                    
    <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

        <table class="my-custom-shipping-table">
            <tbody>
             <?php wc_cart_totals_shipping_html(); ?>
            </tbody>
        </table>

    <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

<?php endif; ?>

shipping-table.php

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
                    
    <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

        <table class="my-custom-shipping-table"><!-- Our table -->
            <tbody>
             <?php wc_cart_totals_shipping_html(); ?>
            </tbody>
        </table>

    <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

<?php endif; ?>

style.css

/*
Theme Name: Twenty Seventeen Child
Description: Child Theme to Customize WooCommerce Checkout Page
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: child17
Template: twentyseventeen

*/