Shopping cart shipping view -> Checkout page shipping view

This topic has 24 replies, 3 voices, and was last updated 1 year ago by Elise Noromit.

Viewing 25 posts - 1 through 25 (of 25 total)

Author

Posts
October 27, 2023 at 11:12 am #507796

Tuomo
Participant

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.

October 27, 2023 at 12:10 pm #507828

Tuomo
Participant

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.

October 27, 2023 at 12:50 pm #507841

Tuomo
Participant

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

October 28, 2023 at 1:33 am #508015

Elise Noromit
Member

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

October 30, 2023 at 11:04 am #508409

Tuomo
Participant

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

October 30, 2023 at 1:12 pm #508474

Elise Noromit
Member

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

October 30, 2023 at 1:32 pm #508486

Tuomo
Participant

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.

October 30, 2023 at 2:12 pm #508509

Tuomo
Participant

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.

October 31, 2023 at 1:33 am #508635

Elise Noromit
Member

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

October 31, 2023 at 1:39 am #508636

Tuomo
Participant

Here you go:

October 31, 2023 at 1:52 am #508638
Tuomo
Participant
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. 🙂
October 31, 2023 at 1:56 am #508642
Tuomo
Participant
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%;
}
```
October 31, 2023 at 5:02 am #508669

Elise Noromit
Member

Hello,

We are glad you have solved the issue.

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

Best Regards

October 31, 2023 at 11:09 am #508731

Tuomo
Participant

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

November 1, 2023 at 6:28 pm #509147
Bogdan Donovan
Keymaster
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
November 1, 2023 at 8:42 pm #509186

Tuomo
Participant

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.

November 2, 2023 at 10:53 am #509276
Bogdan Donovan
Keymaster
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
November 2, 2023 at 12:16 pm #509302
Tuomo
Participant
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.
November 3, 2023 at 11:00 am #509568
Bogdan Donovan
Keymaster
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
November 3, 2023 at 2:57 pm #509645

Tuomo
Participant

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.

November 3, 2023 at 3:21 pm #509658
Tuomo
Participant
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.
November 4, 2023 at 12:47 am #509782
Tuomo
Participant
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%;
}
```
November 4, 2023 at 12:55 am #509783

Tuomo
Participant

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.

November 4, 2023 at 1:49 am #509786
Tuomo
Participant
Okay, now I got this better when grew the % of this:
```
.cart_item .product-name {
width: 15%;
}
```
to:
```
.cart_item .product-name {
width: 50%;
}
```
November 9, 2023 at 5:54 pm #511208

Elise Noromit
Member

Hello,

We are glad you have solved the issue.

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

Best Regards
Author

Posts