motayeb/woocommerce/checkout/form-checkout.php

<?php
/**
 * قالب اختصاصی تسویه حساب ووکامرس مطابق با UI مطیب
 *
 * @package Motayeb
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // جلوگیری از دسترسی مستقیم
}

$checkout = WC()->checkout();
?>

<!-- ===== CHECKOUT SECTION ===== -->
<section id="checkout" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
    <div class="max-w-5xl mx-auto px-4 md:px-6">
        <div class="text-center mb-10">
            <span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CHECKOUT</span>
            <h2 class="text-3xl md:text-4xl font-extrabold mt-2">تسویه حساب</h2>
        </div>
        
        <!-- Progress (دکمه‌های استپ) - نمایش فقط برای دکوراسیون -->
        <div class="flex items-center justify-center gap-2 mb-10">
            <div class="checkout-step active w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold">۱</div>
            <div class="w-12 h-0.5 bg-cream-200 dark:bg-dark-border"></div>
            <div class="checkout-step w-10 h-10 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-sm font-bold text-cream-500 dark:text-dark-muted">۲</div>
            <div class="w-12 h-0.5 bg-cream-200 dark:bg-dark-border"></div>
            <div class="checkout-step w-10 h-10 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-sm font-bold text-cream-500 dark:text-dark-muted">۳</div>
        </div>

        <!-- فرم اصلی ووکامرس -->
        <form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

            <div class="grid md:grid-cols-3 gap-6">
                
                <!-- ===== ستون چپ (اطلاعات و پرداخت) ===== -->
                <div class="md:col-span-2 space-y-6">
                    
                    <!-- ۱. اطلاعات خریدار -->
                    <div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
                        <h3 class="font-bold text-lg mb-5 flex items-center gap-2">
                            <iconify-icon icon="lucide:user" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> 
                            اطلاعات خریدار
                        </h3>
                        <div class="grid md:grid-cols-2 gap-4">
                            <?php
                            // نمایش فیلدهای تسویه حساب (Billing)
                            $fields = $checkout->get_checkout_fields( 'billing' );
                            foreach ( $fields as $key => $field ) {
                                // فقط فیلدهای ضروری را رد نشو. کلاس‌های تیلویند را اضافه میکنیم
                                if ( isset( $field['class'] ) && is_array( $field['class'] ) ) {
                                    $field['class'][] = 'w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted';
                                }
                                // در اینجا تابع استاندارد ووکامرس را صدا می‌زنیم
                                woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
                            }
                            ?>
                        </div>
                    </div>

                    <!-- ۲. آدرس تحویل -->
                    <div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
                        <h3 class="font-bold text-lg mb-5 flex items-center gap-2">
                            <iconify-icon icon="lucide:map-pin" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> 
                            آدرس تحویل
                        </h3>
                        <div class="grid md:grid-cols-2 gap-4">
                            <?php
                            // نمایش فیلدهای آدرس (Shipping)
                            $shipping_fields = $checkout->get_checkout_fields( 'shipping' );
                            foreach ( $shipping_fields as $key => $field ) {
                                // اگر فیلدها با استایل ما تداخل دارند، کلاس‌های تیلویند را اضافه می‌کنیم
                                $field['class'][] = 'w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition';
                                woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
                            }
                            ?>
                        </div>
                    </div>

                    <!-- ۳. روش پرداخت -->
                    <div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
                        <h3 class="font-bold text-lg mb-5 flex items-center gap-2">
                            <iconify-icon icon="lucide:credit-card" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> 
                            روش پرداخت
                        </h3>
                        <div class="space-y-3">
                            <?php wc_get_template( 'checkout/payment.php' ); ?>
                        </div>
                    </div>

                </div>

                <!-- ===== ستون راست (خلاصه سفارش) ===== -->
                <div>
                    <div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50 sticky top-32">
                        <h3 class="font-bold text-lg mb-5">خلاصه سفارش</h3>
                        
                        <div id="checkout-items" class="space-y-3 mb-5 max-h-60 overflow-y-auto">
                            <?php wc_get_template( 'checkout/review-order.php' ); ?>
                        </div>

                        <!-- دکمه ثبت سفارش -->
                        <button type="submit" class="w-full mt-5 py-3.5 bg-forest-500 text-white rounded-2xl font-bold hover:bg-forest-600 transition flex items-center justify-center gap-2" name="woocommerce_checkout_place_order" id="place_order" value="<?php esc_attr_e( 'Place order', 'woocommerce' ); ?>">
                            <iconify-icon icon="lucide:lock" width="16"></iconify-icon>
                            <span>پرداخت امن و ثبت سفارش</span>
                        </button>
                        <p class="text-[10px] text-cream-400 dark:text-dark-muted text-center mt-3">با ثبت سفارش، قوانین و مقررات مطیب را می‌پذیرید.</p>
                        
                        <?php wp_nonce_field( 'woocommerce-process_checkout', '_wpnonce' ); ?>
                    </div>
                </div>

            </div>
        </form>
    </div>
</section>