Come mettere 2 colonne nel checkout di woocommerce

 

Ecco il codice css per allineare in woocommerce le colonne nel checkou:

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

 }

}

Potete scaricare il plugin Custom CSS & JS per il inserire il codice, senza aver bisogno di editor esterni.

 

Suggerimenti:

Se il vostro CSS la .col-1 come 100%. Prova a realizzarlo al 48%:

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

e aggiungi questo a .col-2 anche al 48% e a destra:

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

 

In alternativa, se il tuo tema ha uno shortcode di colonna, sarebbe più semplice. Ecco come ho realizzato la stessa cosa con gli shortcode U-Design e nessun CSS.

[one_half]

[woocommerce_cart]

[/one_half]

 

[one_half_last]

[woocommerce_checkout]

[/one_half_last]

 

In alternativa potete usare Checkout Manager

Commenti

commenti

Autore dell'articolo: Web Master