Archived topic

responsive checkout

5 replies · Started by Julio Merodio on May 11, 2020

Viewing posts 1–6 of 6

May 11, 2020 at 10:17 am #1279472

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!!

May 11, 2020 at 12:17 pm #1279663

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!

May 12, 2020 at 12:53 am #1280340

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!

May 12, 2020 at 5:39 am #1280658

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%;
}

May 12, 2020 at 8:17 am #1281015

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 :)

May 12, 2020 at 4:10 pm #1281705

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.

This archived topic is closed to new replies.

Start building better websites today.