[Support request] Alignement of product description in woocommerce cart

Hi!

Unfortunately not, but I found out with the Firefox Developer Edition, that the line-height property which was set to 22px is too small and I added a custom css like this:

/*Im Warenkorb anpassen, dass die Angaben auf der richtigen Höhe sind*/
.woocommerce td.product-name .wc-item-meta p, .woocommerce td.product-name .wc-item-meta:last-child, .woocommerce td.product-name dl.variation p, .woocommerce td.product-name dl.variation:last-child {
  line-height: 28px;
}

The line height and alignment looks ok with 28px.

What I still don’t like is, when the width of the window is too small, that for example the price get’s a line brake in the middle of the number. It would be better to write it then completely in a new line.
My other idea was to change the complete cart and checkout page with generateblocks. Could this be done? Because as well the size of the table is to big on mobile on the checkout page.

@media(max-width: 768px) {
.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
  border: 1px solid rgba(0,0,0,.1);
  margin: 0 -1px 24px 0;
  text-align: left;
  width: 90%;
  border-collapse: separate;
  border-radius: 5px;
}
}

In Firefox developer it’s changing the width with this css but with custom css this is not working.

Hello David and Thank you a lot!

With reducing the padding there is still the line brake on the cart page for example:
Anzahlungsbetrag: 32,
00 €

And yes, sorry, for the checkout page the login details are needed which I’m adding now to the private information.

To edit the checkout page, I found this with FunnelKit:
https://www.wpbeginner.com/wp-tutorials/how-to-customize-woocommerce-checkout-page/
or this with CartFlows:
https://wpastra.com/woocommerce-tutorial/woocommerce-checkout-page/

Is there any docu / recommended way with GP?
I want to decide if I should better learn new stuff with generateblocks (to use inside Funnel or CartFlows) or elementor. But this has time for later – for now I’m totally satisfied if the checkout page is displaying all information in a correct way and working 😉

Emanuel

Hi David,

1. left and right padding reduced
2. table padding and font size looks perfect with this values
3. layout as a stack looks nice!

Thanks a lot!

Can I add some CSS that the value of the price (cart and checkout site) always makes a complete line break as soon as it’s not fitting?
In Firefox developer edition this is already automatically.
There is either:
Anzahlungsbetrag: 0,20 €
or
Zukünftige Zahlungen:
0,80 €

In Chrome it’s still sometimes
Anzahlungsbetrag: 0,2
0 €

Would be nice to always break the complete price down to the next row and not leave some rest.

Emanuel

Hi David,

yes, I have the issue with the breaks in the middle of the price on my android phone (Ulefon Armor 17 Pro, android 12) and also when I’m resizing the chrome browser.

And what is strange:
I switched off “germanized for woocommerce” to make the settings. Now I switched it on again and the stack-table is away again.
I guess it has just another class-ID now?

Emanuel

Hello David,

I commented the css out as it was doing nothing.

Now I’m using this:

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

.woocommerce-checkout-review-order-table th.product-total {
  display: none;
}

.woocommerce-checkout-review-order-table td.product-total {
  font-weight: bold;
  font-size: 1.2em;
	text-align: right;
  border-bottom-width: 4px;
}

I’m leaving the deposit plugin active for now as we can see now as well the line-brake for the prices. The prices are not calculated correct (they made an update for the plugin and did some mistake)

Could it be made, that at the description for the single product the table has space completely to the right (max border of 10 or 20 pix). Could be something like dl.variation under product-name the width?

Thanks,
Emanuel

Yeah, that looks nice!
And as I can see in the inspector, the padding is automatically more then 😉

I removed the cart-subtotal as well with:

.woocommerce-checkout-review-order-table tr.cart-subtotal {
	display: none;
}

Now I think before the tr.order-total (Gesamtsumme) a bigger gray dash would be nice.
But it’s not working with

.woocommerce-checkout-review-order-table tr.order-total {
	border-top: 5px;
	border-top-color: blue;
}