По умолчанию у нас за вид страницы оформления заказа отвечает файл form-checkout.php в папке woocommerce в корне вашей темы.
Изначально он имеет вид:
form-checkout.php
<?php
/**
* Checkout Form
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.5.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
do_action( 'woocommerce_before_checkout_form', $checkout );
// If checkout registration is disabled and not logged in, the user cannot checkout.
if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
echo esc_html( apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) ) );
return;
}
?>
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<?php if ( $checkout->get_checkout_fields() ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<div class="col2-set" id="customer_details">
<div class="col-1">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
</div>
<div class="col-2">
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
<h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</form>
<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
Изначально вид нашей странице разбит на две колонки, если мы хотим все разместить в одну колонку, то внесем небольшие изменения в этот файл.
Изменения
<div class="col2-set" id="customer_details">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
Так же, если не нужно для сайта "Другой адрес для доставки" мы в настройках WooCommerce, в разделе "Доставка", "Назначение доставки" делаем "Принудительная доставка по платёжному адресу клиента".
Для этого установим плагин "Saphali WC". Далее перейдем в раздел WooCommerce и подраздел "Saphali WC". В этом разделе мы и будем вносить изменения в составляющую формы Оформления заказа.
При этом, поле "billing_country" обязательно оставляем, но если он не нужен, скрываем с помощью css. Потому что без него возможна ошибка при оформлении заказа.
Так же поля можно убрать с помощью хуков. Разместим в function.php код, где поправим нущные нам поля, но "billing_country" лучше оставить.
код
add_filter( 'woocommerce_checkout_fields', 'truemisha_del_fields', 25 );
function truemisha_del_fields( $fields ) {
// оставляем эти поля
// unset( $fields[ 'billing' ][ 'billing_first_name' ] ); // имя
// unset( $fields[ 'billing' ][ 'billing_last_name' ] ); // фамилия
// unset( $fields[ 'billing' ][ 'billing_phone' ] ); // телефон
// unset( $fields[ 'billing' ][ 'billing_email' ] ); // емайл
// удаляем все эти поля
unset( $fields[ 'billing' ][ 'billing_company' ] ); // компания
unset( $fields[ 'billing' ][ 'billing_country' ] ); // страна
unset( $fields[ 'billing' ][ 'billing_address_1' ] ); // адрес 1
unset( $fields[ 'billing' ][ 'billing_address_2' ] ); // адрес 2
unset( $fields[ 'billing' ][ 'billing_city' ] ); // город
unset( $fields[ 'billing' ][ 'billing_state' ] ); // регион, штат
unset( $fields[ 'billing' ][ 'billing_postcode' ] ); // почтовый индекс
unset( $fields[ 'order' ][ 'order_comments' ] ); // заметки к заказу
return $fields;
}
Пример 1
/*СТИЛИ ОФОРМЛЕНИЯ ЗАКАЗА*/
#post-14 .entry-title {
display: none;}
#post-14 .entry-footer {
display: none;}
#place_order {
text-decoration: none;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: Verdana;
font-size: 17px;
line-height: 1.3;
border: 2px solid #a2000d;
background-color: #a2000d!important;
color: #ffffff;
transition: 0.5s;}
#place_order:hover {
box-shadow: 0 0 15px 6px #0000001f;
transition: 0.5s;}
.woocommerce-privacy-policy-text p {
font-size: 17px;}
.woocommerce-billing-fields__field-wrapper label {
margin: 0 0 5px 0;
font-size: 15px;
font-weight: 700;
line-height: 1!important;}
.woocommerce-billing-fields__field-wrapper input {
padding: 10px;
border: 2px solid #a2000d;
border-radius: 5px;
width: 100%;
font-size: 15px;
font-family: Verdana;}
.woocommerce-additional-fields label {
margin: 0 0 5px 0;
font-size: 15px;
font-weight: 700;
line-height: 1!important;}
.woocommerce-additional-fields textarea {
padding: 10px;
border: 2px solid #a2000d;
border-radius: 5px;
width: 100%;
font-size: 15px;
font-family: Verdana;}
.woocommerce table.shop_table {
border: 2px solid #a2000d;}
p.address-field {
display: none;}
#wc_checkout_add_ons {
border: 2px solid #008036;
border-radius: 5px;
margin: 30px 0 0 0;
padding: 7px;}
#wc_checkout_add_ons span.description {
font-size: 16px;}
#wc_checkout_add_ons label.checkbox {
color: #008036;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;}
#orddd-lite-checkout-fields input.hasDatepicker {
padding: 10px;
border: 2px solid #008036;
border-radius: 5px;
width: 100%;
font-size: 15px;
font-family: 'Ubuntu-Regular';}
#orddd-lite-checkout-fields label {
margin: 0 0 5px 0;
font-family: 'Ubuntu-Regular';
font-size: 15px;
font-weight: 700;
line-height: 1!important;}
.orddd_lite_field_note {
font-size: 16px!important;}
И если не добавляли стилистику для сообщений в корзине то добавим и ее.
CSS
/*СТИЛИ ДЛЯ СООБЩЕНИЙ*/
a.shipping-calculator-button {
color: #a2000d;}
.woocommerce-message {
border-top-color: #a2000d!important;}
.woocommerce-message::before {
color: #a2000d!important;}
.woocommerce-info {
border-top-color: #a2000d!important;
line-height: 1;}
.woocommerce-info::before {
color: #a2000d!important;}