[Support request] responsive checkout

[Julio Merodio]

Good afternoon!

We are finishing an ecommerce made in WordPress with Woocommerce and for this we have used Generate PRess Pro together with Elementor Pro.

And although the complementary use of the theme with the constructor is great, we have a problem that we have not managed to solve.

At the checkout, in the mobile version, the shipping and collection options are cut since the left part of the table is very wide. Could you help us solve it?

Thank you very much in advance!!

[Leo]

Hi there,

I would need to see the checkout page to be able to determine the issue.

Can you guide me through how I can add a product and get to the checkout page?

The site is not in English so I can’t quite tell.

Thanks!

[Julio Merodio]

Good Morning Leo!

I send you the new irl because we have already launched the page: https://rocacho.com/pedido-online/

Directly in this url you can add products to the cart. Later, in the Nav menu, if you click in the icon cart and then in “Finalizar compra”, you will directly access the checkout.

Thank you very much for your help!

[David]

Hi there,

try adding this CSS:

.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot tr {
    display: flex;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th {
    flex: 1 0 120px;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot td {
    flex: 1 0 100%;
}

[Julio Merodio]

Thank you very much David for your help 🙂

However, although it is true that the column on the left is smaller, the screen makes us a rather unpleasant overflow effect. The texts in the right column come off the screen and I have to scroll horizontally to be able to read them in full.

Do you know why this could happen? Could you fix the column size problem without leaving the screen?

Thank you very much again 🙂

[Tom]

Hi there,

Would something like this work?:

@media (max-width: 768px) {
    .woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot td {
        width: 100% !important;
        box-sizing: border-box;
        display: block;
    }

    .woocommerce table.shop_table,
    .woocommerce table.shop_table tfoot,
    .woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot tr {
        display: block;
    }

    .woocommerce-shipping-totals th {
        margin-bottom: 10px;
    }
}

WooCommerce uses tables which are not very CSS-friendly unfortunately.

[Author]

Posts