Двухколоночная касса Woocommerce - PullRequest
Новая
       8

Двухколоночная касса Woocommerce

0 голосов
/ 25 апреля 2018

Мне нравится оформлять заказ в две колонки на www.narwal.shop/checkout

Я применил следующий код: 

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 993px) {

    /* ---------------------
        WOOCOMMERCE
        --------------------- */
        body .woocommerce .col2-set .col-1{width:100%;}
        .woocommerce-billing-fields h3{margin-top:40px;}
        .woocommerce .col2-set, .woocommerce-page .col2-set{width:48%;float:left;}
        #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review{float:left;width:48%;margin-left:2%;}

}

Они идеально выровнены рядом друг с другом (За исключением заголовка "Ваш заказ", я хочу, чтобы они были только рядом друг с другом. Помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

Кроме того, если ваша тема имеет короткие коды столбцов, это будет проще.Вот как я сделал то же самое с шорткодами U-Design и без CSS. 

[one_half]
[woocommerce_cart]
[/one_half]

[one_half_last]
[woocommerce_checkout]
[/one_half_last]
0 голосов
/ 25 апреля 2018

Ваш CSS устанавливает .col-1 на 100%. Попробуйте сделать это 48%: 

body .woocommerce .col2-set .col-1 { width: 48%; }

и добавьте это к .col-2, чтобы оно также составляло 48% и плавало вправо: 

body .woocommerce .col2-set .col-2 { width: 48%; float: right;}

плюс удалите всю эту строку, так как это сделает содержащийся div шириной 48%:

.woocommerce .col2-set, .woocommerce-page .col2-set{width:48%;float:right;}

...