CSS problem in shopping cart

Hey there,

everything in this theme works extremely well, I am amazed!

Small style problem though with the shopping cart: The text on the right appears “out of the box”, I’ll attach a screenshot. Tried with or without custom CSS, but the problem remains.

Please help!

Attachments:

You must be logged in to view attached files.

Hello,

Thank you so much purchasing our theme and contacting our support center.

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

body .woocommerce-checkout-review-order-table tfoot .order-total th,
body .woocommerce-checkout-review-order-table tr th {
	font-size: 14px;
}

Kind Regards
XTemos Studio

Thank you Keymaster,

unfortunately this CSS snippet had no effect on the display of the cart: the right hand column still looks the same (“out of the box”).

My guess is that this has to do with the German translation of the term “Flat rate”, which is much longer: “Versandkostenpauschale”. I tried to change the translation to a shorter term via Loco Translate, but in the frontend it still says “Versandkostenpauschale”..

This is strange, because all other translation changes I have so far applied to the language files of Woodmart and Woocommerce do indeed show up correctly.

So, can you advise me how to change the translation of “Flat rate”?

========

Another way:

I enclose another screenshot showing the table structure which uses up a lot of space for the left column to display the word “Shipping” (German: “Versand”), leaving not enough width for the “long words” in the right column.

It might help if the left column took up only, let’s say, a quarter of the width, leaving a three-quarter-with for the long words in the right column.

How would I alter this specific table width via CSS?

Thank you in advance for your help!

Attachments:

You must be logged in to view attached files.

We can’t see your website because of maintenance mode enabled at the moment. Please, provide us your admin access.

Regards

Hello Bogdan, sure, would you please give me an xtremos email address so I can open an administrator account for you?

Just create a new account and post it data in the private content here. Not necessary to use our email.

Hello Bogdan, here is your account, thank you in advance for your help:

Try to add the following code snippet to the Desktop Custom CSS area in Theme Settings to fix this issue.

body .cart-content-wrapper .cart-totals-section {
	-webkit-box-flex: 0;
	-ms-flex:0 0 500px;
	flex: 0 0 500px;
	max-width: 500px;
}

Regards

Great, with your CSS the cart looks much better now.

Two more questions regarding this issue:

1)
The following warning now appears in Desktop Custom CSS, should I ignore it?
The property -moz-box-flex is compatible with -webkit-box-flex and should be included as well.
The property -ms-box-flex is compatible with -webkit-box-flex and should be included as well.

2)
As mentioned before, I provided a different German translation for “Flat Rate” via Loco Translate (Woocommerce). Why does the newly translated term not show up in the cart frontend, while all others do?

Thank you very much Bogdan!

1. Yes, you can ignore it.

2. Name of your shipping method can be changed in Woocommerce -> Settings -> Shipping -> Shipping zones -> Your shipping zone -> Shipping method title.

Regards

I see 😉 Thank you for the excellent support!

You are welcome, Dumbledore.

[Author]

Posts