Настройка полей оформления заказа Woocommerce

order-fild-min

Приветствую вас, дорогие друзья!

В этой статье я вам расскажу, как можно настроить под себя страницу оформления заказа в интернет магазине, созданном на WordPress при помощи плагина Woocommerce.

Изначально страница оформления заказа в Woocommerce выглядит следующим образом:

форма оформления заказа в Woocommerce

Здесь много различных полей и не всегда все эти поля нужны. Часто возникает необходимость какие-то из этих полей убрать, какие-то добавить, поменять их местами и т.д.

Установка плагина Saphali Woocommerce Russian

Для реализации данной задачи можно использовать плагин Saphali Woocommerce Russian.

Устанавливается он аналогично любому другому плагину. И после установки и активации у нас в разделе Woocommerce появляется пункт Saphali WC Lite.

плагин Saphali Woocommerce Russian

Для настройки и редактирования формы оформления заказов переходим в раздел «Управление полями».

управление полями в Woocommerce

Здесь мы видим список всех полей, которые у нас отображаются на странице по умолчанию.

Редактирование существующих полей

С данными полями мы можем делать следующие операции:

  1. 1.Перемещать и менять местами. Для этого наводим курсор на любое поле, при этом курсор у нас приобретает вид плюсика со стрелочками. Зажимаем левую кнопку мыши и перетаскиваем это поле туда, куда нам нужно.
  2. 2.Можно редактировать поля, изменять надпись. Для этого ставим курсор в поле, где указан заголовок и меняем его значение на своё
  3. изменения надписи полей
  4. 3.Удалять ненужные поля. Для удаления поля просто нажимаем на кнопку «Удалить», которая находится справа от названия данного поля.
  5. 4.Делать поля по одному или по 2 в строку. Для этого мы должны задать здесь соответствующий класс:
    • Если задан класс form-row-first, то это значит, что поле будет идти на половину строки, при чем, оно будет идти первым.
    • Если стоит класс form-row-last — это значит, что поле также будет идти на половину строки, он оно будет расположено последним. То есть вторым в строке.
    • Если нужно сделать, что бы какое-то поле шло на ширину всей строки, то в поле «Класс поля» нужно поставить класс form-row-wide.
    изменение расположения полей
  6. 5.Так же, обращаю ваше внимание на столбец «Clear», если вы устанавливаете здесь галочку, то это будет указывать на то, что следующее поле будет начинаться с новой строки. Обычно, галочки здесь следует ставить тогда, когда в одной строке идет по два поля, и ставится она возле поля с классом form-row-last.
    поле с новой строки
  7. 6.Так же вы можете сделать, что бы у вас в поле было задано значение по умолчанию. Например, для адреса здесь уже введен текст «Улица и т.д.». При этом на странице формы в данном поле будет по умолчанию отображается текст, который исчезает, когда покупатель начинает вводить свои данные.
  8. 7.Так же, вы можете выбрать тип поля. Это может быть:
    • Select — раскрывающийся список
    • Checkbox – это когда у вас доступно несколько вариантов, я человек ставит галочку
    • Textarea — большое поле, в которое можно вводить какой-то более или мене большой текст
    • Text – стандартное поле для ввода
    изменение типа поля
  9. 8.Также можно выбирать обязательно ли данное поле для заполнения или нет, и публиковать это поле или нет.
    поле обязательное для заполнения

Добавление новых полей

Если вам не достаточно тех полей, которые есть изначально и вы хотите добавить какое-то свое поле, то для этого:

  1. 1.Спускаемся вниз страницы и нажимаем на кнопку «Добавить»:
    добавление поля
  2. 2.После этого сразу под уже существующими полями появляется новое, для которого можно задать название, значение по умолчанию, задать ему класс, ти поля и т.д.
  3. 3.После того, как вы задали все настройки, прокручиваем вниз и нажимаем на кнопку «Сохранить».

Если вы удалили какие-то поля, а затем решили, что вам нужно, что бы форма была снова такая же, как по умолчанию, то вы можете здесь, в самом низу нажать на кнопку «Восстановить поля по умолчанию». А затем, уже по новой, править те поля, которые вас интересуют.

восстановить поля по умолчанию

Редактирование полей реквизитов доставки и дополнительных полей

Так же, в Woocommerce, когда человек оформляет заказ, и у вас в магазине настроены различные способы доставки, то ему еще высвечивается блок, в котором ему необходимо ввести адрес доставки. Так вот, поля для заполнения адреса доставки так же можно редактировать при помощи данного плагина.

