WordPress Özel Satış Sayfası Tasarlama

Pentester

Özel Üye
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.

1kg2jzs.png


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.

ro2ouw2.png


Sayfa başlığına Özel Ürün diyorum. Sağ taraftan da varsayılan şablonu elementor full width olarak ayarlıyorum.

3e4ie10.png


Sayfamı yayınlıyorum ve edit with elementor diyerek mevzuya dalıyorum.

m6qo12c.png


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.

mtnea4e.png


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.

3j6ombt.png


Evet bir tane section oluşturduk. Şimdi bir tane başlık atalım.

esbjtst.png


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.

ordb7l9.png


Elementorun kendi içerisinde price table bileşeni bulunmaktadır sayfamızda bir tane bırakalım bakalım neler geliyor.

9mh5vdv.png


İ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.

elrkbtj.png


Elementor bize bir nimet sunuyor. Woocommerce ile entegreli çalışan sepete ekleme butonu, harika.

iazbdgg.png


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.

n0tj4uv.png


İ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.

cxirrzf.png


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.

3bwlyfe.png


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.

6tzkm18.png


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.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.