/ / Two Column Checkout Woocommerce - css, wordpress, woocommerce, pokladňa

Dva stĺpce Checkout Woocommerce - css, wordpress, woocommerce, pokladňa

Rád by som na stránke www.narwal.shop/checkout získal dve stĺpce

Použil som nasledujúci kód:

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

}

Sú dokonale zarovnané vedľa seba (s výnimkou nadpisu "Vaša objednávka", len ich chcem vedľa seba.

odpovede:

0 pre odpoveď č. 1

Vaša CSS nastavuje. Col-1 na 100%. Skúste to dosiahnuť 48%:

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

a pridajte to do .col-2 takisto 48% a plaťte správne:

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

plus odstráňte celú líniu tak, aby sa šírka obsahovala aj 48% široká:

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


0 pre odpoveď č. 2

Prípadne, ak má vaša tému stĺpcové skratky, bolo by to jednoduchšie. Tu je, ako som dosiahla to isté s krátkymi kódmi U-Design a bez CSS.

[one_half]
[woocommerce_cart]
[/one_half]

[one_half_last]
[woocommerce_checkout]
[/one_half_last]