- 8 Eyl 2016
- 1,646
- 995
Merhaba arkadaşlar, bugün sizlere WordPress üzerinde özel bir satış sayfası nasıl oluştururuz onu göstermek istiyorum. Şu an üzerinde çalıştığım bir işten örneklendirmek istiyorum. Sistem WordPress alt yapısını kullanıyor. E-Ticaret fonksiyonları içinde Wordpress üzerine çalışan her arkadaşımın bileceği üzere WooCommerce eklentisini kullanıyoruz. WooCommerce kendi içerisinde gerçekten çok kapsamlı ve bir e-ticaret sitesinde olması gereken tüm fonksiyonları bize sunuyor. Şimdi yavaştan konumuzu görselleştirerek adım adım konuşalım. Tema olarak Hello Elementor temasını kullanıyorum Wordpress’in ücretsiz bomboş bir temasıdır, elementor sayfa yapıcısı ile uyumlu çalışmaktadır. Ekstra özel bir tema kullanmıyoruz ki gerek yok. Çünkü ürün sayfalarımız özel olacak ve e-ticaret temalarının sağladığı klasik görünümden çok farklı olacak. Ayrıca sıfırdan harika tasarımlar oluşturacağımız bir sayfa yapıcı eklentimiz var adı da elementor.
Hello Elementor temasını kuruyorum, ardından woocommerce eklentisini kuruyorum. Bunlar temalar ve eklentiler alanından iki tık ile erişebileceğiniz şeyler olduğundan ekstra kurulum adımlarına gerek yok. Şimdi de ürünler menüsünden bir tane ürün ekliyorum ve Woocommerce Hello Elementor temasının görünümüyle bize nasıl bir ürün sayfası çıkarıyor bakalım.
Evet sadece Hello Elementor teması ve Woocommerce kurarak bir ürün ekledim ve elde ettiğim görünüm bu. Klasik sepete ekle, ürün fiyatı, ürün kategorisi alt tarafta da yorumlar, ilgili ürünler gibi alanlar geliyor. Klasik bir ürün satış sayfası görünümünde. Burada varyasyonlar eklenebilir, woocommerce özelleştirme eklentileri ile bu görünüm çok daha güzel hale getirilebilir. Ancak bizden istenilen ürün sayfası bu klasiklikten çok çok uzakta olduğundan farklı bir çözüm üretmemiz gerekiyor. Ben sadece Wordpress panelinden bir sayfa oluşturuyorum ve bunu özel bir ürün sayfası haline getirelim.
Sayfa başlığına Özel Ürün diyorum. Sağ taraftan da varsayılan şablonu elementor full width olarak ayarlıyorum.
Sayfamı yayınlıyorum ve edit with elementor diyerek mevzuya dalıyorum.
Karşımda bomboş bir sayfa var ve elementor sayfa yapıcısı ile harikalar yaratılması için şimdilik boş bir sayfa. Üst tarafta menümüz sabit tabii ona takılmayalım.
Şimdi + sembolüne tıklayarak yeni bir alan oluşturalım.
Bize diyor ki ‘Kardeşim nasıl bir alan oluşturmak istersin, sayfayı tek sütuna mı bölelim, 4 sütuna mı, sen ne istersin bir takım seçenekler veriyoruz sana diyor.’ En baştakine tıklıyorum şimdilik bir tane yeter, istersem ben ekstra sütun oluştururum, sen aradan çekil diyerek devam ediyorum.
Evet bir tane section oluşturduk. Şimdi bir tane başlık atalım.
Sol taraftaki elementor menüsünden heading bileşenini bulup kullanıyorum ayarlarından da başlığı center olarak ayarlıyorum. Tasarıma takılmayın öylece bir başlık koyduk işte. Şimdi ‘ne yapsam ne yapsam unutabilsem’ diyerek sayfa için neler oluşturacağımı düşünüyorum. Bir tane price table oluşturalım. Bu da ürünümüzün fiyat paketi olsun.
Elementorun kendi içerisinde price table bileşeni bulunmaktadır sayfamızda bir tane bırakalım bakalım neler geliyor.
İlgili görünüm bizi karşılıyor. Şimdi bizden istenen şu, özel bir ürün sayfası olacak burada fiyat tablolarında ilgili butona tıklanınca fiyata göre ürün sepete eklenerek satışa yönlendirilecek. Ancak biz şu an woocommerce ürün ekleme işlemi yapmıyoruz çünkü istenilen görünümü elde etmemiz mümkün değil o sebepten özel bir sayfayı ürün sayfası olarak kullanacağız. Ancak burası ürün sayfası değilken ürün fiyatını nasıl yazdıracağız, butona tıklayınca sepete nasıl gidecek? Kafada deli sorular…
Öncelikle buton mevzusunu çözelim, bir buton koyalım da gerisini Allah bilir diyorum.
Elementor bize bir nimet sunuyor. Woocommerce ile entegreli çalışan sepete ekleme butonu, harika.
Butonu sayfaya ekledim. Şimdi sorun şu, sepeti ekledin de kardeşim bu özel bir sayfa bu sepete tıklayınca biz bu sayfada yazdığın fiyatla sepete nasıl gideceğiz. Çözeriz kardeşim diyerek devam edelim.
İlgili bileşen bize bu imkanı sunuyor tabii. Sen arka planda bir ürün oluştur, gel burada ürünü tanımla o ürünü sepete göndeririz diyor.
Sayfamıza gidiyor ve add to cart butonuna basıyoruz ve sepeti görüntülüyoruz.
Karşımızda sepet, artık ödemeye gidebiliriz. Yani buraya kadar ne yaptık özel bir sayfa oluşturup istediğimiz gibi içeriğini tasarladık ve bu sayfadan bir satış sayfası yarattık yani sepete ekleyebildik. Yani bizden istenen bir sorunu bu şekilde bir mantık kurarak çözdük. Ama daha ilk sorun bu idi, şimdi bu sepete eklettiğin ürünün fiyatını bu özel sayfaya yazdır da görelim. Bunun için hazır bir bileşen göremedim. Bunun için temamızın function.php dosyasına gidiyoruz ve bir fonksiyon yazıyoruz.
Bu fonksiyonumuz woocommerce tarafında eklediğimiz ürünün fiyatını bir shortcode olarak istediğimiz sayfada görüntülememizi sağlıyor.
Ve sayfamızda bir text editör vasıtasıyla shortcode’u bu şekilde kullanıyoruz. Ürünün id değerini ürünü sepete eklerken çıkan parametre de görebilirsiniz. Yine ürünler sayfasında da bu id yani kimlik numarasını görebilirsiniz. Bu şekilde özel bir sayfada arka planda eklediğimiz dinamik ürünü hem sepete yönlendirebildik, hem de ürünün fiyatını bir fonksiyon vasıtası ile çekerek sorunlarımızı aştık.
Hello Elementor temasını kuruyorum, ardından woocommerce eklentisini kuruyorum. Bunlar temalar ve eklentiler alanından iki tık ile erişebileceğiniz şeyler olduğundan ekstra kurulum adımlarına gerek yok. Şimdi de ürünler menüsünden bir tane ürün ekliyorum ve Woocommerce Hello Elementor temasının görünümüyle bize nasıl bir ürün sayfası çıkarıyor bakalım.
Evet sadece Hello Elementor teması ve Woocommerce kurarak bir ürün ekledim ve elde ettiğim görünüm bu. Klasik sepete ekle, ürün fiyatı, ürün kategorisi alt tarafta da yorumlar, ilgili ürünler gibi alanlar geliyor. Klasik bir ürün satış sayfası görünümünde. Burada varyasyonlar eklenebilir, woocommerce özelleştirme eklentileri ile bu görünüm çok daha güzel hale getirilebilir. Ancak bizden istenilen ürün sayfası bu klasiklikten çok çok uzakta olduğundan farklı bir çözüm üretmemiz gerekiyor. Ben sadece Wordpress panelinden bir sayfa oluşturuyorum ve bunu özel bir ürün sayfası haline getirelim.
Sayfa başlığına Özel Ürün diyorum. Sağ taraftan da varsayılan şablonu elementor full width olarak ayarlıyorum.
Sayfamı yayınlıyorum ve edit with elementor diyerek mevzuya dalıyorum.
Karşımda bomboş bir sayfa var ve elementor sayfa yapıcısı ile harikalar yaratılması için şimdilik boş bir sayfa. Üst tarafta menümüz sabit tabii ona takılmayalım.
Şimdi + sembolüne tıklayarak yeni bir alan oluşturalım.
Bize diyor ki ‘Kardeşim nasıl bir alan oluşturmak istersin, sayfayı tek sütuna mı bölelim, 4 sütuna mı, sen ne istersin bir takım seçenekler veriyoruz sana diyor.’ En baştakine tıklıyorum şimdilik bir tane yeter, istersem ben ekstra sütun oluştururum, sen aradan çekil diyerek devam ediyorum.
Evet bir tane section oluşturduk. Şimdi bir tane başlık atalım.
Sol taraftaki elementor menüsünden heading bileşenini bulup kullanıyorum ayarlarından da başlığı center olarak ayarlıyorum. Tasarıma takılmayın öylece bir başlık koyduk işte. Şimdi ‘ne yapsam ne yapsam unutabilsem’ diyerek sayfa için neler oluşturacağımı düşünüyorum. Bir tane price table oluşturalım. Bu da ürünümüzün fiyat paketi olsun.
Elementorun kendi içerisinde price table bileşeni bulunmaktadır sayfamızda bir tane bırakalım bakalım neler geliyor.
İlgili görünüm bizi karşılıyor. Şimdi bizden istenen şu, özel bir ürün sayfası olacak burada fiyat tablolarında ilgili butona tıklanınca fiyata göre ürün sepete eklenerek satışa yönlendirilecek. Ancak biz şu an woocommerce ürün ekleme işlemi yapmıyoruz çünkü istenilen görünümü elde etmemiz mümkün değil o sebepten özel bir sayfayı ürün sayfası olarak kullanacağız. Ancak burası ürün sayfası değilken ürün fiyatını nasıl yazdıracağız, butona tıklayınca sepete nasıl gidecek? Kafada deli sorular…
Öncelikle buton mevzusunu çözelim, bir buton koyalım da gerisini Allah bilir diyorum.
Elementor bize bir nimet sunuyor. Woocommerce ile entegreli çalışan sepete ekleme butonu, harika.
Butonu sayfaya ekledim. Şimdi sorun şu, sepeti ekledin de kardeşim bu özel bir sayfa bu sepete tıklayınca biz bu sayfada yazdığın fiyatla sepete nasıl gideceğiz. Çözeriz kardeşim diyerek devam edelim.
İlgili bileşen bize bu imkanı sunuyor tabii. Sen arka planda bir ürün oluştur, gel burada ürünü tanımla o ürünü sepete göndeririz diyor.
Sayfamıza gidiyor ve add to cart butonuna basıyoruz ve sepeti görüntülüyoruz.
Karşımızda sepet, artık ödemeye gidebiliriz. Yani buraya kadar ne yaptık özel bir sayfa oluşturup istediğimiz gibi içeriğini tasarladık ve bu sayfadan bir satış sayfası yarattık yani sepete ekleyebildik. Yani bizden istenen bir sorunu bu şekilde bir mantık kurarak çözdük. Ama daha ilk sorun bu idi, şimdi bu sepete eklettiğin ürünün fiyatını bu özel sayfaya yazdır da görelim. Bunun için hazır bir bileşen göremedim. Bunun için temamızın function.php dosyasına gidiyoruz ve bir fonksiyon yazıyoruz.
Bu fonksiyonumuz woocommerce tarafında eklediğimiz ürünün fiyatını bir shortcode olarak istediğimiz sayfada görüntülememizi sağlıyor.
Ve sayfamızda bir text editör vasıtasıyla shortcode’u bu şekilde kullanıyoruz. Ürünün id değerini ürünü sepete eklerken çıkan parametre de görebilirsiniz. Yine ürünler sayfasında da bu id yani kimlik numarasını görebilirsiniz. Bu şekilde özel bir sayfada arka planda eklediğimiz dinamik ürünü hem sepete yönlendirebildik, hem de ürünün fiyatını bir fonksiyon vasıtası ile çekerek sorunlarımızı aştık.