Flatsome Checkout Customization

August 7, 2025 · AI Conversations

User

Flatsome wordpress theme customize checkout page woocommerce

Assistant

To **customize the WooCommerce checkout page** in the **Flatsome** WordPress theme, you have several flexible options depending on how deeply you want to customize. Here's a step-by-step guide for different levels of customization:

—

### ✅ 1. **Use Flatsome UX Builder (for basic layout adjustments)**

Flatsome supports visual editing in some WooCommerce templates, but the **checkout page itself is not directly editable** with UX Builder. However, you can:

– Customize headers/footers and sidebars.
– Use **UX Blocks** to insert custom content **above or below the checkout form** (e.g., testimonials, trust icons, notices).

To insert content before or after the checkout form:

// functions.php
add_action('woocommerce_before_checkout_form', 'custom_content_before_checkout');
function custom_content_before_checkout() {
    echo do_shortcode('[your-ux-block-shortcode]');
}

—

### ✅ 2. **Override the WooCommerce checkout template**

If you want to **customize fields, layout, or behavior**, copy the WooCommerce template file into your child theme.

**Steps:**

1. Go to:

wp-content/plugins/woocommerce/templates/checkout/form-checkout.php

2. Copy it to your child theme:

wp-content/themes/flatsome-child/woocommerce/checkout/form-checkout.php

3. Modify the markup as needed (e.g., rearrange billing/shipping/order review sections).

—

### ✅ 3. **Customize Checkout Fields with Hooks or Filters**

WooCommerce provides hooks to modify checkout fields. Add this in your child theme’s `functions.php`:

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

function custom_override_checkout_fields($fields) {
    // Remove company field
    unset($fields['billing']['billing_company']);

    // Make phone not required
    $fields['billing']['billing_phone']['required'] = false;

    // Add custom field
    $fields['billing']['custom_field'] = [
        'type' => 'text',
        'label' => 'Custom Note',
        'required' => false,
        'class' => ['form-row-wide'],
        'priority' => 25,
    ];

    return $fields;
}

To display the custom field in the order:

add_action('woocommerce_checkout_update_order_meta', 'save_custom_field');
function save_custom_field($order_id) {
    if (!empty($_POST['custom_field'])) {
        update_post_meta($order_id, '_custom_field', sanitize_text_field($_POST['custom_field']));
    }
}

add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin', 10, 1);
function display_custom_field_admin($order){
    echo '<p><strong>Custom Note:</strong> ' . get_post_meta($order->get_id(), '_custom_field', true) . '</p>';
}

—

### ✅ 4. **Custom CSS Adjustments**

Use Flatsome’s **Theme Options > Custom CSS** to adjust layout, spacing, etc. Example:

.woocommerce-checkout .woocommerce-billing-fields {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

—

### ✅ 5. **Use Plugins for Easier Field Management**

If you're not comfortable coding, use plugins like:

– **Checkout Field Editor (by ThemeHigh)**
– **WooCommerce Blocks (for full-site editing)**
– **CartFlows** – for fully custom checkout funnels

—

### ✅ 6. **Bonus – Add Trust Seals or Custom Notices**

To add trust badges or messages:

add_action('woocommerce_checkout_before_customer_details', function () {
    echo '<div class="custom-checkout-trust"><img src="your-badge.png" alt="100% Secure"></div>';
});

—

### Want Help with Specific Layout or UX Flow?

If you can share what exact customization you want (e.g., "move email above name", "add 2-column layout", "hide coupon field"), I can write the full implementation for you.

Let me know!

User

Move payment and shipping option after billing shipping fields

Assistant

To **move the WooCommerce payment and shipping options after the billing and shipping fields** in the **Flatsome theme** (or any theme), you'll need to override the `form-checkout.php` template in your child theme and slightly rearrange the markup.

—

### ✅ Step-by-Step: Move Payment & Shipping Section After Billing

#### 1. **Copy the `form-checkout.php` template to your child theme**

From:

wp-content/plugins/woocommerce/templates/checkout/form-checkout.php

To:

wp-content/themes/flatsome-child/woocommerce/checkout/form-checkout.php

> If the folders don’t exist in the child theme, create them (`woocommerce/checkout/`).

—

#### 2. **Edit the `form-checkout.php` Template**

Open the copied file and **rearrange these lines** of code.

Look for something like this:

<?php do_action( 'woocommerce_checkout_order_review' ); ?>

And this (earlier in the file):

<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>

—

#### ✅ Rearranged Version (simplified):

Here’s the typical modification:

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
    <?php if ( $checkout->get_checkout_fields() ) : ?>

        <div class="col2-set" id="customer_details">
            <div class="col-1">
                <?php do_action( 'woocommerce_checkout_billing' ); ?>
            </div>

            <div class="col-2">
                <?php do_action( 'woocommerce_checkout_shipping' ); ?>
            </div>
        </div>

    <?php endif; ?>

    <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>

    <div id="order_review" class="woocommerce-checkout-review-order">
        <?php do_action( 'woocommerce_checkout_order_review' ); ?>
    </div>
</form>

✅ This order ensures:
1. **Billing and shipping fields** come first.
2. Then the **order summary with shipping method and payment**.

—

### 🧠 What Happens Inside `woocommerce_checkout_order_review`?

This hook outputs:
– **Shipping methods** (based on chosen address)
– **Payment methods**
– **Place order button**

So placing it after billing/shipping means the user sees the form **top-down**, which is better UX.

—

### 🔁 Optional CSS Touch-up

You might want to give the whole checkout form a 1-column layout instead of side-by-side billing/shipping:

@media (min-width: 768px) {
  #customer_details .col-1, #customer_details .col-2 {
    width: 100%;
    float: none;
  }
}

