I'm using Astra theme and WooCommerce checkout widget. The first column in order summary is too narrow so it compresses the name of the product & the 2nd column showing the price does the same, leaving a big gap in the middle: original
I found some custom css, which allows me to change the max width so it looks like this: With css
The css I used is:
.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .cart_item td.product-name { padding-right: 40px; max-width: 150px; }
However, it now compresses the shipping part on the right side.
Is there a way to keep the shipping part separate?