---
title: "How to Use Checkout Elements"
source: "https://docs.nexcess.com/software/kadence/iconic/flux-checkout/how-to-use-checkout-elements/"
description: "Learn how to use Flux Checkout for WooCommerce's Checkout Elements feature with this step-by-step, easy-to-use guide."
vertical: "Software"
area: "Flux Checkout"
date: "2024-01-30"
last_modified: "2026-08-12"
---

# How to Use Checkout Elements

**Coming soon:** Flux Checkout is becoming part of Kadence Shop Kit. You may see both names used while we update the product, documentation, and customer experience.

This guide will walk you through how to use Flux’s Checkout Elements to enhance your WooCommerce checkout page.

In Flux Checkout for WooCommerce, Checkout Elements are the blocks or designs you can create and showcase anywhere on your Flux Checkout page.

These elements are versatile and can be used for various purposes, such as testimonials, trust badges, FAQs, instructions, and more.

## Step 1: Add a new Checkout Element

**To create a Checkout Element, follow these steps:**

1. From your WordPress dashboard, go to **Flux Checkout** > **Elements**.
2. Next, click the **Add new Element** button.

![add new element flux checkout](https://docs.nexcess.com/wp-content/uploads/2026/06/add-new-element-flux-checkout-1024x533-1.png)## Step 2: Design your Checkout Element

When creating a Checkout Element, you’ll be sent to the Block Editor in WordPress.

While here, you’ll be able to create your first Checkout Element and customize it to suit you. We’ve added some pre-built patterns to get you started, but you can create your own from scratch using the Block Editor like you normally would.

**To find one of our pre-built patterns, take the following steps:**

1. Click on the blue Plus (+) icon located at the top left corner.
2. In the popup, select **Patterns** and then click on **Flux**.
3. In the second popup, you will find a list of available patterns. Click on any pattern to import it onto your page.

Or when you are creating a fresh document, you can just click on the **Add your first pattern** button.

![add new element](https://docs.nexcess.com/wp-content/uploads/2026/06/add-card-trust-seals-flux-1024x552-1.png)## Step 3: Position your Checkout Element  

The last step is to pick where you want your Checkout Element to go on the checkout page and when you want it to appear.

![element position flux](https://docs.nexcess.com/wp-content/uploads/2026/06/trust-seal-location-flux-checkout-1024x636-1.png)1. **Pick your Element’s position**: Select where you would like the Checkout Element to appear on the checkout page using the **Position** dropdown. 
    - For example, choose positions such as **Checkout page Footer** from the dropdown menu, and your new Element will be placed there.
2. **Enable Conditional Display**: This option allows you to show or hide the element based on certain conditions. Change this to **Enabled** to activate conditional rules.
3. **All rules must match**: Setting this to **Yes** means that all conditional display rules you set must be true for the element to display. If set to **No**, the element will display if any condition is met.
4. **Conditional Display Rules**: Here, you can create specific groups of rules that determine when the element should be visible to or hidden from customers. Flux gives you the opportunity to create multiple different groups that are evaluated separately. So, you can have different sets of matching conditions to cater to multiple scenarios. 
    - To add your first rule, choose a condition from the first dropdown in the first group (e.g., User Role, Product).
    - Then select the appropriate operator from the next dropdown (e.g., “is,” “is not”).
    - Finally, choose the value that must be matched for the rule to apply (such as a specific user role or a product in the cart).
    - Click **Add New Rule** if you want to add another rule group containing more conditions.

![conditional logic flux checkout](https://docs.nexcess.com/wp-content/uploads/2026/06/conditional-logic-and-flux-checkout-1024x649-1.png)Once you’re finished setting up your conditions, use the **Publish** button on the top right to immediately apply your new element settings to the checkout page.

![Flux checkout elements - frontend demo](https://docs.nexcess.com/wp-content/uploads/2026/06/flux-elements-frontend-demo-1024x473-1.png)**Note:** Remember to test your checkout page after setting up the elements to make sure everything displays as expected under the conditions you’ve set.

If you encounter any issues or need further assistance, reach out to our [support team](https://iconicwp.com/support/) for help.