WooCommerce checkout'u özelleştirmek: hook'tan block'a güncel yaklaşım

WooCommerce 8.x ile checkout tamamen Block-based. WordPress Gutenberg block’ları checkout’ta çalışıyor. Eski shortcode/action hook’ları hâlâ var ama deprecated yolunda.

15+ yıldır WooCommerce geliştiriyorum. Block-based checkout’a geçiş büyük değişim. Eski ve yeni yaklaşımları karşılaştırıp pragmatic bir rehber sunacağım.

Eski hook-based checkout

Yıllar boyunca checkout customization WooCommerce action/filter hook’larıyla yapılıyordu:

Hook örneği: checkout field ekle:

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_company_tax_id'] = array(
        'label' => 'Vergi Numarası',
        'required' => true,
        'class' => array('form-row-wide'),
    );
    return $fields;
});

Hook örneği: validation ekle:

add_action('woocommerce_checkout_process', function() {
    if (empty($_POST['billing_company_tax_id'])) {
        wc_add_notice('Vergi numarası zorunlu.', 'error');
    }
});

Hook örneği: order’a field kaydet:

add_action('woocommerce_checkout_create_order', function($order, $data) {
    if (!empty($_POST['billing_company_tax_id'])) {
        $order->update_meta_data('billing_company_tax_id', sanitize_text_field($_POST['billing_company_tax_id']));
    }
}, 10, 2);

Bu pattern 2024’e kadar standart. Sadece classic checkout shortcode’unda ([woocommerce_checkout]) çalışıyor.

Yeni Block-based checkout

WooCommerce Blocks plugin WordPress 6.x Block editor ile entegre. Checkout bir WordPress page’indeki Block olarak:

woocommerce/checkout block
Bu block içinde sub-block’lar: shipping fields, payment methods, order review, etc.

Customization farklı:

Field eklemek:

// Using Store API extension

use Automattic\WooCommerce\Blocks\Package;
use Automattic\WooCommerce\Blocks\Domain\Services\ExtendSchema;

add_action('woocommerce_blocks_loaded', function() {
    Package::container()->get(ExtendSchema::class)->register_endpoint_data([
        'endpoint' => \Automattic\WooCommerce\StoreApi\Schemas\V1\CheckoutSchema::IDENTIFIER,
        'namespace' => 'my-plugin-namespace',
        'data_callback' => function() {
            return ['company_tax_id' => ''];
        },
        'schema_callback' => function() {
            return [
                'company_tax_id' => [
                    'description' => 'Vergi numarası',
                    'type' => 'string',
                ],
            ];
        },
    ]);
});

StoreAPI extension pattern’ı. Daha strict, type-safe, React-compatible.

UI tarafında JavaScript:

import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';

registerCheckoutBlock({
    metadata: {
        name: 'my-plugin/company-tax-id',
        parent: ['woocommerce/checkout-billing-address-block'],
    },
    component: ({ cart, extensions }) => {
        // Custom field component
        return <TextInput label="Vergi Numarası" />;
    },
});

PHP + JavaScript kombine. React component UI, PHP Store API data.

Hangi yaklaşım ne zaman?

Hook-based (classic):

Existing site’da classic shortcode checkout kullanılıyorsa
Hızlı fix/customization gerekiyorsa
Developer React’e aşina değilse

Block-based (modern):

Yeni proje, clean slate
Block-based UI gerekli (advanced layout)
React ecosystem’de rahat olan team
Future-proof strategy

Şu an (2025) WooCommerce 8+ Block-based default. Yeni proje’de Block-based şart. Mevcut site’lar classic’te kalabilir kısa vadede.

Hybrid scenario

Mevcut site classic checkout’ta, yeni feature Block-based istiyor. Migrate etmek büyük iş.

Option 1: Classic kalsın, gereksinim Block’a uymazsa classic pattern’de çöz.

Option 2: Checkout’u Block’a migrate et (düşük traffic saatlerinde, staging’de test), sonra Block customization yap.

Option 3: Coexistence. Her iki checkout’u da support. Feature flag ile A/B test.

Çoğu müşterime option 2 öneriyorum: Block’a geç. Migration 1-2 haftalık iş, long-term strategic.

Common customization scenarios

1. Ek billing field (vergi numarası, pasaport)

