Elementor ile Özel WooCommerce Mağaza Sayfası Nasıl Oluşturulur

Bildiğin gibi. Elementor Pro, WooCommerce ile kodlama yapmadan özelleştirilmiş bir e-ticaret web sitesi oluşturmanıza olanak tanıyan bir WooCommerce oluşturucu özelliği ile birlikte gelir. Bu özellik, sezgisel bir arayüz sunan Elementor görsel düzenleyicisini kullanarak özel WooCommerce sayfaları oluşturmanıza olanak tanır. Yazma sırasında (8 Haziran 2021), mağaza sayfası, tek ürün sayfası ve ürün arşiv sayfaları (etiketler ve kategoriler) için özel sayfalar oluşturabilirsiniz. Yakında, ödeme sayfası ve sepet sayfası için de özel sayfalar oluşturabileceksiniz. Bu makalede, Elementor Pro'nun WooCommerce oluşturucu özelliğini kullanarak özel bir WooCommerce mağaza sayfasının nasıl oluşturulacağını göstereceğiz.

Mağaza sayfasının kendisi, WooCommerce'in varsayılan sayfalarından biridir. Sayfa, ürünlerinizi sergilemek için bir vitrin görevi görür. Sayfanıza siteniz.com/shop adresine giderek erişebilirsiniz. Varsayılan olarak, WooCommerce mağaza sayfası yalnızca WooCommerce ürünlerini görüntüler. Elementor Pro'yu kullanarak özel bir mağaza sayfası oluşturarak vitrininizi daha çekici hale getirmek için öğeler ekleyebilirsiniz.

Elementor ile Özel WooCommerce Mağaza Sayfası Nasıl Oluşturulur

Özel bir WooCommerce mağaza sayfası oluşturmak için kullanabileceğiniz en az iki Elementor widget'ı vardır: Ürünleri Arşivle ve Ürünler. Bu örnekte, ikincisini kullanıyoruz.

Ürünler pencere aracının işlevi, Gönderiler pencere aracına oldukça benzer. Aradaki fark, Ürünler pencere öğesinin WooCommerce ürünlerini görüntülemek için kullanılması, Yazılar pencere öğesinin ise blog gönderilerini görüntülemek için kullanılmasıdır. Ürünler widget'ını yalnızca WooCommerce eklentisini yüklediğinizde ve etkinleştirdiğinizde bulabileceğinizi lütfen unutmayın.

Elementor Pro'yu kullanarak özel bir WooCommerce mağaza sayfası oluşturmaya başlamak için önce WordPress panonuzda Şablonlar -> Tema Oluşturucu'ya gidin. Tema Oluşturucu sayfasındaki Ürünler Arşivi sekmesine tıklayın ve YENİ ÜRÜN ARŞİVİ EKLE düğmesine tıklayın.

Şablonunuza bir ad verin ve ŞABLON OLUŞTUR düğmesine tıklayın.

Önceden hazırlanmış bir şablondan özel mağaza sayfası oluşturmak istemeniz durumunda seçebileceğiniz önceden hazırlanmış üç özel mağaza sayfası şablonu vardır. Bunun yerine özel mağaza sayfasını sıfırdan oluşturmak istiyorsanız, şablon kitaplığını kapatmanız yeterlidir. Bu örnekte, sıfırdan özel mağaza sayfası oluşturacağız. Yukarıda daha önce belirtildiği gibi, ürünleri görüntülemek için Ürünler pencere öğesini kullanacağız.

Ürünler pencere aracını tuval alanına eklemeden önce, bölümler ve sütunlar ekleyerek düzeni ayarlayabilirsiniz. Elementor'da yeniyseniz, nasıl kullanılacağını öğrenmek için önceki makalemizi okuyabilirsiniz. Düzen hazır olduğunda, Ürünler pencere öğesini tuval alanına sürükleyebilirsiniz.

Gördüğünüz gibi, Ürünler widget'ı en son WooCommerce ürünlerini otomatik olarak yükler ve görüntüler. Ayarlar panelinde İçerik sekmesi altında bulunan Sorgu bloğunu açarak sorguyu değiştirebilirsiniz. Aralarından seçim yapabileceğiniz beş sorgu seçeneği vardır:

• Geçerli sorgu
• En son ürünler
• Satış
• Öne çıkan
• Manuel seçim

Ayrıca ürün siparişini ayarlayabilir veya belirli ürünleri hariç tutabilirsiniz.

Sütun ve satır sayısını ayarlamak için İçerik sekmesinin altındaki İçerik bloğunu açabilirsiniz. Bu bloktan sayfalandırmayı da etkinleştirebilirsiniz.

