Как создать временную шкалу потока корзины WooCommerce в Divi

WooCommerce — один из самых популярных плагинов электронной коммерции для WordPress. Чтобы помочь в этом, Divi выпустила ряд новых модулей, ориентированных на Woo, которые дают вам больше свободы при создании стандартных страниц WooCommerce. В сегодняшней публикации мы поработаем над созданием временной шкалы корзины WooCommerce для Divi . Мы разработаем визуальное изображение пути пользователя за этот период. Путь пользователя от магазина до кассы должен быть наглядно отображен.

Предварительный просмотр дизайна

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

Кроме того, вот так будет выглядеть наша страница оформления заказа.

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

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Установите шаблон

Перейдите к конструктору тем Divi в бэкэнде веб-сайта WordPress, чтобы загрузить шаблон.

Затем в правом верхнем углу появится значок с двумя стрелками. Переключите значок.

Нажмите «Импорт шаблонов Divi Theme Builder» после загрузки файла JSON, который вы скачали из этого поста, на вкладку импорта.

Вы увидите новую корзину, кассу и шаблон магазина, когда загрузите файл. Как только вы захотите активировать шаблоны, сохраните свои изменения в Divi Theme Builder.

Создайте временную шкалу корзины WooCommerce

В следующем разделе нашего сообщения в блоге будет показано, как воссоздать временную шкалу корзины WooCommerce для Divi, если вы ищете более сложную задачу. Процедуры, описанные в этом руководстве, можно использовать для создания уникальной временной шкалы корзины. Используйте это как мотивацию для ваших последующих усилий WooCommerce и Divi! Вот как будет выглядеть временная шкала корзины WooCommerce, которую мы будем строить:

Давайте начнем теперь, когда у нас есть визуальное представление того, что мы будем создавать!

Настройка конструктора тем Divi

Эти шаблоны, которые мы будем разрабатывать, повлияют на страницы оформления заказа и корзины WooCommerce. Итак, мы начинаем работать над нашим проектом в конструкторе тем Divi.

На карточке «Добавить новый шаблон» щелкните знак «плюс».

Далее выберите «Создать новый шаблон».

После этого вам будет показано модальное окно со списком всех различных заданий, которые вы можете прикрепить к новому шаблону, который вы создаете. В этом случае мы создадим шаблон для страницы корзины магазина WooCommerce. Итак, перейдите к заголовку WooCommerce в модальном окне и нажмите «Корзина». После выбора выберите Создать шаблон. Делая это, мы помечаем страницу корзины новым созданным шаблоном.

Для разработки шаблона оформления заказа мы будем следовать аналогичной процедуре. На карточке «Добавить новый шаблон» щелкните знак «плюс».

Выберите «Создать новый шаблон» еще раз.

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

Теперь мы можем сохранить наши шаблоны корзины и оформления заказа после их создания. В верхней части конструктора тем Divi нажмите зеленую кнопку «Сохранить изменения».

Создание потока корзины WooCommerce

Веселье начинается сейчас! Мы собираемся начать составлять график движения корзины на странице корзины. Для этого мы открываем только что созданный шаблон корзины и нажимаем кнопку «Добавить пользовательское тело».

Мы собираемся выбрать кнопку «Создать собственное тело», которая появляется в модальном окне, точно так же, как мы делали это при создании этих шаблонов и их назначений.

Новый раздел и строка

Теперь, когда мы находимся в Divi Builder, мы создадим новую строку. В этой строке будет пять столбцов.

В столбцы 1, 3 и 5 новой строки добавьте три модуля Blurb.

Следуйте настройкам модуля аннотации:

Первая реклама (столбец 1)

• Название: Магазин
• Тело: оставить пустым
• Использовать значок: Да
• Значок: см. снимок экрана ниже.
• URL-адрес ссылки на модуль: /shop (или ваша пользовательская ссылка на страницу вашего магазина)

Вторая реклама (столбец 3)

• Название: Обзор
• Тело: оставить пустым
• Использовать значок: Да
• Значок: см. снимок экрана ниже.
• URL-адрес ссылки на модуль: /cart (или ваша пользовательская ссылка на страницу вашей корзины)

Третье объявление (столбец 5)

• Название: Оформить заказ
• Тело: оставить пустым
• Использовать значок: Да
• Значок: см. снимок экрана ниже.
• URL-адрес ссылки на модуль: /checkout (или ваша пользовательская ссылка на страницу оформления заказа)

На этом этапе наша временная шкала WooCommerce будет выглядеть следующим образом:

