Checkout page shipping

Hello @tuomonurkkala,

Thank you for reaching out!

I understand you want to change the behaviour of the shipping options selection field, correct? :?)

You can override the following template in your child theme files: https://github.com/woocommerce/woocommerce/blob/f4b6139974bb72020e5cd3dd98f3cbef5048c4af/plugins/woocommerce/templates/cart/cart-shipping.php#L31

If you require the assistance of a developer, consider hiring a WooExpert as customer requests are not something we can assist with per our support policy.

Hope this helps!

Hi @woo-hc

Thanks for the help! Yes I wanted to change the shipment section little bit and I got help from the theme coders. I had to add this to the Global Custom CSS section and it is nice now:

.cart_totals tbody { display: flex; flex-direction: column; } .cart_totals .woocommerce-shipping-totals { display: flex; } .cart_totals .woocommerce-shipping-totals > td { flex-grow: 1; } @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; } @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; } }

Best Regards,

Tuomo Nurkkala

Here is the code in the right way:

.cart_totals tbody {
	display: flex;
	flex-direction: column;
}

.cart_totals .woocommerce-shipping-totals {
	display: flex;
}

.cart_totals .woocommerce-shipping-totals > td {
	flex-grow: 1;
}

@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;
}

@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;
	}
}

and this CSS code was added as well:

.cart-collaterals .cart_totals table th {
text-align: left;
font-size: 14px;
width: 15%;
}

.woocommerce-checkout-review-order-table th {
width: 20%;
}

.cart_item .product-name {
width: 50%;
}

Hi @tuomonurkkala

I’m glad you were able to find a solution to your inquiry here and thanks for sharing it with the community too! ??

I will be marking this thread as resolved. Should you have further inquiries, kindly create a new topic here.

Meanwhile, if you have a moment to spare, we would love it if you could share your thoughts with us by leaving a review or feedback. Your experience and feedback are important to help us improve and ensure we’re always providing the best possible support.

Thanks!