Ecommerce Shopify WordPress Discussion

Customize shipping options in WooCommerce Checkout Order Review

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.
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.

February 17, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.