Shopping cart shipping view -> Checkout page shipping view

Hi there,

Is there a way to change the checkout page shipping part to look the same as shopping cart shipping part?
I have attached one image of the checkout page and one image of the shopping cart from mobile view.

Best Regards,
Tuomo Nurkkala

Attachments:

You must be logged in to view attached files.

I’m not sure if this “Toimitus” change of position come from this ::before code or not.

Attachments:

You must be logged in to view attached files.

Could this CSS code help on that?

.woocommerce-checkout-review-order-table tfoot td:before {
content: attr(data-title) ¨: ¨;
font-weight: 700;
float: left;
text-transform: uppercase;
font-size: 14px;
}

Hello,

Please make the full backup of your site and check the issue on the Storefront theme to detect if our theme causes the problem. Storefront is a free theme developed by WooСommerce.

Best Regards

Hi Elise,

The same issue comes with Storefront as well. Is there a possibility to change the shipping part of the checkout page?
The shipping part looks good in shopping cart in mobile view, but not so good in checkout page.

Best Regards,
Tuomo Nurkkala

Hello,

If you see the same in Storefront, it means the Basel theme does not influence or cause the problem.

How do you want to change that?

Best Regards

I would like to have the checkout shipping part the same way as it is in shopping cart page.
I don’t like it when the shipping “Toimitus” part has 50% of the left side of the page on mobile view and the right side has the shipping methods. It is nice when the “Toimitus” shipping word is in the upper left corner and all the shipping methods take the full page view.

Attachments:

You must be logged in to view attached files.

As you can see here that the “Toimitus” position come from this ::before code. Or I guess it comes from there..
I am not sure where should I even add extra code and what code. I sent message to WooCommerce if they can help me with that problem as well.

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

Here you go:

I added these codes to Custom CSS for mobile some time ago so it would look little bit better than what it was previously:

.shop_table th.product-name {
    text-align: left;
    font-size: 15px;
}
.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
    font-size: 15px;
}

But it would be nice if it would look even better. 🙂

And I added these codes some time ago for Custom CSS for desktop so the cart and checkout looks better on desktop mode:

.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: 15%;
}

Hello,

We are glad you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

Sorry for the misunderstanding!
I have not fixed the shipping part of the checkout page. I have just made little adjustments for it.
The main problem still exists. :/

Best Regards,
Tuomo Nurkkala

Try to add the following code snippet to the Custom CSS area in Theme Settings to change table titles on cart page:

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

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

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

And this one for checkout table titles:

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

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

Kind Regards

Hi there,

It is looking better, but not quite like it is in shopping cart page.
Is there some tricks to be made so the shipments would be the same way as in shopping cart page?

Best Regards,
Tuomo Nurkkala

Attachments:

You must be logged in to view attached files.

Hi,

Both tables on cart and checkout have similar content, but have different HTML structure, so they can’t look identical using the same CSS styles. Try to use the following code to adjust their appearance:

.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%;
	}
	
	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;
	}
}

Kind Regards

Hi there,

It is getting better, but it is still little bit off.

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

Should I try to change the font size to 13 or 12px and width to 25% or 20%?

Best Regards,
Tuomo Nurkkala

Attachments:

You must be logged in to view attached files.

Hi,

As it was said in the previous reply, cart and checkout table structure has differences in their layout, since they can’t be 100% similar using the same styles. Try to use the following custom code instead of the previous one to improve column width in the shipping part of the table.

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

Kind Regards

Hi Bogdan,

Now the checkout page looks great on mobile view as well! 😀
Thanks alot!
I have these CSS codes on “Custom CSS for mobile”. Should it be there or in “Global Custom CSS”?

Best Regards,
Tuomo Nurkkala

Attachments:

You must be logged in to view attached files.

Btw do you know how I could get Shopping cart as good as now the Checkout page is?
When I make the shopping cart on Pad view it makes the Shipment structure not so nice. The Shipment view is now good in Pad view in the Checkout page.

I did these CSS codes to “Custom CSS for desktop” some time ago, but this is not so good:

.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: 15%;
}

Attachments:

You must be logged in to view attached files.

I got this quite good by adding the same CSS codes to “Custom CSS for tablet”.
Meaning these:

.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: 15%;
}

I got a new problem in the computer and pad view in the checkout page. It resizes the product name area. But I guess I can’t get everything in these codes. One or the other?
Before the product name area took 50% and now less.

Attachments:

You must be logged in to view attached files.

Okay, now I got this better when grew the % of this:

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

to:

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

Hello,

We are glad you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

Hi there,
I am wondering that are you able to make shipping method look even better?
I have attached 3 images to explain what I mean.
One is a picture of the original view of checkout page with the previous codes that you gave me.
Two images are what I am looking for.

I am able to get the Toimitus part up with this code in desctop mode:

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

But I can’t find any solution for mobile view.

I got some borders with this code but single line would be better:

#shipping_method li {
    margin-bottom: 10px;
    border-block: double;
}

border-block: dashed;
Im not sure how I can get single lines and it won’t go the whole view.

Best Regards,
Tuomo Nurkkala

Attachments:

You must be logged in to view attached files.

#shipping_method li {
    margin-bottom: 10px;
    border-block: solid;
}

This gives me too many lines.

Hi,

To achieve a similar appearance as in your second screenshot, try adding this code to the Global Custom CSS area in Theme Settings.

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

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

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

.checkout-order-review .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;
}

Kind Regards

Thank you very much! Now it looks perfect, but the cart page looks little bit weird in mobile.

Attachments:

You must be logged in to view attached files.

Here is the code for cart page at the moment:

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

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

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

[Author]

Posts