Customize shipping options in WooCommerce Checkout Order Review

Question

I am trying to customize Woo Checkout Order Review element but somehow I am not able to customize it well so I will try the power of my favorite forum.

The current look is in the screenshot below and the goal is to redesign it.

IMAGE | CURRENT LOOK

I want to separate the shipping costs and options from the remaining infos but keep the position of it so the solution should be a creating of some border (top and bottom), add some title and set the width of the table row (td) to the 100%. I am also attaching the screenshot.

IMAGE | HOW I WANT IT

First of all I tried to edit the table using CSS.

Hide the th:

.woocommerce-shipping-totals th {
    display: none !important;
    width: 0px !important;
}

Set the width of td:

.woocommerce-shipping-totals td {
    width: 100% !important;
    text-align: right !important;
} 

And add some border:

.woocommerce-shipping-totals {
    border-top: 1px solid #bbb !important;
    border-bottom: 1px solid #ccc !important;

}

The result is in the screenshot below, not working well but I think that I just doing it wrong way. Unfortunately I do not know how to continue.

IMAGE | AFTER CSS EDIT

Second try was editing the "/templates/checkout/review-order.php" file.

The code which generate the shipping is below. I tried to add some divider before/after () but everytime it was generated before or after whole checkout review table. Anytime not inside so before or after checkout order shipping what I need to.

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

Anyway the file is probably the right one because when I tried to hide "", it was not showing so the correct result.

Third try was editing the "/templates/cart/cart-shipping.php" file but there I am probably completely lost. Anything I did caused the complete hide of the shipping element.

I hope that I described it well and I will really appreciate any help. It is couple of hours now of attempts and nothing worked.

Thank you for any answer.

Answer 1

You will use your 3rd try, overriding via your child theme, the template: cart-shipping.php.

For that, you create first a folder named "woocommerce" with a subfolder named "cart", inside your child theme folder. Inside that "cart" subfolder you will copy cart-shipping.php template file located in plugins/woocommerce/templates/cart/cart-shipping.php.

Open edit the copied file and replace from line 26 to 30 the following block:

?>
<tr class="woocommerce-shipping-totals shipping">
    <th><?php echo wp_kses_post( $package_name ); ?></th>
    <td data-title="<?php echo esc_attr( $package_name ); ?>">
        <?php if ( $available_methods ) : ?>

with this:

if ( is_cart() ) : ?>
<tr class="woocommerce-shipping-totals shipping">
    <th><?php echo wp_kses_post( $package_name ); ?></th>
    <td data-title="<?php echo esc_attr( $package_name ); ?>">
<?php else : ?>
<tr class="woocommerce-shipping-totals shipping shipping-title">
    <th colspan="2"><?php echo wp_kses_post( $package_name ); ?></th>
</tr>
<tr class="woocommerce-shipping-totals shipping shipping-options">
    <td colspan="2" data-title="<?php echo esc_attr( $package_name ); ?>" style="text-align:right">
<?php endif; ?>
        <?php if ( $available_methods ) : ?>

It should work.