Classic: woocommerce_checkout_fields filter + validation hook + save hook
Block: StoreAPI schema extension + React component

Classic 30 satır kod, Block 150+ satır. Block tarafı heavy ama type-safe, testable.

2. Checkout flow değiştirmek (2-step, multi-page)

Classic: Heavy hook customization + template override
Block: Custom Block variation, checkout’un parts’larını reorganize

Block bu senaryoda daha clean. Layout’u visual editor’da tasarlıyorsun.

3. Conditional logic (şirket ise vergi no iste, bireysel ise isteme)

Classic: JavaScript conditional show/hide + backend validation
Block: React component’in state’inde conditional rendering

Block tarafı daha natural (React’te state management). Ama extra setup.

4. Third-party integration (ödeme, kargo)

Classic: Gateway/shipping method class’ı yaz
Block: Gateway + React PaymentMethod block ekle

Block ile payment UI daha customizable. Ama hem PHP hem JS implementation gerekiyor.

Block development stack

Block-based development için gerekli:

@wordpress/scripts: Build toolchain (webpack, Babel)
@woocommerce/blocks-checkout: WC-specific block utilities
@wordpress/components: UI components
React knowledge: Component-based development

npx @wordpress/create-block ile boilerplate. Modern plugin structure.

Eski hook-based plugin yazmak gibi değil. WordPress development disciplin değişti.

Performance considerations

Classic checkout:
– Server-side rendered, full page load
– JavaScript minimal
– First paint fast
– Interactive zaman bir miktar gecikmeli

Block-based checkout:
– React app, hydration süreci
– Extensive JavaScript bundle
– First paint biraz daha yavaş
– Interactive immediately

Net impact: Block checkout %20-30 daha yavaş first-page-load. Ama ongoing interaction (field validation, payment selection) %50 daha hızlı.

Mobile cihazlarda JavaScript-heavy Block checkout dikkat edilmeli. Low-end device’larda performance issue.

Migration strategy

Classic’ten Block’a geçiş:

Phase 1: Audit
– Hangi hook’lar kullanılıyor?
– Her hook’un Block equivalent’ı ne?
– Migration impossible olan var mı?

Phase 2: Staging test
– Block-based checkout’u staging’de enable
– Test order’lar oluştur, end-to-end test
– Payment gateway’leri verify et

Phase 3: Feature parity
– Eski hook functionality’sini Block equivalent olarak implement
– Custom field’lar, validation, third-party integrations

Phase 4: A/B test (optional)
– %10 traffic’e Block checkout
– Conversion rate comparison
– Issue’ları yakala

Phase 5: Switchover
– Block checkout default
– Classic’i bir süre backup olarak tut (WooCommerce setting)

1-3 aylık proje depending on complexity.

Known issues in Block-based

Block checkout hâlâ gelişiyor. Karşılaştığım bazı pain points:

Coupon UI limited. Classic’te coupon field çok flexible, Block’ta fixed.
Custom validation errors awkward. Hook-based validation pattern Block’ta tam translate olmuyor.
Payment gateway compatibility. Bazı eski gateway’ler Block checkout support etmiyor.
Plugin ecosystem catching up. Popular addon’lar Block-based’e geçiyor ama tümü değil.

Bu liste WC her release’de azalıyor. 2025 sonunda Block checkout’a geçiş safer.

Theme compatibility

Block checkout WP Block themes (Twenty Twenty-Three+) ile iyi çalışıyor. Classic theme’lerde visual glitch olabiliyor.

Legacy theme’li site’da Block checkout kullanıyorsan CSS override’ları dikkatli. WooCommerce default style’larına güvenme, explicit styling yap.

Sonuç

WooCommerce checkout customization Block-based geleceğe doğru. Hook-based pattern 2-3 yıl daha desteklenecek ama strategic olarak Block’a geçiş mantıklı.

Yeni proje: Block-based default. Existing project: phase’li migration, iş önceliklerine göre. Classic pattern’i unutma, legacy sistemlerde hâlâ works.

React skills iOS developer için ne kadar önemli ise modern WordPress developer için de önemli. Ekosistem değişiyor, adaptation gerekli.

WooCommerce checkout’u özelleştirmek: hook’tan block’a güncel yaklaşım