—

Let me know if you want:
– 2-column or 1-column layout
– To hide certain fields
– Custom steps (like multi-step checkout)

I can generate the full code for that too.

User

Move order summR6 to right side

Assistant

To move the **Order Summary** (which includes shipping methods, payment options, totals, and place order button) to the **right side** of the **checkout page** in Flatsome (or any WooCommerce theme), you need to create a **2-column layout** using custom structure inside your `form-checkout.php`.

—

### ✅ Goal:
– Left: Billing & Shipping fields
– Right: Order Summary (`#order_review`)

—

### ✅ Step-by-Step Guide

#### 1. **Override the WooCommerce checkout form**

Copy this file:

wp-content/plugins/woocommerce/templates/checkout/form-checkout.php

Into:

wp-content/themes/flatsome-child/woocommerce/checkout/form-checkout.php

—

#### 2. **Modify the HTML Layout to 2 Columns**

Edit `form-checkout.php` like this:

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

    <div class="custom-checkout-layout" style="display: flex; flex-wrap: wrap; gap: 30px;">

        <div class="checkout-left" style="flex: 1 1 60%;">
            <?php if ( $checkout->get_checkout_fields() ) : ?>
                <div id="customer_details">
                    <div class="billing-fields">
                        <?php do_action( 'woocommerce_checkout_billing' ); ?>
                    </div>
                    <div class="shipping-fields">
                        <?php do_action( 'woocommerce_checkout_shipping' ); ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>

        <div class="checkout-right" style="flex: 1 1 35%;">
            <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
            <div id="order_review" class="woocommerce-checkout-review-order">
                <?php do_action( 'woocommerce_checkout_order_review' ); ?>
            </div>
        </div>

    </div>

</form>

—

#### 3. ✅ (Optional) Move Inline Styles to CSS

In **Flatsome > Theme Options > Custom CSS** or in your child theme `style.css`:

.custom-checkout-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.checkout-left {
    flex: 1 1 60%;
    min-width: 300px;
}

.checkout-right {
    flex: 1 1 35%;
    min-width: 280px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
}

—

### ✅ Result:
– Left column: Billing + Shipping fields
– Right column: Order summary with payment and totals
– Mobile responsive using `flex-wrap: wrap`

—

Let me know if you want to:
– Make this responsive with stacked layout on small screens
– Turn this into a grid layout instead of flex
– Wrap it in Flatsome’s row/col structure

I'd be happy to tailor the layout to match Flatsome’s UX structure.

User

Give full code with custom recsptcha after payment section

Assistant

Here's the **full customized `form-checkout.php`** code with:

– ✅ **2-column layout**: Left = Billing/Shipping, Right = Order Summary
– ✅ **Order Summary on the right**
– ✅ **Custom Google reCAPTCHA field after payment section** (just before “Place Order” button)
– ✅ Basic CSS classes and inline styles (you can move to CSS file later)

—

### 🔧 Prerequisites:
– You should load Google reCAPTCHA v2 or v3 script via your theme or plugin.
– Update the `data-sitekey` with **your reCAPTCHA site key**.

—

### ✅ `form-checkout.php` (place in `flatsome-child/woocommerce/checkout/form-checkout.php`):

<?php
defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_checkout_form', $checkout );