Независимо от того, на какие страницы попадают клиенты, нам требуется простой доступ к нашим модулям Blurb, поскольку мы создаем шаблоны для корзины и страницы оформления заказа. Способность конечного пользователя—вашего клиента—беспрепятственно перемещаться между различными этапами оформления заказа является ключевым компонентом временной шкалы WooCommerce. Сначала мы войдем в настройки модуля первого рекламного объявления, магазина, чтобы добавить ссылку на магазин по умолчанию, корзину и страницы оформления заказа.

Независимо от того, на какие страницы попадают клиенты, нам требуется простой доступ к нашим модулям Blurb, поскольку мы создаем шаблоны для корзины и страницы оформления заказа. Способность конечного пользователя—вашего клиента—беспрепятственно перемещаться между различными этапами оформления заказа является ключевым компонентом временной шкалы WooCommerce. Сначала мы войдем в настройки модуля первого рекламного объявления, магазина, чтобы добавить ссылку на магазин по умолчанию, корзину и страницы оформления заказа.

Каждый модуль Blurb будет получать ссылки на обычные страницы WooCommerce. Внесите необходимые изменения в любые настраиваемые ссылки, которые вы могли установить для этих страниц при установке WooCommerce. Сначала мы начнем с модуля Shop Blurb. Мы вводим /shop в поле URL-адреса ссылки на модуль. Это стандартный URL-адрес страницы магазина WooCommerce. Не забудьте заменить этот URL-адрес вашим персонализированным URL-адресом, если вы его обновили.

Чтобы сохранить изменения, нажмите кнопку с зеленой галочкой. Далее мы переходим к модулю «Обзорная реклама». Ссылка на страницу корзины предоставляется этим модулем. Еще раз выбирается вкладка «Ссылка», и URL-адрес ссылки на модуль /cart добавляется к URL-адресу модуля.

Мы будем ссылаться на стандартную ссылку страницы оформления заказа WooCommerce (/checkout) для последнего модуля Blurb, модуля Checkout Blurb.

Модули описания стилей

Затем начнется стилизация наших недавно добавленных модулей Blurb. К модулям мы применим стили наведения. Это улучшает пользовательский интерфейс (UX) временной шкалы корзины WooCommerce. Нам нужен другой цвет для модуля Blurb, который представляет страницу, на которой мы сейчас находимся. Кроме того, мы хотим, чтобы значок менял цвет и увеличивался при наведении на него курсора.

Стиль модуля Blurb

• Цвет значка: #eac989
• Цвет значка при наведении: #9fa2ce
• Выравнивание текста: по центру

Текст заголовка:

• Текст заголовка заголовка: H4

• Шрифт заголовка: Баскервиль
• Начертание шрифта заголовка: полужирный
• Цвет текста заголовка: #354e7c

Преобразование:

• Масштаб преобразования (рабочий стол): 100%
• Масштаб преобразования (наведение): 115%

Мы применим параметры дизайна к другим модулям Blurb в нашей строке после того, как закончим их настройку для первого модуля Blurb.

Просто модули в нашем разделе — это объекты, на которые мы хотим расширить наши стили. Это важно помнить, особенно если вы работаете со страницей с существующим содержимым.

Стилизация модуля описания корзины

Мы собираемся указать, что наш пользователь сейчас находится на отдельном цвете значка, чтобы указать различные этапы процесса оформления заказа. Например, мы изменим цвет модуля Blurb, ссылаясь на этап корзины процесса, если они находятся на странице корзины.

Модуль описания страницы корзины:

• Цвет значка (рабочий стол): #f6c6c5
• Цвет значка (при наведении): #9fa2ce

Добавить разделители временной шкалы

Мы начнем с добавления и настройки наших модулей-разделителей после того, как мы сконструируем и стилизуем наш модуль Blurb. Второй и четвертый столбцы нашей строки включают модуль делителя.

Разделители стилей временной шкалы

Далее мы настроим разделительные модули. Внесите следующие изменения в настройки разделителя.

Видимость:

• Разделитель шоу: Да

Линия:

• Цвет линии: #354e7c
• Стиль линии: Пунктирная
• Положение строки: вертикально по центру

Размеры

• Вес разделителя: 5px

Давайте скопируем и вставим стили из этого модуля Divider в другой модуль в нашей строке, используя действительно умную функцию Divi. Затем мы щелкнем правой кнопкой мыши на готовом модуле делителя. Затем мы выберем Копировать настройки модуля. Затем щелкните правой кнопкой мыши модуль Divider, который в данный момент не имеет стиля. Последний шаг — нажать «Вставить настройки модуля». Экономия времени — это заработок времени!

Пользовательские CSS

