Strona zamówienia w dwóch kolumnach

Podzielę się dzisiaj z Wami rozwiązaniem na dwukolumnową stronę checkoutu w Woocommerce. Zwykle motywy mają standardową stronę realizacji zamówienia – po lewej pola płatnika, po prawej pola na wysyłkę i dodatkowe informacje – wyjątkiem jest np. motyw Astra – on ma fajną stronę checkoutu. Często dostaję zapytania czy da się coś z tym zrobić by to wyglądało tak, że pola będą po lewej a podsumowanie zamówienia i wybór płatności po prawej. Czy da się? Oczywiście!

Uwaga! Nie bójcie się nie będzie grzebania w kodzie 🙂 Wystarczy sam CSS – jeśli nie wiesz co to to zapraszam do wpisu  “Co to jest CSS”. Za pomocą CSS można zrobić – no może nie cuda – ale różne ciekawe triki i jednym z nich jest właśnie dwukolumnowa strona zamówienia.

Standardowo wygląda tak:

Będzie to wyglądać o mniej więcej TAK:

Fajnie prawda? Jak to zrobić? Nic trudnego. Jeśli macie standardowy układ checkout’u to wklejcie tylko w Wygląd – Dostosuj – Dodatkowy CSS (lub inne pole na własny CSS – zależy jaki macie motyw) następujące style:

body #add_payment_method #payment ul.payment_methods li input,
body.woocommerce-cart #payment ul.payment_methods li input,
body.woocommerce-checkout #payment ul.payment_methods li input 
{ width: auto; margin: -2px 10px 0 0; }

body .woocommerce form .form-row .input-checkbox 
{ width: auto; margin: -2px 5px 0 0; }

body .woocommerce table.shop_table td { padding: 15px; }

.woocommerce table.shop_table { border: 1px solid #ededed; }
.woocommerce table.shop_table .order-total td 
{ border-top:  1px solid #ededed; }

body .woocommerce #payment #place_order, 
.woocommerce-page #payment #place_order 
{
	width: 100%;
	display: block;
	text-align: center;
	margin-bottom: 0;
	font-size: 18px;
	border-radius: 0px;
	margin-top: 20px;
}

body .woocommerce form .form-row-first, 
body .woocommerce form .form-row-last, 
body .woocommerce-page form .form-row-first, 
body .woocommerce-page form .form-row-last 
{ width: 49%; }

.woocommerce-checkout .woocommerce .col2-set 
{ width: 48%; float: left; margin-right: 4%; }

.woocommerce-checkout .woocommerce .col2-set .col-1, 
.woocommerce-checkout .woocommerce .col2-set .col-2 
{ margin-bottom: 20px; width: 100%; float: none; }

.woocommerce-checkout #order_review_heading, 
.woocommerce-checkout #order_review 
{ background: #fff; width: 48%; float: right; margin-right: 0; }

#order_review_heading { margin-top: 20px; }

@media only screen and (max-width: 650px) {
.woocommerce-checkout .woocommerce .col2-set 
{ width: 100%; float: none; margin-right: 0; }
.woocommerce-checkout #order_review_heading, 
.woocommerce-checkout #order_review 
{ width: 100%; float: none; }
}

Jeśli macie niestandardowy układ strony zamówienia to wpadajcie na grupę Zostań specką dopasujemy wspólnie kod konkretnie pod dany motyw 🙂