Bir WooCommerce WordPress Teması Nasıl Özelleştirilir: Adım Adım Kılavuz
Yayınlanan: 2023-03-28Böylece, çevrimiçi mağazanız için mükemmel bir WooCommerce teması gibi görünen bir şey buldunuz, ancak ne kadar harika görünse de, markanızı tam olarak istediğiniz gibi yansıtmıyor.
Bu adım adım kılavuz burada devreye giriyor.
Aşağıda, WooCommerce WordPress temanızı baştan sona nasıl özelleştireceğinizi göstereceğiz, bu temayı kendinize ait hale getirmek ve yeni e-Ticaret işiniz için satış oluşturmaya başlamak için bilmeniz gereken her şeyi özetleyeceğiz.
Başlamadan Önce: Tema Çeşitlemeleri Hakkında Birkaç Söz
Bu eğitim için popüler Astra temasını kullanacağız.
En iyi 35 e-Ticaret teması kılavuzumuzda üst sıralarda yer alan Astra'nın 1 milyondan fazla indirmesi, zahmetsiz özelleştirmesi ve her tür web sitesi için geniş şablon yelpazesi sayesinde hiç de azımsanmayacak kadar fazladır.
Farklı bir tema kullanmaya karar verirseniz, bir e-Ticaret mağazası oluşturmaya yönelik adımların çoğu, kullanılan temadan bağımsız olarak aynı olduğundan, yine de bu öğreticiyi takip edebilmeniz gerekir.
Bununla birlikte, işlevlerin ve özelliklerin konumu temadan temaya değişir. Bu nedenle, size bu eğitimde gösterdiğimiz belirli bir özelliği veya özelleştirme seçeneğini bulma konusunda yardıma ihtiyacınız varsa, onu bulmanıza yardımcı olması için lütfen temanızın belgelerine bakın.
Bir WooCommerce Temasını Özelleştirme: Adım Adım Eğitim
1. Tema Kurulum Sihirbazını başlatın
Modern WooCommerce temalarında, başlamayı kolaylaştıran başlangıç dostu bir kurulum sihirbazına sahip olmak yaygın bir durumdur.
Astra bir istisna değildir.
Kurulum sihirbazına, temayı yükledikten sonra panonuzdaki bildirim aracılığıyla erişebilirsiniz.
Makale Aşağıda Devam Ediyor
Başlayın'ı tıklayın ve sonraki ekranda Web Sitenizi Şimdi Kurun'u seçin.
2. Bir Sayfa Oluşturucu seçin
Bir WooCommerce temasını özelleştirmek, görsel tabanlı bir sayfa oluşturucu aracı kullanılarak daha kolay hale getirilebilir.
Burada Astra bize bu tür üç araç sunuyor; standart WordPress blok düzenleyicisi, Elementor ve Beaver Builder.
Üçü arasından Elementor'u seçeceğiz çünkü kapsamlı Elementor incelememizde okuyacağınız gibi, bu en erişilebilir ve zengin özelliklere sahip sayfa düzenleme araçlarından biridir.
3. Bir Başlangıç Şablonu Seçin
Oradan, daha sonra çevrimiçi mağazanızı oluşturmak için özelleştireceğiniz temel web sitesi şablonunu seçebilirsiniz.
Son birkaç yılda piyasaya sürülen birçok popüler tema gibi, Astra da akla gelebilecek her niş ve amaç için çok sayıda farklı başlangıç şablonuna sahiptir.
Zaman kazanmak için menüden e-Ticaret seçeneğini belirleyerek seçeneklerinizi daraltın.
Giyim, mücevher veya kitap gibi belirli bir mağaza türü oluşturmak istiyorsanız daha da daraltabilirsiniz.
Bu eğitimin geri kalanında, favori Astra WooCommerce şablonumuz Özel Baskı ile çalışacağız.
4. Logonuzu Yükleyin
İstediğiniz şablonu bulduğunuzda, özelleştirmeye başlamak için üzerine tıklamanız yeterlidir.
Makale Aşağıda Devam Ediyor
İlk adımınız bir logo yüklemektir.
Logo kutusunu tıklayın ve bir resim yükleyin veya medya kitaplığınızdan zaten yüklediğiniz bir resmi seçin.
Logonuz yüklendikten sonra, sağdaki gerçek zamanlı ön izlemede yansıtılacak olan boyutunu değiştirmek için Logo Genişliği kaydırıcısını kullanabilirsiniz.
Bu bittiğinde, Devam'a dokunun.
5. Renkleri ve Yazı Tiplerini Seçin
Bir sonraki göreviniz, mağazanız için bir renk şeması seçmek.
Yine, seçtiğiniz renkler sağ taraftaki önizlemeye yansıtılacaktır.
Yazı tipi seçimlerinizi de seçebilir ve ardından Devam'a dokunabilirsiniz.
6. WooCommerce Sitenizi Kurun
Kurulum sürecinin son kısmı, şablonun, ayarların ve demo içeriğinin yeni sitenize aktarılmasını içerir.
Burada ayrıca üstteki formu doldurmayı da seçebilirsiniz, ancak tüm bunlar Astra'nın haber bültenine kaydolmak anlamına geldiği için bu aşamayı atlamak isteyebilirsiniz.
En iyi sonuçlar için, tüm seçenekleri işaretli tutun ve Web Sitemi Gönder ve Oluştur seçeneğine basın.
İşiniz bittiğinde, özelleştirilmeye hazır basit bir web siteniz olacak.
Makale Aşağıda Devam Ediyor
7. WooCommerce WordPress Temanıza İnce Ayar Yapmak için Özelleştiriciyi Kullanın
Artık temel bilgilere sahip olduğunuza göre, temanızın özelleştirme seçeneklerine derinlemesine dalmanın ve bu WooCommerce sitesini gerçekten kendinize ait hale getirmenin zamanı geldi.
Başlamak için, WordPress panonuzdan Görünüm – Özelleştir'e gidin.
Burada, soldaki geniş özelleştirme seçenekleri menüsünü kullanarak herhangi bir değişiklik yaptığınızda gerçek zamanlı olarak güncellenen web sitenizin bir önizlemesini göreceksiniz.
Ana seçeneklerden bazılarına ve bunların sitenizi nasıl etkilediklerine bakalım.
A. Global Şekillendirme Seçenekleri
Genel stil seçenekleri, tüm sitenizi etkiler ve daha önce yapılandırdığınız bazı ayarları değiştirmenize olanak tanır.
Örneğin, tema kurulumu sırasında seçtiğiniz yazı tipi grubundan memnun değilseniz Tipografi'ye dokunabilirsiniz.
Bu, gövde metninizin yanı sıra tek tek başlıkların yazı tipi yüzünü, boyutunu ve stilini özelleştirmenize olanak tanır.
Benzer şekilde, seçtiğiniz renkler size pek uygun değilse, sitenizdeki tek tek öğelerin renklerini düzenleyebileceğiniz Renkler 'i seçin.
En üstteki renkli dairelerden herhangi birine tıklamak tam bir renk paletine erişmenizi sağlar, böylece tam olarak doğru tonu elde etmek için renk seçimlerinizde ince ayar yapabilirsiniz.
Başka yerlerde şunları da yapabilirsiniz:
Boyut, şekil, renk ve kenarlıklar dahil olmak üzere Harekete Geçirici Mesaj düğmelerinizin her ayrıntısını değiştirin.
En üste kaydırmayı etkinleştirerek kullanılabilirliği artırın
B. Özel Bir Başlık Oluşturun
Varsayılan olarak, çoğu WooCommerce teması, başlıklarını müşterilerinize en iyi alışveriş deneyimini sağlayacak şekilde düzenler.
Müşterilerin tam olarak hangi mağazayı ziyaret ettiklerini bilmeleri için logo solda görünür. Sağda bir alışveriş sepeti simgesi belirir, böylece bu müşteriler alışveriş sepetlerine hızlıca erişerek alışverişlerini gözden geçirebilir ve ödeme işlemini başlatabilir ve müşterilerin mağazanızda dolaşabilmeleri için arasına bir gezinme menüsü yerleştirilmiştir.
İşleri farklı yapmaya karar verirseniz, bunu özel başlık oluşturucu seçeneğini belirleyerek yapabilirsiniz.
Burada, üç temel başlık öğesini yeniden düzenlemek için ekranın altındaki sütunları kullanabilirsiniz.
Bu örnekte logomuzu ve navigasyon menümüzü ortaya sürükledik.
Özel Başlık bölümünden ayrıca retina cihazları için farklı bir logo kullanabilme, sitenizin başlığını ve görünürlüğünü değiştirebilme ve daha fazlası gibi daha fazla logo seçeneğine erişebilirsiniz.
Sepeti seçmek, bir kullanıcının alışveriş sepetini temsil eden simgeyi değiştirmenize ve bir müşterinin alışveriş sepeti toplamının görüntülenip görüntülenmediği, başlıktaki konumu ve bir kullanıcı alışveriş sepetini tıkladığında gerçekleşen eylem gibi diğer ayrıntıları özelleştirmenize olanak tanır.
C. Altbilginizi Özelleştirin
Altbilgilerin önemini gözden kaçırmak kolaydır, ancak müşteri deneyiminiz için üstbilginiz kadar paha biçilmez olduklarını kanıtlayarak insanlara aşağıdakiler gibi önemli öğelere hızlı ve kolay erişim sağlarlar:
- şartlar ve koşullar
- Gizlilik Politikası
- Nakliye Bilgisi
- Şirket iletişim bilgileri
- Sosyal medyaya bağlantılar.
WooCommerce temanızın altbilgisini özelleştirmek için özelleştirme menüsünden Altbilgi Oluşturucu seçeneğine dokunun.
Altbilginiz, istediğiniz gibi yeniden düzenleyebileceğiniz ve düzenleyebileceğiniz widget'lar kullanılarak oluşturulmuştur.
Konumlarını yeniden düzenlemek için Altbilgi Oluşturucunuzun altındaki sütunları kullanabilirsiniz.
Herhangi bir widget'a tıklayın ve tercih ettiğiniz konuma sürükleyin.
Buradan, özelleştirmek ve kendi içeriğinizi eklemek için sol paneldeki herhangi bir parçacığın adına tıklayın.
Örneğin, Sosyal Simgeler sekmesine tıklamak, sosyal medya profillerinize URL'ler eklemenize ve her platformu temsil eden simgeyi değiştirmenize olanak tanır.
Temanız, aktif olmadığınız sosyal platformların simgelerini gösteriyorsa, bu simgenin köşesindeki *x* sembolüne dokunarak bunları silmek kolaydır.
Ardından, bir dizi üçüncü taraf platformuna bağlantılar eklemek için Sosyal Simge Ekle özelliğini kullanabilirsiniz.
Son olarak, mağazanızın e-Ticaret öğelerini ve özelliklerini düzenlemek için özelleştirme menüsünden WooCommerce'i seçin.
Burada, oynamak için birçok farklı seçeneğiniz var. Bakmak isteyeceğiniz ana seçeneklerden bazıları şunlardır:
Ürün sayfalarınızın genel düzenini ve konumunu ayarlamak için bu sekmeyi kullanın.
Ürün kataloğu
Ürün Kataloğu altında, tüm ürünlerinizi görüntüleyen katalog sayfalarının genel düzenini özelleştirebilirsiniz.
Bu bölüm aynı zamanda katalog sayfalarınızda hangi detayların görüntüleneceğini ve bunların nasıl yapılandırıldığını belirlemenizi sağlar.
Tek Ürün Sayfası
Tek Ürün'ü seçmek, ürün sayfalarınızın görünümüne ince ayar yapmak için size daha fazla seçenek sunar; hangi bilgilerin görüntüleneceği, sayfadaki yapısı ve dönüşümleri artırmak için *Sepete Yapışkan Ekleme* özelliğinin etkinleştirilip etkinleştirilmeyeceği dahil.
Çıkış yapmak
Ödeme seçenekleri, müşterinin gönderi ayrıntılarındaki zorunlu alanlar, gizlilik politikanıza ve Şartlar ve Koşullarınıza bağlantılar ve daha fazlası dahil olmak üzere ödeme sayfanız üzerinde tam kontrol sağlar.
8. Tasarımınızı ve İçeriğinizi Özelleştirin
Tüm seçenekleriniz ayarlandığında, sayfalarınızı özelleştirme ve içerik ekleme eğlencesine başlamanın zamanı geldi.
Elementor sayfa oluşturucunun kendine geldiği yer burasıdır.
Başlamak için, web sitenizde özelleştirmek istediğiniz herhangi bir sayfayı açın ve Elementor ile Düzenle'yi tıklayın.
Bu, sayfayı kullanıcı dostu bir düzenleyicide açar ve bu da size sayfanızdaki içeriği değiştirmek için tam yetki verir.
Örneğin, ifadeyi değiştirmek, boyutu ve hizalamayı özelleştirmek ve bağlantılar eklemek için tek tek metin öğelerine tıklayabilirsiniz.
Stil'i tıklatmak, rengi, yazı tipini ve gölgeyi düzenlemek de dahil olmak üzere tek tek öğelerin stilini değiştirmek için size daha fazla seçenek sunar.
Sayfanıza yeni öğeler eklemek, bunları menüden seçmek, sayfaya sürüklemek ve yerlerine bırakmak kadar basittir.
Yukarıdaki örnekte, sütunlar oluşturmak için bir İç Bölüm öğesini yerine sürükleyerek yeni bir Öne Çıkan Ürünler bölümü oluşturduk.
Daha sonra bu sütunları resim yer tutucuları ve CTA düğmeleriyle doldurabiliriz.
Resim yer tutucusuna tıklamak, kendi ürün resimlerinizi yükleyip eklemenize olanak tanırken, düğmeye dokunduğunuzda, düğmenizdeki metni değiştirebileceğiniz ve o öğe için doğru ürün sayfasına bağlayabileceğiniz bir özelleştirme menüsü açılır.
Yapmak istediğiniz tüm düzenlemeleri yaptıktan sonra Güncelle'yi tıklayın ve bunlar sitenizin yayındaki sürümüne yansıtılacaktır.
Bu işlemi ürünleriniz, 'Hakkımızda' içeriği, iletişim sayfası ve web sitenizdeki diğer tüm içerikler için tekrarlayın, hepsi bu kadar. WooCommerce WordPress temanız artık tamamen özelleştirilmiştir ve müşterileri çekmeye ve çevrimiçi işletmeniz için satış oluşturmaya başlamanıza yardımcı olmaya hazırdır.
WooCommerce WordPress Temanızı Özelleştirme: Son Bir Tavsiye
Gördüğünüz gibi, WooCommerce WordPress temanızı potansiyel olarak özelleştirmenin neredeyse sonsuz sayıda yolu var. Kaliteli bir tema, özelleştirme menüleri ve Elementor gibi bir sayfa oluşturucunun bir kombinasyonunu kullanarak, neredeyse her piksel üzerinde tam kontrole sahip olacaksınız.
Yine de, bugün size bırakabileceğimiz son bir tavsiye varsa, o da şudur:
Lütfen aşırıya kaçmayın.
Çevrimiçi mağazanızı oluşturmak ne kadar eğlenceli olsa da, sırf yapabildiğiniz için öğeleri ekleyip düzenleyerek kendinizi kaptırmak kolaydır. Bunu yaparak, sayfa yükleme hızlarınızı olumsuz yönde etkileyecek ve müşterilerinizi bunaltacak kadar çok özellikle sitenizi aşırı yükleme riskini alırsınız.
Unutmayın, e-Ticaret başarısının anahtarı, keyifli alışveriş deneyimleri yaratarak müşterilerin istedikleri ürünleri bulmalarını ve hızlı ve zahmetsizce ödemelerini mümkün olduğunca kolaylaştırmaktır.
Bunu göz önünde bulundurarak, WooCommerce temanızı nasıl özelleştireceğinizi düşünürken her şeyden önce son kullanıcılarınızı aklınızda bulundurun ve bu değişiklikleri yalnızca, bu kullanıcıları tutacak türden sorunsuz, eğlenceli bir deneyim sunacağına ikna olduğunuzda yapın. tekrar tekrar mağazanıza geri geliyor.