Edit the order box on checkout page

Hi,

I'm not exactly sure what you mean.

To clarify: Do you want the text on the first column to move further to the left closer to its bounding box?

For font size, you can try adjusting it through Appearance > Customize > Typography.

It if doesn't work to your preference. You can try directly targeting it using CSS:

table.shop_table.woocommerce-checkout-review-order-table {
    font-size: 12px;
}

As for the spacing (to move it to the left), you'll have to override the styling applied by the WooCommerce plugin default.

.woocommerce table.shop_table td, .woocommerce table.shop_table th {
    padding: 20px;
    border: 0;
}

Change padding value to 20px 20px 20px 0px. ( top right bottom left )

Here's how to add CSS: https://docs.generatepress.com/article/adding-css/

Also it looks terrible on mobile. Is there a way to fix this?

The page seems to be a custom created page template that uses wp column blocks with 3 columns (2 columns used as spacing). It looks weird since it is using a different break point (max-width: 781px) and the 2 columns used as spacing doesn't work well.

Consider using GenerateBlocks Container Block instead.

Hey Elvin,

thanks for your feedback. I solved it with GenerateBlocks Container Block ;)

Thank you!!!

Nice one! Glad you got it sorted. :D