Приветствую вас, дорогие друзья!
В этой статье я вам расскажу, как можно настроить под себя страницу оформления заказа в интернет магазине, созданном на WordPress при помощи плагина Woocommerce.
Изначально страница оформления заказа в Woocommerce выглядит следующим образом:
Здесь много различных полей и не всегда все эти поля нужны. Часто возникает необходимость какие-то из этих полей убрать, какие-то добавить, поменять их местами и т.д.
Навигация по статье:
Установка плагина Saphali Woocommerce Russian
Для реализации данной задачи можно использовать плагин Saphali Woocommerce Russian.
Устанавливается он аналогично любому другому плагину. И после установки и активации у нас в разделе Woocommerce появляется пункт Saphali WC Lite.
Для настройки и редактирования формы оформления заказов переходим в раздел «Управление полями».
Здесь мы видим список всех полей, которые у нас отображаются на странице по умолчанию.
Редактирование существующих полей
С данными полями мы можем делать следующие операции:
- 1.Перемещать и менять местами. Для этого наводим курсор на любое поле, при этом курсор у нас приобретает вид плюсика со стрелочками. Зажимаем левую кнопку мыши и перетаскиваем это поле туда, куда нам нужно.
- 2.Можно редактировать поля, изменять надпись. Для этого ставим курсор в поле, где указан заголовок и меняем его значение на своё
- 3.Удалять ненужные поля. Для удаления поля просто нажимаем на кнопку «Удалить», которая находится справа от названия данного поля.
- 4.Делать поля по одному или по 2 в строку. Для этого мы должны задать здесь соответствующий класс:
- Если задан класс form-row-first, то это значит, что поле будет идти на половину строки, при чем, оно будет идти первым.
- Если стоит класс form-row-last — это значит, что поле также будет идти на половину строки, он оно будет расположено последним. То есть вторым в строке.
- Если нужно сделать, что бы какое-то поле шло на ширину всей строки, то в поле «Класс поля» нужно поставить класс form-row-wide.
- 5.Так же, обращаю ваше внимание на столбец «Clear», если вы устанавливаете здесь галочку, то это будет указывать на то, что следующее поле будет начинаться с новой строки. Обычно, галочки здесь следует ставить тогда, когда в одной строке идет по два поля, и ставится она возле поля с классом form-row-last.
- 6.Так же вы можете сделать, что бы у вас в поле было задано значение по умолчанию. Например, для адреса здесь уже введен текст «Улица и т.д.». При этом на странице формы в данном поле будет по умолчанию отображается текст, который исчезает, когда покупатель начинает вводить свои данные.
- 7.Так же, вы можете выбрать тип поля. Это может быть:
- Select — раскрывающийся список
- Checkbox – это когда у вас доступно несколько вариантов, я человек ставит галочку
- Textarea — большое поле, в которое можно вводить какой-то более или мене большой текст
- Text – стандартное поле для ввода
- 8.Также можно выбирать обязательно ли данное поле для заполнения или нет, и публиковать это поле или нет.
Добавление новых полей
Если вам не достаточно тех полей, которые есть изначально и вы хотите добавить какое-то свое поле, то для этого:
- 1.Спускаемся вниз страницы и нажимаем на кнопку «Добавить»:
- 2.После этого сразу под уже существующими полями появляется новое, для которого можно задать название, значение по умолчанию, задать ему класс, ти поля и т.д.
- 3.После того, как вы задали все настройки, прокручиваем вниз и нажимаем на кнопку «Сохранить».
Если вы удалили какие-то поля, а затем решили, что вам нужно, что бы форма была снова такая же, как по умолчанию, то вы можете здесь, в самом низу нажать на кнопку «Восстановить поля по умолчанию». А затем, уже по новой, править те поля, которые вас интересуют.
Редактирование полей реквизитов доставки и дополнительных полей
Так же, в Woocommerce, когда человек оформляет заказ, и у вас в магазине настроены различные способы доставки, то ему еще высвечивается блок, в котором ему необходимо ввести адрес доставки. Так вот, поля для заполнения адреса доставки так же можно редактировать при помощи данного плагина.
Здесь есть вот такой раздел «Реквизиты доставки»:
И здесь, аналогично предыдущему, точно так же можем удалять, добавлять свои поля, менять их местами, указывать, обязательны ли они для заполнения, менять им классы и т.д.
Так же у нас есть возможность добавить дополнительные поля. По умолчанию это у нас идет поле «Примечания к заказу».
Мы можем здесь либо это поле удалить совсем, либо добавить сюда какие-то еще свои дополнительные поля.
Как сделать чтобы блоки формы размещались в один столбец?
Часто возникает необходимость сделать детали оплаты не в два столбца, как они сейчас расположены, а в один. Для этого мы можем в файл style.css вашей темы дописать несколько стилей для этих двух блоков. Прописывать стили мы можем:
- 1.При помощи встроенного редактора WordPress, который находится в разделе «Внешний вид» => «Редактор». Здесь нам нужно найти файл таблицы стилей style.css, и в самом конце файла прописать необходимый набор стилей.
- 2.Либо можно воспользоваться какой-то программой для редактирования кода с возможностью подключения к сайту по FTP. Я, например, обычно использую программу Notepad++.
Прежде всего, нам нужно задать им ширину сто процентов и убрать обтекание. Для этого припишем следующий код:
|
1 2 3 4 |
#customer_details, #order_review_heading, #order_review{ width:100%!important; float:none!important; } |
Там, конечно есть способ, как сделать так, что бы после обновления эти стили сохранялись, но я думаю, что ради двух столбцов мы не будем заморачиваться, и допишем все необходимые стили просто в файл стилей нашей темы.
Далее сохраняем изменения и смотрим, что получилось.
Если вы не хотите, что бы у вас этот блок занимал всю ширину страницы, то можно задать ему максимальную ширину в пикселях и выровнять этот блок по центру страницы.
Для этого припишем этим блокам еще два css-свойства, это свойство max-width, я задала здесь 900 пикселей, но вы можете задать ту ширину, которая вам нужна, и свойство margin: auto, которое позволяет выровнять эти блоки по центру страницы.
В сочетании с предыдущим кодом это будет выглядеть так:
width:100%!important;
float:none!important;
max-width:900px;
margin:auto!important;
}
Так же, сохраняем изменения и при обновлении получаем следующую картинку:
Ширина нашей форму уменьшилась и если вам нужно сделать ее чуть уже или чуть шире, то вы изменяете значение max-width. Его я пишу без правила !important, так как по умолчанию в стилях Woocommerce это значение не задается вовсе.
Названия идентификаторов блоков, для которых я прописываю данные стили я узнала при помощи инспектирования кода, и если вы хотите сделать это самостоятельно, и поменять стили для других элементов Woocommerce, то вам нужно перейти по этой ссылке и ознакомится с инструкцией, в которой я рассказываю, как это можно сделать.
Видеоинструкция
Если у вас остались какие-то вопросы по поводу изменения формы оформления заказов в плагине Woocommerce – оставляйте их в комментариях. Если данная статья была для вас полезно, не забудьте поделиться ею в социальных сетях.
На этом у меня все, спасибо за то, что посетили мой сайт, и до встречи в следующих статьях!
С уважением Юлия Гусарь
Статья супер.
А есть ли информация о смещении отображение товаров? (woocomerce plugin)
Не могу подыскать статью что бы товары отображались ровно
Здравствуйте, Александр!
Спасибо за комментарий!
Отображение товаров Woocommerce напрямую зависит от шаблона сайта. Дайте, пожалуйста, ссылку на сайт. Там обычно проблема решается правкий CSS стилей.
Спасибо большое, очень помогла информация. Вы не знаете, что за плагин используют тут — ссылка удалена Перед тем как закинуть в корзину обязательно пишется текст и отбражается его размер на товаре.
Это нужно для наглядного ввода текста на товаре, для гравировки
Спасибо…
Евгений, сайт, который Вы привели в качестве примера, работает не на WordPress. Поэтому определить этот плагин я не могу к сожалению :(
Добрый день. У меня на сайте при оформлении заказа можно выбрать Юр или физ лицо, а под ними идут поля для заполнения. А можно ли сделать так, что при выборе физ. лица, юр. лицо с полями становилось не активным и наоборот?
Здравствуйте! Вообще можно, но там, скорее всего, придётся скрипт писать.
Здравствуйте! Как сделать при оформлении заказа наценка по времени доставки? К примеру клиент заказал время доставки с 13:00 до 15:00 в это время +200р. а в ночное время +500р.
Добрый вечер! Установил плагин, но ни чего не изменилось… Плагин настраиваю, и просто по дефолту оставляю. Но как в корзине было, так и осталось. Корзина стоит
WP Menu Cart
Здравствуйте, Роман! Нужно более детально смотреть Ваш сайт.
Здравствуйте Юлия!
Спасибо за полезную статью!
Долго не мог найти информацию о том как на странице оформления заказа добавить поле «Отчество» для покупателя. По Вашей подсказке переименовал поле «Наименование организации», с помощью чего решил проблему отправки товара Почтой.
Хотел бы еще у Вас проконсультироваться: у меня интернет — магазин реализующий натуральную таёжную продукцию по России и другим странам taiga-sibiri.ru
Проблема заключается в настройке способов оплаты и доставки. При оформлении заказа нет возможности выбирать способы доставки (самовывоз, местная доставка, Почта России), хотя они мною все прописаны, автоматически встает тот способ который стоит первым в настройках «Зона доставки».
Подскажите от чего это зависит и как можно исправить, чтобы у покупателя была реальная возможность выбрать тот способ доставки и оплаты который ему нужен.
Заранее благодарю за ответ!
Здравствуйте, Юлия!
У вас большой опыт в сайтостроении, в т.ч. и магазинов
Подскажите, пожалуйста, простую и легкую тему WordPress для магазина на русском языке.
Можно вот эту тему взять: i-Craft она есть в репозитории WordPress
Спасибо, Юлия!
А подскажите, пожалуйста, как сделать выпадающий список с категориями товаров? Может у вас на сайте есть такая информация, или ссылку какую посоветуете…
Добрый день, при попытке сохранить сделанные изменения, все изменения сбрасываются. В чем может быть проблема?
А как вы сохраняете?
Приветствую. Возможно ли добавить новое поле с типом данных число? Например, чтобы добавить поле «количество персон» в оформление заказа.
Для своей задачи мы можете использовать тип поля «Текст». К сожалению числового типа для полей не предусмотрено.
Добрый день. А что делать со смещением полей «доставка», «товары» и «оплата» куда то далеко вправо? Подскажите пожалуйста. Сайт на WP плагины, которые вы используете установлены
Дайте ссылку
Юлия добрый день, при оформлении заказа на интерент магазине пишет
«К сожалению, у нас не предусмотрены методы оплаты, подходящие для вашего региона. Пожалуйста, свяжитесь с нами если вам необходима консультация или специальные условия.»
Тема вордпрес THE7 , можно ли сделать что бы заказ просто приходил на почту, и не высвечивалась эта надпись. Заранее спасибо. Сайт — http://ковка57.рф/korzina/
Вам нужно в настройках Woocommerce выставить оплату при получении. Тогда это сообщение выводиться не будет. Другие способы оплаты можно скрыть.
Добрый день, Юлия. У меня та же проблема. Все сделал так, как советуете, но надпись осталась.
Добрый день, Руслан! И как вы решили проблему? Передо мной стоит такая же проблема, ищу выход))
Добрый день, Юля!
Спасибо за полезную статью!
Я делаю магазин, в котором будут продаваться и физические и цифровые товары.
Платформа: WordPress плюс Woocommerce, также установил Booster for WooCommerce.
Не подскажете, как сделать разные формы оформления заказа для цифровых и для физических товаров? В случае с цифровыми товарам не нужны поля с адресом, и многие другие. Желательно, чтобы при получении цифрового товара покупатель заполнял минимум полей (электронный адрес и свой ник, или, в случае зарегистрированного пользователя, просто залогиниться и товар будет доступен для скачивания после оплаты без заполнения форм). Для физических же товаров необходимо оставить набор полей.
В Woocommerce по умолчанию одна страница для оформления заказа. Единственное, что я могу вам по советовать, попробуйте поискать плагины для создания отдельных страниц оформления заказа для разных групп товаров.
Здравствуйте! Подскажите пожалуйста, почему заданные новые поля не отображаются в админке, в разделе редактирования заказа?
У вас вообще ни какие поля не отображаются, или только некоторые?
у меня так же не отображаются новые поля, после добавления в админке.
https://yadi.sk/i/igERteUHwEH7gA
https://yadi.sk/i/eDQotff0kv_5lA
https://yadi.sk/i/njNKO93ALPAewA
Прошу подсказать куда копать и где редактировать.
Юлия, спасибо за информацию. Пытаюсь сделать поля в один столбец. Использую код, который вы указали. Вставляю в style.css через встроенный редактор (тема Divi). Почему-то ничего не меняется. Пробовал также через плагин Custom CSS — тоже никак. Вроде бы всё просто, даже не знаю в чём может быть дело. Может подскажете?
Должны работать. Дайте ссылку на страницу, я посмотрю стили.
Вот, посмотрите https://kalitoys.ru. Чтобы на страницу оформления заказа перейти любой товар добавьте в корзину.
Попробуйте дописать такие стили:
#customer_details .col-1, #customer_details .col-2{
width:100%!important;
float:none!important;
}
Я попробовала их дописать для вашей страницы, они работают. Нужно добавить их в файл стилей.
Не совсем понял, вдобавок дописать, т.е. так, например:
#customer_details, #order_review_heading, #order_review{
width:100%!important;
float:none!important;
max-width:900px;
margin:auto!important;
}
#customer_details .col-1, #customer_details .col-2{
width:100%!important;
float:none!important;
}
Или вместо первого кода?
Попробовал оба варианта — не меняется ничего((
Всё, заработало! Добавил код через плагин стилей. А в редакторе темы почему-то не работало(
Здравствуйте, подскажите пожалуйста. Добавляю поле в «Дополнительные поля»и после сохранение оно пропадает. В «Реквизиты оплаты» поля прекрасно сохраняются .
Это глюк плагина. Иногда такое бывает. Как вариант можно попробовать восстановить поля по умолчанию и по новой добавлять нужные поля, а лучше изменять значения уже существующих. Хотя дать гарантии что это поможет я не могу.
Добрый день Юлия.
На странице оформление заказа, не отображаются поля заполнения. Все перепробовал, в чем может быть причина?
Здравствуйте, Влад!
Похоже на какой то глюк. А сами метки для полей отображаются (Фамилия, Имя и т.д.)?
Можете скриншот прислать?
Здраствуйте! Подскажите пожалуйста, как добавить в оформление заказа еще пункт доставки (У меня стоит доставка, курьером, почтой и самовывоз, нужно еще добавить самовывоз по другому адресу), добавляю его как вы описали, но оно не появляется в оформлении заказа. Также пробовал в WooCommerce — настройки — доставка, тоже там добавлял новый тип доставки, но не появляется. Объясните пожалуйста, что я не так делаю?
Здравствуйте, Олег!
Нужно более детально смотреть Ваш сайт, настройки и т.д. Причин может быть много.
Добрый день, Юля. Как убрать надпись «Детали оплаты»?
Здравствуйте, Руслан!
Как вариант, можно скрыть в CSS, присвоив нужному классу свойство display:none;
По определению класса или идентификатора элемента у меня есть отдельная статья //impuls-web.ru/kak-opredelit-id-i-klass-elementa-na-stranice/
Юлия, помогите с настройкой оформления заказа)
Здравствуйте, Руслан! А что именно не получается?
Не плохо получилось
. Возьму себе на заметку!
Спасибо!
Здравствуйте! Может вы знаете о такой проблеме. Подключил к Woocommerce плагин робокассы, на сайте у робокассы все настроил. Магазин активен. Но когда я пробую оплатить заказ у себя на сайте, то выходит следующее:
{«result»:»failure»,»messages»:»\n\t<div class=\»woocommerce-error alert alert_error\» role=\»alert\»>\n\t\t<div class=\»alert_icon\»><i class=\»icon-alert\»><\/i><\/div>\n\t\t<div class=\»alert_wrapper\»>\u041c\u044b \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u0430\u0448 \u0437\u0430\u043a\u0430\u0437. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0435\u0449\u0451 \u0440\u0430\u0437.<\/div>\n\t\t<a class=\»close\» href=\»#\»><i class=\»icon-cancel\»><\/i><\/a>\n\t<\/div>\n»,»refresh»:true,»reload»:false}
Информации вообще по этой ошибке нигде нет… что за беда((
Благодарю за детальную, пошаговую инструкцию!
Приветствую.
Кто нибудь сталкивался с этими ошибками ?
Warning: Invalid argument supplied for foreach() in /home/obyavkab/public_html/wp-content/plugins/saphali-woocommerce-lite/saphali-woocommerce-lite.php on line 932Warning: Invalid argument supplied for foreach() in /home/obyavkab/public_html/wp-content/plugins/saphali-woocommerce-lite/saphali-woocommerce-lite.php on line 945
Они отображаются при сохранении формы после редактирования http://prntscr.com/kt0nnn
вот 932 строка
foreach($checkout_fields[«billing»][$key][‘payment_method’] as $k => $v) {
и 945 строка
foreach($checkout_fields[«billing»][$key][‘shipping_method’] as $k => $v) {
Юлия, здравствуйте. А как вы перевод сделали на русский язык кнопки «Continue to payment»
В вашем примере это — подтвердить заказ — кнопка на черном фоне.
Никак не могу где тот файл который нужно править…
Здравствуйте, Юлия!
Скажите пожалуйста, для корректировки стилей css для формы contact 7 и формы заполнения заказа (woocommerce), какая папка в FTP должна быть? В редакторе (настройке) очень непонятно. Их нужно искать в plugins?
Спасибо!
Здравствуйте, Вадим! Для правок стилей можно использовать файл стилей темы. Он находится по следующему адресу:
wp-content/themes/название-Вашей-темы/style.css
Здравствуйте, а как сделать предупреждающее окно для покупателей, если они с другого города, так как для иногородних у нас 100% оплата.
хотелось бы их предупредить, если они жители другого города, то им надо будет сначала оплатить товар + пересылку)
очень часто люди этого не знают и тупо отказываться, а так будет окно с предупреждением)
Спасибо
Здравствуйте, Юля. Подскажите, как можно вывести в корзине вес каждого товара и сумму?
Хороший материал. Спасибо!
Спасибо, Виталий!
Юлия, спасибо, попробовала вставить код, это работает. Но мне не нужно в 1 столбец эти блоки, они слишком далеко вниз прокручиваются. А вот как поменять пропорцию между блоками Оплата и доставка и Ваш заказ. У меня «Оплата и доставка» занимает 40% ширины экрана, «Ваш заказ» с описанием методов доставки 20% а остальное пустота. Как мне расширить блок Ваш заказ вширину? Есть какой то код для этого? Спасибо большое.
Супер материал!!!! СПАСИБО!!!
Спасибо, Евгения!
Подскажите, можно ли сделать данным плагином Чекбокс с поиском?
Получается выпадает список со станциями метро и как сделать поиск, а то выбирать очень неудобно.
Спасибо, добрый человек, а то месяц мастера ждала, а он все никак, теперь сам все сделал. Низкий поклон.
Спасибо, Алексей!
добрый день. скажите пож-ста как решить проблему. Мультиязычность на сайте реализована с помощью Polylang и когда настраиваешь поля с помощью этого плагина то он не переводит на другие языки названия полей. Что нужно сделать чтобы они переводились автоматически?
скажите пож-ста где плагин хранит информацию в базе данных?
В базе данный в соответствующей таблице.
Юля,здравствуйте! А как в форме заказа поменять главные названия? У меня на сайте заказываешь товар и открывается анкета для заполнения. Оглавление: «Оформление заказа», а под ним — «Детали оплаты» (выделено жирно) далее анкета для заполнения фио, адреса и тд. с боку зачем-то «Доставка по другому адресу?» (выделено жирным) да еще отмечено галочкой.
Как мне удалить эти оглавления «Детали оплаты» и «Доставка по другому адресу?»
Не могу найти, где это…
За раннее благодарю!
Добавил дополнительное поле Instagram account в Billing адрес. В админки и на счетах это поле отображается почему-то в самом верху и дублируется 3 раза.
1. Как его убрать дублирование поле в админке?
2. Как убрать на счетах это поле полностью?
Скриншот: http://joxi.ru/ZrJNkZpFwGzKwr
Добрый день, Юлия!
Статья очень хорошая, но у меня совсем другой вопрос, хочу настроить форму на перевод данных в скрипт и при получении от пользователя успешной проверки дать ему авторизацию(временную), есть ли возможность с вами связаться ?
подскажите. поставил плагин в настройках вукомерса указал станицу [woocommerce_checkout], но изменений страницы никаких. будто плагин а не ставил.
Здравствуйте! А зачем Вы в настройках Woocommerce указывали страницу [woocommerce_checkout] ? Разве она у Вас изначально не создалась автоматически? URL адрес для страницы оформления заказа у Вас стандартный или Вы самостоятельно создали страницу и добавили на нее шорткод [woocommerce_checkout] ?
Юлия, добрый день! Подскажите, пожалуйста, как настроить стиль кнопок в товарах? Чтобы красиво было? Атрибуты прижимаются к вариациям очень близко.
Здравствуйте, Лидия! Настроить стили кнопок можно при помощи CSS. У меня на блоге есть следующие статьи, которые могут Вам помочь:
Три лучших онлайн-генератора CSS-стилей для кнопок
Основы CSS. Базовые свойства
Как определить ID и класс элемента на странице?
А можно ли добавить разные поля для разных видов товаров?
К сожалению, нет!
Добрый вечер! Делаю интернет-магазин по продаже услуг страхования и суть моего вопроса такая: как сделать, что бы при добавлении страховок допустим на 3 человека появлялись дополнительные поля для заполнения? Подскажите пожалуйста, кто знает.
Здравствуйте, Виктор! Стандартными средствами плагинов такого не сделать! Нужно дописывать скрипты чтобы сделать такой функционал.
А можно сделать так, чтобы после заполнения всех полей и оплаты покупки можно было бы скачать PDF счет прямо на странице, а не с e-mail?
Есть плагин WooCommerce PDF Invoices & Packing Slips, который позволяет формировать счет в PDF, но я не помню с какой страницы он разрешает скачивать PDF. Нужно тестировать.
Жалко что WP и WC делали разные люди. Если WP очень хорошо поддаётся макетированию, вёрстке, то у WC не всё так однозначно. В частности я себе делаю впервые магазин, и вникнуть в структуру страницы оформления заказа — это невозможность какая-то) И всё накаляет ещё то, что я не сторонник всяческих плагинов, предпочитаю искать решения в сети.
С уважением к вам и вашему творчеству на вордпрессе — Алексей.
Алексей, спасибо за Ваш комментарий!