Ürünler widget'ının en iyi ayarlarını elde edene kadar ayarlar paneliyle oynayabilirsiniz. Ürünler widget'ını tamamladığınızda, sayfanıza başka widget'lar ekleyebilirsiniz.

Sayfayı düzenlemeyi bitirdikten sonra, ayarlar panelinin alt kısmındaki YAYINLA düğmesine tıklayabilirsiniz.

DURUM EKLE düğmesini tıklatarak bir görüntüleme koşulu ekleyin. Özel bir mağaza sayfası oluşturmak istediğiniz için Mağaza Sayfası seçeneğini seçin. Değişikliği kaydetmek için KAYDET & KAPAT düğmesine tıklayın.

Buraya kadar, Elementor Pro'yu kullanarak özel WooCommerce mağaza sayfasını başarıyla oluşturdunuz. Sonucu kontrol etmek için siteniz.com/shop adresine gidebilirsiniz.

Ürünler Widget'ını Şekillendirme

Sayfanızı yayınlamadan önce Ürünler widget'ını daha çekici hale getirmek için biçimlendirebilirsiniz. Ürünler pencere aracına stil eklemek için tuval alanındaki pencere aracına tıklayın ve ayarlar panelindeki Stil sekmesine gidin. Aşağıdaki gibi açabileceğiniz dört blok vardır:

• Ürün:% s

Sütunlar ve satırlar arasındaki boşluğu ayarlamak için bu bloğu açabilirsiniz. Bu bloktan, ürün başlığı, ürün fiyatı, ürün puanı vb. gibi ürün öğelerinin metin renginin yanı sıra tipografiyi (yazı tipi ailesi, yazı tipi boyutu vb.) de ayarlayabilirsiniz. Ürün görselinin kenarlığını da ayarlayabilirsiniz,

• Kutu

Bu bağlamda Box, her bir ürünün konteynerini ifade eder. Kabın kenarlık genişliğini, kenarlık yarıçapını, kutu gölgesini, arka plan rengini, kenarlık rengini vb. ayarlamak için Kutu bloğunu açabilirsiniz.

• sayfalandırma

İçerik bloğundan Sayfalandırma seçeneğini etkinleştirirseniz, sayfalandırmayı biçimlendirmek için Stil sekmesinde Sayfalandırma bloğunu açabilirsiniz. Boşluk, kenarlık rengi, arka plan rengi vb. gibi şeyleri ayarlayabilirsiniz. Her durumda farklı ayarlar belirleyebilirsiniz (normal, vurgulu ve aktif).

• Satılık Flaş

WooCommerce'e yeni bir ürün eklerken, ziyaretçilerinize ilişkili ürünün indirimli olduğunu göstermek için bir indirimli fiyat özelliği belirleyebilirsiniz. Bunu vurgulamak için, indirimli ürünlerin bir indirim rozetine sahip olması için mağaza sayfasında indirim özelliğini görüntüleyebilirsiniz. İndirim rozetini süslemek için İndirim Flaşı bloğunu açabilirsiniz. Metin rengi, arka plan rengi, tipografi, kenarlık yarıçapı, boyut (genişlik ve yükseklik), mesafe vb. gibi şeyleri ayarlayabilirsiniz.

Alt çizgi

WooCommerce oluşturucu, Elementor Pro tarafından sunulan özelliklerden biridir. Bu özellik, WooCommerce ile kodlama yapmadan özelleştirilmiş, benzersiz bir e-ticaret sitesi oluşturmanıza olanak tanır. WooCommerce için tasarlandığını iddia eden bir WordPress teması yüklemenize gerek yok. Bunun yerine, Elementor'un görsel düzenleyicisini kullanarak kendi kendinize özel WooCommerce sayfaları oluşturabilirsiniz.

3.2.2 sürümüne kadar Elementor Pro yalnızca özel mağaza sayfası, özel tek ürün sayfası ve özel ürün arşiv sayfaları oluşturmanıza izin verir. Ancak Elementor, Elementor Pro'nun bir sonraki sürümünde özel alışveriş sepeti sayfası, özel ödeme sayfası ve özel müşteri hesabı sayfası da oluşturabileceğinizi duyurdu.

JetWooBuilder, Elementor ile özel bir WooCommerce web sitesi oluşturmak için başka bir seçenektir. JetWooBuilder ve Elementor WooCommerce Builder tarafından sunulan özellikleri öğrenmek için önceki makalemizi okuyabilirsiniz.