Показывать встроенные элементы на странице корзины woocommerce

Question

Я пытался показать две коробки на странице моей корзины рядом друг с другом. Сводка корзины и итоги корзины.

Я пытался задать разную ширину для каждого класса, но не могу понять это правильно.

Также попытался отобразить inline, но ничего не происходит.

Я оставлю ссылку на страницу продукта , чтобы вы могли добавить ее в корзину, и вы будете перенаправлены на страницу корзины.

Answer 1

https://i.imgur.com/Ye1FMTT.png

@media screen and (min-width: 1024px) {
    .woocommerce-cart form.woocommerce-cart-form, .cart-collaterals {
        display: inline-block;
        float: none;
        vertical-align: top;
        width: 49% !important;
        width: calc(50% - 2px) !important;
    }

    .woocommerce-cart .cart_totals {
        float: none !important;
        width: 100% !important;
        margin-left: 1px;
    }
}

Answer 2

вместо этого вы можете использовать flexbox, просто замените нижеприведенный код

.woocommerce-cart form.woocommerce-cart-form, .cart-collaterals {
    display: inline-block;
    float: none;
    vertical-align: top;
    width: 49% !important;
    width: calc(50% - 2px) !important;
}

на

.woocommerce{
    display: flex;
}

.woocommerce-cart .woocommerce-cart-form {
    width: 60% !important;
    margin-right: 5px;
}

.cart-collaterals {
    width: 40% !important;
}

flex box очень прост в использовании.

Answer 3

Быстрое решение может выглядеть следующим образом:

<form class="woocommerce-cart-form" action="https://test1.wpdevcloud.com/carrito/" method="post" 
    style="width: 66%; float: left;">
... 
</form>

<div class="cart-collaterals" style="width: 33%;float: left;">
    <div class="cart_totals " style="width: 100%;">
    ...
    </div>
</div>

Это может быть сделано лучше с помощью flexbox и т. Д., Но будеттребуется больше правок.