Shopping cart shipping view -> Checkout page shipping view

And this is some CSS code as well from the same page.

.cart_item dl.variation dt {
	display: none 
}

.widget_shopping_cart .product_list_widget li .variation { 
	display: none 
}

body .testimonials.testimon-align-center .testimonial-avatar {
       border-radius: 0! important;
}

Hi,

We have prepared an updated custom code that works at the time of writing this reply. Before applying it, we recommend not making any other CSS changes to the cart and checkout pages to ensure that customizations do not overlap and cause additional issues.

Replace the code provided in the previous response with the custom code below.

.woocommerce-shipping-totals {
    flex-direction: column;
}

.woocommerce-checkout-review-order-table .shipping th,
.cart-collaterals .shipping th {
    display: block !important;
}

.cart-collaterals .shipping th {
    border: none;
    padding-bottom: 0;
}

.cart-collaterals .shipping td {
    padding-inline: 0;
}

.checkout-order-review .woocommerce-shipping-totals td {
    text-align: left;
    padding-top: 0;
}

.checkout-order-review .woocommerce-shipping-totals td:before,
.cart-collaterals .woocommerce-shipping-totals td:before {
    display: none;
}

.woocommerce-shipping-totals ul {
    border: 1px solid #000;
}

.woocommerce-shipping-totals li {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 13px 8px 8px 8px;
    margin-bottom: 0 !important;
}

.woocommerce-shipping-totals li:not(:last-child) {
    border-bottom: 1px solid #000;
}

.woocommerce-shipping-totals li label {
    display: flex !important;
    align-items: center;
    flex-grow: 1;
}

.woocommerce-shipping-totals li label img,
.woocommerce-shipping-totals li input[type="radio"] {
    margin-top: -3px  
}

.woocommerce-shipping-totals li label img {
    margin-left: 4px;
}

.woocommerce-shipping-totals li label .amount {
    flex-grow: 1;
    text-align: right;
}

.woocommerce-shipping-destination {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .cart-collaterals .shipping th {
        padding-inline: 5px;
        text-transform: uppercase;
        font-weight: 700;
    }
}

If the code is inserted correctly, the cart and checkout pages should look as follows:

Cart Desktop – https://monosnap.com/file/37WhcmXBLqj4sD7zDHbl7KfJ6O6ZGo, Cart Mobile – https://monosnap.com/file/8OZBSpQuM3LGf1ALerYB3U9PjTLVNh.
Checkout Desktop – https://monosnap.com/file/fYEAG2P9pLQGiJRxJBchsV0EfXIHnI, Checkout mobile – https://monosnap.com/file/V7hdE3GS1QHiCv0BND0VnbsYH1ovvE

If you apply the code, but it does not work, please provide updated administrator access so we can check your site and investigate the issue.

Kind Regards

Thank you very much! This looks perfect now!

@media (max-width: 768px) {

	body .woocommerce table.shop_table_responsive tbody td:before {
	    content: attr(data-title);
	}
}

.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table tfoot  {
	display: flex;
	flex-direction: column;
}

.woocommerce-checkout-review-order-table .amount,
body .woocommerce-checkout-review-order-table tfoot .order-total td .amount {
	color: #000;
}

.woocommerce-checkout-review-order-table thead tr,
.woocommerce-checkout-review-order-table tfoot tr  {
	display: flex;
}

.woocommerce-checkout-review-order-table thead tr > th,
.woocommerce-checkout-review-order-table tfoot tr > td  {
	width: unset;
	max-width: unset;
	flex-grow: 1;
}

.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td {
    width: 70%;
    max-width: 70%;
}

@media (max-width: 768px) {

	body .woocommerce-checkout .checkout-order-review #order_review .responsive-table th {
		text-transform: uppercase;
		font-weight: 700;
		font-size: 14px;
		font-family: "Hind", Arial, Helvetica, sans-serif;
		color: #4C4C4C;
		width: 30%;
	}
	
.woocommerce-checkout-review-order-table .shipping th {
		display: none;
}
	
.woocommerce-checkout-review-order-table .shipping td:before {
		content: attr(data-title);
		font-weight: 700;
    float: left;
    text-transform: uppercase;
    font-size: 14px;
}
	
	body .woocommerce-checkout .checkout-order-review #order_review .order-total th {
	font-size: 22px;
		}
	
	body .woocommerce-checkout .checkout-order-review #order_review .responsive-table tr {
		border: none;
	}
}

@media (max-width: 480px) {

	body .woocommerce-checkout .checkout-order-review .responsive-table {
		background-color: transparent;
		padding: 0;
	}
}

.woocommerce-shipping-totals {
    flex-direction: column;
}

.woocommerce-checkout-review-order-table .shipping th,
.cart-collaterals .shipping th {
    display: block !important;
}

.cart-collaterals .shipping th {
    border: none;
    padding-bottom: 0;
}

.cart-collaterals .shipping td {
    padding-inline: 0;
}

.checkout-order-review .woocommerce-shipping-totals td {
    text-align: left;
    padding-top: 0;
}

.checkout-order-review .woocommerce-shipping-totals td:before,
.cart-collaterals .woocommerce-shipping-totals td:before {
    display: none;
}

.woocommerce-shipping-totals ul {
    border: 1px solid #E6E6E6;
}

.woocommerce-shipping-totals li {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 13px 8px 8px 8px;
    margin-bottom: 0 !important;
}

.woocommerce-shipping-totals li:not(:last-child) {
    border-bottom: 1px solid #E6E6E6;
}

.woocommerce-shipping-totals li label {
    display: flex !important;
    align-items: center;
    flex-grow: 1;
}

.woocommerce-shipping-totals li label img,
.woocommerce-shipping-totals li input[type="radio"] {
    margin-top: -3px  
}

.woocommerce-shipping-totals li label img {
    margin-left: 4px;
}

.woocommerce-shipping-totals li label .amount {
    flex-grow: 1;
    text-align: right;
}

.woocommerce-shipping-destination {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .cart-collaterals .shipping th {
        padding-inline: 5px;
        text-transform: uppercase;
        font-weight: 700;
    }
}

Glad that you found a solution. Feel free to reach out if you have any further questions.

Kind Regards

[Author]

Posts