Elementor ve WooCommerce, WordPress'te özel çevrimiçi mağazalar oluşturmak için en esnek kombinasyonlardan birini oluşturur. WooCommerce, e-ticaret işlevselliğini (ürünler, sepet, ödeme, ödemeler) yönetirken, Elementor bu mağaza sayfalarının nasıl göründüğü ve işlevselliği üzerinde görsel kontrol sağlar. Bu kılavuzda, Elementor ile ana WooCommerce sayfalarını, ürün sayfaları, mağaza arşivleri ve sepet deneyimi dahil olmak üzere oluşturmayı ele alıyoruz.
Bu eğitim, WordPress, WooCommerce ve Elementor Pro'nun yüklü olduğunu varsayıyor. WooCommerce widget'ları için Elementor Pro gereklidir; Elementor'un ücretsiz sürümü bunları içermez.
Başlamadan Önce İhtiyacınız Olanlar
| Gereksinim | Neden Gerekli | Nereden Alınır |
|---|---|---|
| WordPress 6.x+ | Temel CMS platformu | wordpress.org |
| WooCommerce (ücretsiz) | E-ticaret işlevselliği | WordPress eklenti dizini |
| Elementor Pro | WooCommerce widget'ları ve Tema Oluşturucu | PluginTheme.net |
| Uyumlu tema | Mağazanız için temel | Tema seçim kılavuzu |
| Örnek ürünler | Şablonları tasarlamak için içerik | WooCommerce → Araçlar → Örnek verileri içe aktar |
Elementor'un WooCommerce Oluşturucusunu Anlamak
Elementor Pro, Tema Oluşturucu sistemi içinde özel bir WooCommerce Oluşturucu içerir. Bu, aşağıdakiler için özel şablonlar oluşturmanıza olanak tanır:
- Tek Ürün Sayfası: Bireysel ürün sayfalarının düzenini kontrol etme
- Ürün Arşivi: Mağaza sayfasını ve kategori sayfalarını özelleştirme
- Sepet Sayfası: Özel bir sepet düzeni tasarlama
- Ödeme Sayfası: Ödeme formu düzenini özelleştirme
- Hesabım Sayfası: Müşteri hesap panosunu yeniden tasarlama
Her şablon, ürünlerinizden dinamik verileri çeken WooCommerce'e özel widget'lar kullanır. Bu, düzeni bir kez tasarladığınız anlamına gelir ve otomatik olarak tüm ürünlere (veya belirli kategorilere) uygulanır.
Özel Bir Ürün Sayfası Oluşturma
Adım 1: Şablonu Oluşturun
- WordPress yönetiminizde Şablonlar → Tema Oluşturucu bölümüne gidin
- "Yeni Ekle" butonuna tıklayın ve şablon türü olarak "Tek Ürün" seçin
- Önceden oluşturulmuş bir ürün sayfası şablonu seçin veya boş bir tuvalden başlayın
- Elementor editörü, panelde mevcut WooCommerce widget'ları ile açılacaktır
Adım 2: WooCommerce Widget'larını Ekleyin
Ürün sayfaları için ana WooCommerce widget'ları:
| Widget | Gösterdiği | Özelleştirme Seçenekleri |
|---|---|---|
| Ürün Resimleri | Küçük resimler ve ışık kutusu ile galeri | Galeri düzeni, küçük resim konumu, yakınlaştırma anahtarı |
| Ürün Başlığı | Ürün adı (H1) | Tipografi, renk, hizalama |
| Ürün Fiyatı | Normal ve indirimli fiyat | Tipografi, indirim rozeti rengi, düzen |
| Ürün Değerlendirmesi | Yorumlardan yıldız değerlendirmesi | Yıldız rengi, boyutu, hizalama |
| Sepete Ekle | Miktar seçici + sepete ekle butonu | Buton stili, renkler, miktar düzeni |
| Ürün Kısa Açıklaması | Kısa ürün özeti | Tipografi, boşluk |
| Ürün Meta | SKU, kategoriler, etiketler | Düzen, tipografi, ayırıcı |
| Ürün Verileri Sekmeleri | Açıklama, yorumlar, ek bilgi sekmeleri | Sekme stili, kenar, s |
| İlgili Ürünler | Aynı kategoriden ürünler | Sütunlar, sayı, sıralama |
| Yükseltmeler | Manuel olarak bağlantılı yükseltme ürünleri | Sütunlar, sayı, düzen |
Adım 3: Düzen En İyi Uygulamaları
Yüksek dönüşüm oranına sahip bir ürün sayfası, test edilmiş bir düzen kalıbını takip eder:
- Katman üstü: Ürün resimleri (sol, %50-60 genişlik) + başlık, fiyat, puan, kısa açıklama ve sepete ekle butonu (sağ, %40-50 genişlik)
- Katman altı: Ürün veri sekmeleri (tam açıklama, teknik özellikler, yorumlar)
- Alt bölüm: İlgili ürünler ve yükseltmelerin ızgara düzeninde gösterimi (3-4 sütun)
- Güven unsurları: Kargo bilgisi, iade politikası, sepete ekle butonunun yanındaki güvenlik rozetleri
Sepete ekle butonunu hem masaüstü hem de mobil cihazlarda kaydırma olmadan görünür tutun. Dikkat çekmek için buton için zıt renkler kullanın.
Mağaza Sayfasını Özelleştirme (Ürün Arşivi)
Adım 1: Bir Arşiv Şablonu Oluşturun
- Şablonlar → Tema Oluşturucu → Ürün Arşivi sekmesine gidin
- Yeni bir şablon ekleyin ve tür olarak "Ürün Arşivi"ni seçin
- Görüntüleme koşullarını atayın (tüm arşivler, belirli kategoriler veya etiket sayfaları)
Adım 2: Ürün Izgarasını Yapılandırın
Arşiv Ürünleri widget'ı, ürün listenizi bu seçeneklerle görüntüler:
- Sütunlar: 2-6 sütun (3-4 çoğu mağaza için iyi çalışır)
- Sayfa başına ürün: Kullanıcı deneyimi için standart 12-24
- Paginasyon: Numaralı sayfalar, "daha fazla yükle" butonu veya sonsuz kaydırma
- Sıralama açılır menüsü: Müşterilerin fiyat, popülerlik veya puana göre sıralama yapmasına izin verin
- İndirim rozeti: İndirim rozetinin konumunu, rengini ve metnini özelleştirin
Birçok ürüne sahip mağazalar için, ızgaranın üstünde kategori filtrelemesi ekleyin. Gelişmiş filtreleme seçenekleri için Elementor'un Menü widget'ını veya JetWooBuilder gibi bir ürün filtreleme eklentisini kullanabilirsiniz.
Sepet Sayfasını Tasarlama
Elementor Pro, sepet sayfası düzenini özelleştirmenizi sağlar. İyi bir sepet sayfası şunları içermelidir:
- Ürün resimlerini, adlarını, fiyatlarını ve miktarlarını temiz bir tabloda gösterin
- Toplam tutarı belirgin bir şekilde gösterin
- Mağaza sayfasına geri dönen bir "Alışverişe Devam Et" butonu ekleyin
- Müşterilerin teslimat maliyetlerini tahmin edebilmeleri için bir kargo hesaplayıcı gösterin
- Sepet tablosunun altında çapraz satış ürünlerini gösterin
Elementor Sepet widget'ı, varsayılan WooCommerce sepet düzenini, her öğeyi stilize edebileceğiniz bir görsel düzenleyici ile değiştirir—tablo kenarları, buton renkleri, tipografi ve boşluklar.
Ödeme Sayfasını Özelleştirme
Ödeme sayfası, dönüşüm oranınızı doğrudan etkiler. Elementor Pro'nun Ödeme widget'ı, aşağıdakiler üzerinde kontrol sağlar:
- Form düzeni: Tek sütun veya iki sütunlu fatura/teslimat formu
- Sipariş özeti konumu: Form ile yan yana veya üstte/altta
- Buton stili: Sipariş butonu rengi, boyutu ve metni
- Ödeme bölümü: Ödeme yöntemleri için radyo butonu veya sekme düzeni
- Güven rozetleri: Ödeme formunun yanına güvenlik simgeleri ve garanti metni ekleyin
Ödeme dönüşüm optimizasyon ipuçları için WooCommerce ödeme optimizasyon kılavuzumuza bakın.
Performans Dikkatleri
Elementor, sayfalarınıza CSS ve JavaScript ekler. Bir WooCommerce mağazası için performans, dönüşümlerle doğrudan bağlantılıdır. Bu ipuçlarını aklınızda bulundurun:
- Fewer DOM elements için Flexbox konteynerleri kullanın bölümler/sütunlar yerine
- Ürün resimlerini optimize edin: WebP formatı, uygun boyutlar ve tembel yükleme kullanın.
- Widget sayısını sınırlayın: Her widget, işaretleme ekler; yalnızca ihtiyacınız olanı kullanın
- Elementor'un performans özelliklerini etkinleştirin: Geliştirilmiş Varlık Yükleme, Geliştirilmiş CSS Yükleme
- Bir önbellek eklentisi kullanın: WP Rocket, Elementor WooCommerce kurulumlarıyla iyi çalışır
Elementor WooCommerce için Temel Eklentiler
Bu Elementor eklentileri, WooCommerce oluşturma yeteneklerini genişletir:
| Eklenti | Temel WooCommerce Özellikleri |
|---|---|
| JetWooBuilder | Gelişmiş ürün ızgaraları, özel arşiv şablonları, koşullu mantıkla tek ürün düzenleri |
| Essential Addons Pro | Ürün ızgarası, ürün döngüsü, WooCommerce ödeme sayfası |
| Happy Elementor Addons | Ürün kategori ızgarası, mini sepet, ürün döngüsü |
Sıkça Sorulan Sorular
WooCommerce için Elementor Pro'ya ihtiyacım var mı, yoksa ücretsiz sürüm yeterli mi?
WooCommerce'a özel widget'lar (Ürün Resimleri, Sepete Ekle, Ürün Veri Sekmeleri, Sepet, Ödeme vb.) için Elementor Pro gereklidir. Elementor'un ücretsiz sürümü bu widget'ları içermez. Ücretsiz sürümü, normal sayfaları tasarlamak için kullanabilirsiniz, ancak özel WooCommerce şablonları için Elementor Pro gereklidir.
Ödeme sayfasında Elementor kullanabilir miyim?
Evet. Elementor Pro, varsayılan WooCommerce ödeme düzenini değiştiren bir Ödeme widget'ı içerir. Form alanlarını, sipariş özetini, ödeme bölümünü ve genel düzeni özelleştirebilirsiniz. Ancak, ödeme geçidi entegrasyonlarını bozabilecek ağır özelleştirmeler yaparken dikkatli olun—değişiklik yaptıktan sonra tam satın alma akışını her zaman test edin.
Farklı kategoriler için farklı ürün sayfası düzenleri nasıl oluşturabilirim?
Elementor'un Tema Oluşturucu'sunda, her şablona görüntüleme koşulları atayabilirsiniz. Giysi için bir ürün sayfası şablonu (beden/renk seçicileri ile), dijital ürünler için başka bir şablon (nakliye bilgisi olmadan) oluşturun ve devam edin. Her şablon yalnızca belirtilen kategorilerdeki ürünlere uygulanır.
Elementor, WooCommerce'i yavaşlatır mı?
Elementor, herhangi bir sayfaya CSS ve JavaScript yükü ekler. Birçok widget içeren ürün sayfalarında, bu, varsayılan WooCommerce şablonlarına kıyasla yükleme sürelerini 0.5-1.5 saniye artırabilir. Elementor'un yerleşik performans özelliklerini kullanmak, resimleri optimize etmek ve bir önbellek eklentisi kullanmak bu etkiyi azaltmaya yardımcı olur. Performans açısından kritik mağazalar için, GeneratePress gibi daha hafif bir tema düşünün.
Elementor WooCommerce şablonlarını herhangi bir tema ile kullanabilir miyim?
Çoğu Elementor WooCommerce şablonu, WooCommerce'i destekleyen herhangi bir tema ile çalışır. Ancak, bazı temalar Elementor şablonlarıyla çelişen kendi ürün sayfası stillerine sahip olabilir. astra-pro-addon">Astra, GeneratePress ve OceanWP gibi temalar, Elementor ile sorunsuz çalışacak şekilde tasarlanmıştır ve özel şablonlar için en temiz alanı sağlar.
WooCommerce Mağaza Oluşturma için Elementor Pro'yu Alın
Tüm WooCommerce widget'larına, Tema Oluşturucu'ya ve 100'den fazla Pro şablona erişin. Özel ürün sayfaları, mağaza arşivleri ve ödeme düzenlerini görsel olarak oluşturun.
Elementor Pro'yu İncele →