Здесь есть вот такой раздел «Реквизиты доставки»:

редактирование полей доставки

И здесь, аналогично предыдущему, точно так же можем удалять, добавлять свои поля, менять их местами, указывать, обязательны ли они для заполнения, менять им классы и т.д.

Так же у нас есть возможность добавить дополнительные поля. По умолчанию это у нас идет поле «Примечания к заказу».

Мы можем здесь либо это поле удалить совсем, либо добавить сюда какие-то еще свои дополнительные поля.

Как сделать чтобы блоки формы размещались в один столбец?

Часто возникает необходимость сделать детали оплаты не в два столбца, как они сейчас расположены, а в один. Для этого мы можем в файл style.css вашей темы дописать несколько стилей для этих двух блоков. Прописывать стили мы можем:

  1. 1.При помощи встроенного редактора WordPress, который находится в разделе «Внешний вид» => «Редактор». Здесь нам нудно найти файл таблицы стилей style.css, и в самом конце файла прописать необходимый набор стилей.
    редактор кода WordPress
  2. 2.Либо можно воспользоваться какой-то программой для редактирования кода с возможностью подключения к сайту по FTP. Я, например, обычно использую программу Notepad++.

Прежде всего, нам нужно задать им ширину сто процентов и убрать обтекание. Для этого припишем следующий код:

При этом, обращаю ваше внимание, что все стили мы будем задавать с правилом !important потому, что базовые стили для элементов Woocommerce задаются в файле стилизации данного плагина. Туда мы вносить изменения не будем, по той простой причине, что при обновлении плагина у вас все прописанные стили просто сотрутся.
Там, конечно есть способ, как сделать так, что бы после обновления эти стили сохранялись, но я думаю, что ради двух столбцов мы не будем заморачиваться, и допишем все необходимые стили просто в файл стилей нашей темы.

Далее сохраняем изменения и смотрим, что получилось.

Если вы не хотите, что бы у вас этот блок занимал всю ширину страницы, то можно задать ему максимальную ширину в пикселях и выровнять этот блок по центру страницы.

Для этого припишем этим блокам еще два css-свойства, это свойство max-width, я задала здесь 900 пикселей, но вы можете задать ту ширину, которая вам нужна, и свойство margin: auto, которое позволяет выровнять эти блоки по центру страницы.

В сочетании с предыдущим кодом это будет выглядеть так:

#customer_details, #order_review_heading, #order_review{
width:100%!important;
float:none!important;
max-width:900px;
margin:auto!important;
}

Так же, сохраняем изменения и при обновлении получаем следующую картинку:

измененные поля формы заказа

Ширина нашей форму уменьшилась и если вам нужно сделать ее чуть уже или чуть шире, то вы изменяете значение max-width. Его я пишу без правила !important, так как по умолчанию в стилях Woocommerce это значение не задается вовсе.

Названия идентификаторов блоков, для которых я прописываю данные стили я узнала при помощи инспектирования кода, и если вы хотите сделать это самостоятельно, и поменять стили для других элементов Woocommerce, то вам нужно перейти по этой ссылке и ознакомится с инструкцией, в которой я рассказываю, как это можно сделать.

Видеоинструкция

Если у вас остались какие-то вопросы по поводу изменения формы оформления заказов в плагине Woocommerce – оставляйте их в комментариях. Если данная статья была для вас полезно, не забудьте поделиться ею в социальных сетях.

На этом у меня все, спасибо за то, что посетили мой сайт, и до встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

4 комментария

  1. Статья супер.

    А есть ли информация о смещении отображение товаров? (woocomerce plugin)

    Не могу подыскать статью что бы товары отображались ровно

    • Здравствуйте, Александр!
      Спасибо за комментарий!
      Отображение товаров Woocommerce напрямую зависит от шаблона сайта. Дайте, пожалуйста, ссылку на сайт. Там обычно проблема решается правкий CSS стилей.

  2. Спасибо большое, очень помогла информация. Вы не знаете, что за плагин используют тут — ссылка удалена Перед тем как закинуть в корзину обязательно пишется текст и отбражается его размер на товаре.

    Это нужно для наглядного ввода текста на товаре, для гравировки

    Спасибо…

    • Евгений, сайт, который Вы привели в качестве примера, работает не на WordPress. Поэтому определить этот плагин я не могу к сожалению :(

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif