Bookings 예약 폼 필드 순서 바꾸기

예약 시 기간을 먼저 선택하게 돼 있어서 유저에게 혼동이 발생한다는 의견이 있어서 적용해 본 내용

● 기본 : 기간 선택 > 날짜 선택 > 시간 선택 > 예약 가격

● 변경 : 날짜 선택 > 기간 선택 > 시간 선택 > 예약 가격

css의 flex 속성을 이용하면 화면에 보이는 요소의 순서를 마음대로 바꿀 수 있는 점을 이용

#wc-bookings-booking-form {
    display: flex;
    flex-direction: column;
}
#wc-bookings-booking-form .wc-bookings-date-picker { order: 1; }
#wc-bookings-booking-form .wc_bookings_field_duration { order: 2; }
#wc-bookings-booking-form .form-field-wide { order: 3; }
#wc-bookings-booking-form .wc-bookings-booking-cost { order: 4; }

● 결과

Woocommerce Snippet