// If checkout registration is disabled and not logged in, show message.
if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
    echo esc_html( apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) ) );
    return;
}
?>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

    <div class="custom-checkout-layout" style="display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px;">

        <!-- LEFT SIDE: Billing & Shipping -->
        <div class="checkout-left" style="flex: 1 1 60%; min-width: 300px;">
            <?php if ( $checkout->get_checkout_fields() ) : ?>
                <div id="customer_details">
                    <div class="billing-fields">
                        <?php do_action( 'woocommerce_checkout_billing' ); ?>
                    </div>
                    <div class="shipping-fields">
                        <?php do_action( 'woocommerce_checkout_shipping' ); ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>

        <!-- RIGHT SIDE: Order Summary -->
        <div class="checkout-right" style="flex: 1 1 35%; min-width: 280px; background: #f9f9f9; padding: 20px; border-radius: 10px;">
            <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>

            <div id="order_review" class="woocommerce-checkout-review-order">
                <?php do_action( 'woocommerce_checkout_order_review' ); ?>
                
                <!-- ✅ Add reCAPTCHA field here -->
                <div class="checkout-recaptcha" style="margin-top: 20px;">
                    <label for="g-recaptcha">Security Check</label>
                    <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>
                </div>
            </div>
        </div>

    </div>

</form>

<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>

—

### ✅ Add reCAPTCHA Validation (server-side)

Add this to your child theme’s `functions.php`:

add_action('woocommerce_checkout_process', 'validate_custom_recaptcha');
function validate_custom_recaptcha() {
    if ( ! isset($_POST['g-recaptcha-response']) || empty($_POST['g-recaptcha-response']) ) {
        wc_add_notice( __( 'Please verify that you are not a robot.', 'woocommerce' ), 'error' );
        return;
    }

    $response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
        'body' => [
            'secret'   => 'YOUR_RECAPTCHA_SECRET_KEY',
            'response' => sanitize_text_field($_POST['g-recaptcha-response']),
            'remoteip' => $_SERVER['REMOTE_ADDR']
        ]
    ]);

    $success = json_decode(wp_remote_retrieve_body($response), true);

    if ( empty($success['success']) || ! $success['success'] ) {
        wc_add_notice( __( 'reCAPTCHA verification failed. Please try again.', 'woocommerce' ), 'error' );
    }
}

—

### ✅ Load Google reCAPTCHA Script

Place this in your `footer.php` or enqueue in theme:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

—

### 🔁 Optional CSS (for cleaner look)

.checkout-recaptcha {
  margin-top: 20px;
}
.checkout-recaptcha label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
}

—

### ✅ Final Notes

