[Support request] responsive checkout

Home Forums Support responsive checkout

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1279472
    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!!

    #1279663
    Leo
    Staff
    Customer Support

    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!

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

    #1280658
    David
    Staff
    Customer Support

    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%;
    }
    #1281015
    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 🙂

    #1281705
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.