---
title: Widget Elementor
description: Membuat desain halaman checkout produk dengan widget plugin Checkout UI
date: 14-12-2024
---

<Youtube videoId="j9g1vliHfsY" />

## Widget

<Stepper>
  <StepperItem title="Step 1: Tambahkan Layout">
    Tambahkan salahsatu layout `Container` maupun `Grid` sesuai dengan selera
    desain yang anda mau. ![tambahkan
    layout](https://addonsejoli.pro/cdn_asp/images/scui-widget-elementor.png)
  </StepperItem>
  <StepperItem title="Step 2: Tambahkan Widget">
    Tambahkan widget **Sejoli Checkout UI** ke dalam layout dan susun urutan
    komponen-komponen yang ada dalam halaman checkout Sejoli menggunakan widget.
    ![tambahkan
    widget](https://addonsejoli.pro/cdn_asp/images/scui-widget-cui.png)
  </StepperItem>
  <StepperItem title="Step 3: Publish">
    Klik tombol **Publish** untuk menerbitkan sekaligus menerapkan halaman
    checkout dengan desain yang anda buat.
    ![publish](https://addonsejoli.pro/cdn_asp/images/scui-publish-template.png)
  </StepperItem>
</Stepper>

<Note type="note" title="Note">
  Perlu diperhatikan seluruh komponen-komponen checkout Sejoli pada halaman
  checkout produk harus anda tambahkan keseluruhannya untuk memastikan proses
  checkout berjalan dan berfungsi dengan baik.
</Note>