Наша временная шкала корзины WooCommerce в настоящее время выглядит так:

Мы собираемся добавить немного CSS в нашу строку, чтобы убедиться, что наши модули разделителей правильно выровнены, и чтобы наш модуль временной шкалы реагировал на мобильные устройства.

Мы должны сначала ввести параметры строки для нашей временной шкалы корзины WooCommerce, прежде чем мы сможем добавить наш пользовательский CSS. Затем мы выбираем вкладку «Дополнительно». И последнее, но не менее важное: мы включим следующий CSS в основной элемент:

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

Теперь нажмите зеленую галочку, чтобы сохранить настройки.

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

На нашей странице корзины мы заложили основу для графика движения корзины WooCommerce. Но мы должны обновить шаблон страницы оформления заказа, указав выполненную работу, чтобы завершить график. Чтобы упростить нашу процедуру для страницы оформления заказа, мы будем использовать контекстное меню, которое было одной из оригинальных функций Divi. Давайте идти!

Копировать временную шкалу движения корзины со страницы корзины

Мы вернемся на страницу корзины. Однако мы не будем использовать Divi Builder для тела.

Щелкните правой кнопкой мыши Custom Body шаблона корзины. После этого выберите «Копировать» в контекстном меню.

Теперь мы вставим работу, которую мы выполнили в шаблоне корзины, в шаблон оформления заказа после того, как мы продублировали его. В шаблоне страницы проверки мы щелкаем правой кнопкой мыши кнопку «Добавить пользовательское тело», чтобы выполнить это. Когда вы закончите, в меню появится опция «Вставить». Чтобы скопировать Custom Body из шаблона страницы оформления заказа в шаблон страницы корзины, нажмите «Вставить».

Теперь вы можете видеть, что шаблон страницы оформления заказа и шаблон корзины имеют собственное тело. Это позволит нам ускорить процедуру проектирования сайта. Спасибо, Диви. Мы нажмем зеленую кнопку «Сохранить изменения» в верхней части конструктора, чтобы сохранить наши изменения в шаблоне оформления заказа.

Обновить страницу оформления заказа

Сократив время процесса проектирования, давайте внесем последние изменения в страницу оформления заказа, чтобы убедиться, что она легко интегрируется с остальной частью нашего проекта. Чтобы отредактировать Custom Body шаблона страницы оформления заказа, сначала щелкните значок карандаша.

Значок оформления заказа стиля

Начните стилизовать нашу иконку оформления заказа прямо сейчас. Настройки модуля кнопки оформления заказа будут открыты при нажатии на значок шестеренки.

Перейдите на вкладку «Дизайн» модуля «Настройки модуля». Следует щелкнуть заголовок «Значок изображения &». Цвет значка будет изменен. Следовательно, выберите значок пипетки и введите шестнадцатеричное значение #f6c6c5. В результате значок приобретет розовый цвет текущей страницы.

Обновить значок корзины

Необходимо будет вернуться и изменить цвет значка корзины. Для этого мы вернемся к настройкам модуля. Затем мы выбираем значок шестеренки символа тележки.

Мы еще раз перейдем на вкладку «Дизайн» настроек модуля. После этого выберите инструмент «Пипетка» в разделе «Иконка Изображение &». Затем введите #eac989 в шестнадцатеричном формате.

Покинув Divi Builder, не забудьте сохранить настройки и всю свою кропотливую работу.

Мардж все вместе

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

Шаблон страницы корзины

• Продукты Woo Cart: здесь будет отображаться корзина WooCommerce.
• Woo Cart Totals: продемонстрируйте промежуточный итог, налоги и многое другое с помощью этого модуля.

Шаблон страницы оформления заказа

• Модуль уведомлений Woo: мы используем этот модуль, чтобы показать любые ошибки, информацию или уведомления, относящиеся к проверке
• Woo Checkout Billing: этот модуль будет раскрашивать платежные реквизиты ваших клиентов.
• Woo Checkout Details: в отличие от общей суммы корзины, этот модуль покажет фактические названия продуктов, количество и многое другое.
• Woo Checkout Billing: чтобы показать доступные способы оплаты, мы добавили этот модуль на страницу оформления заказа.

Подведение итогов

Временная шкала корзины дает покупателям визуальное представление об их путешествии по вашему сайту. У вас есть возможность настроить и добавить новый компонент в ваш магазин WooCommerce с помощью Divi . Благодаря инструментам Divi вы можете применить то, что узнали здесь, к своим собственным клиентам и личным веб-сайтам. Если вы используете этот учебник вне класса, пожалуйста, дайте мне знать!