– Replace `YOUR_RECAPTCHA_SITE_KEY` and `YOUR_RECAPTCHA_SECRET_KEY` with your own from [https://www.google.com/recaptcha/admin](https://www.google.com/recaptcha/admin).
– Works best with **Google reCAPTCHA v2 (checkbox)**. You can adapt for v3 if needed.
– You can conditionally show this only to guest users if required.

—

Let me know if you want to:
– Make it **multi-step checkout**
– Add **AJAX validation**
– Use **Flatsome UX Blocks** inside the checkout

I'm happy to help further!

User

Catchall under payment section
With left side

Assistant

Got it — you want a **checkout layout with two columns**:

– ✅ **Left column**: Billing & Shipping fields
– ✅ **Right column**:
– Order Summary
– Payment section
– Custom reCAPTCHA
– Custom message or *“catchall”* block (any content like notice, upsell, trust badge, etc.)

Let me show you the full working version with clean structure.

—

### ✅ Final Layout Summary

**Structure:**

<div class="checkout-layout">
  ├── Left (Billing + Shipping)
  └── Right (Order summary + Payment + reCAPTCHA + custom content)
</div>

—

### ✅ Full `form-checkout.php` Code
**Place this in:**
`wp-content/themes/flatsome-child/woocommerce/checkout/form-checkout.php`

“`php

User

No
Left side billing/ shipping, shipping, pYment
payment,captcha
catchall

Right side
Order summary , coupon code

Assistant

Thanks for the clarification.

You want a **custom WooCommerce checkout layout in Flatsome**, structured like this:

—

### ✅ **Final Layout Requirements**

#### 🔹 **Left Column** (Main form):
In this **exact order**:

1. **Billing fields**
2. **Shipping fields**
3. **Shipping methods**
4. **Payment methods**
5. **reCAPTCHA**
6. **Catchall custom content** (e.g., upsell, terms, trust badge)

#### 🔹 **Right Column**:

– **Order summary**
– **Coupon code field**

—

### ✅ Full Working `form-checkout.php`

**Place in:**

/wp-content/themes/flatsome-child/woocommerce/checkout/form-checkout.php

<?php
defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_checkout_form', $checkout );

if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
    echo esc_html( apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) ) );
    return;
}
?>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

    <div class="custom-checkout-layout" style="display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px;">

        <!-- ✅ LEFT COLUMN -->
        <div class="checkout-left" style="flex: 1 1 60%; min-width: 300px;">
            <?php if ( $checkout->get_checkout_fields() ) : ?>
                <div id="customer_details">
                    <!-- Billing -->
                    <div class="billing-fields">
                        <?php do_action( 'woocommerce_checkout_billing' ); ?>
                    </div>

                    <!-- Shipping -->
                    <div class="shipping-fields">
                        <?php do_action( 'woocommerce_checkout_shipping' ); ?>
                    </div>
                </div>
            <?php endif; ?>

            <!-- ✅ Shipping Methods -->
            <div class="woocommerce-shipping-methods-wrap" style="margin-top: 20px;">
                <?php
                do_action( 'woocommerce_review_order_before_shipping' );
                do_action( 'woocommerce_review_order_after_shipping' );
                ?>
            </div>

            <!-- ✅ Payment -->
            <div class="woocommerce-payment-wrap" style="margin-top: 20px;">
                <?php
                /**
                 * This outputs payment methods
                 */
                do_action( 'woocommerce_review_order_before_payment' );
                wc_get_template( 'checkout/payment.php' );
                do_action( 'woocommerce_review_order_after_payment' );
                ?>
            </div>

            <!-- ✅ reCAPTCHA -->
            <div class="checkout-recaptcha" style="margin-top: 25px;">
                <label for="g-recaptcha">Security Check</label>
                <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>
            </div>

            <!-- ✅ Catchall custom block -->
            <div class="custom-catchall-block" style="margin-top: 30px;">
                <div style="padding: 15px; background: #f2f2f2; border-left: 4px solid #00a0d2;">
                    <strong>Note:</strong> All orders are secured and encrypted. Trusted by 10,000+ customers.
                </div>
            </div>
        </div>

        <!-- ✅ RIGHT COLUMN -->
        <div class="checkout-right" style="flex: 1 1 35%; min-width: 280px; background: #f9f9f9; padding: 20px; border-radius: 10px;">
            <!-- Coupon code -->
            <div class="woocommerce-coupon-wrap">
                <?php do_action( 'woocommerce_before_checkout_form_coupon' ); ?>
            </div>

            <!-- Order review -->
            <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
            <div id="order_review" class="woocommerce-checkout-review-order">
                <?php do_action( 'woocommerce_checkout_order_review' ); ?>
            </div>
        </div>

    </div>
</form>

<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>

—

### ✅ Add This to `functions.php` (reCAPTCHA backend validation)

add_action('woocommerce_checkout_process', 'validate_custom_recaptcha');
function validate_custom_recaptcha() {
    if ( ! isset($_POST['g-recaptcha-response']) || empty($_POST['g-recaptcha-response']) ) {
        wc_add_notice( __( 'Please verify that you are not a robot.', 'woocommerce' ), 'error' );
        return;
    }

    $response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
        'body' => [
            'secret'   => 'YOUR_RECAPTCHA_SECRET_KEY',
            'response' => sanitize_text_field($_POST['g-recaptcha-response']),
            'remoteip' => $_SERVER['REMOTE_ADDR']
        ]
    ]);

    $success = json_decode(wp_remote_retrieve_body($response), true);

    if ( empty($success['success']) || ! $success['success'] ) {
        wc_add_notice( __( 'reCAPTCHA verification failed. Please try again.', 'woocommerce' ), 'error' );
    }
}

—

### ✅ Load Google reCAPTCHA Script

Add in `footer.php` or via `wp_enqueue_scripts`:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

—

### ✅ Optional Custom CSS (in Flatsome > Theme Options > Custom CSS)

.custom-catchall-block {
  background: #fffbe6;
  border-left: 5px solid #f0ad4e;
  padding: 15px;
  margin-top: 20px;
}

.checkout-right .woocommerce-checkout-review-order {
  margin-top: 20px;
}

—

Would you like this:
– Made responsive with `@media` queries?
– Wrapped in **Flatsome UX row/col classes** instead of inline CSS?

Let me know — I can convert this layout into Flatsome-style grid if needed.

Flatsome Checkout Customization

Leave a Comment Cancel