Bir WooCommerce WordPress Teması Nasıl Özelleştirilir: Adım Adım Kılavuz

Yayınlanan: 2023-03-28

Bö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.

tema kurulum sihirbazını başlatın - astra

Kurulum sihirbazına, temayı yükledikten sonra panonuzdaki bildirim aracılığıyla erişebilirsiniz.

Makale Aşağıda Devam Ediyor

WooCommerce wordpress tema başlangıç ​​şablonu

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.

bir sayfa oluşturucu seçin

Üçü 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

bir başlangıç ​​şablonu seçin - e-ticaret

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.

e-ticaret şablonunu seçerek seçenekler

Bu eğitimin geri kalanında, favori Astra WooCommerce şablonumuz Özel Baskı ile çalışacağız.

4. Logonuzu Yükleyin

logonuzu yükleyin bir woocommerce temasını özelleştirin

İstediğiniz şablonu bulduğunuzda, özelleştirmeye başlamak için üzerine tıklamanız yeterlidir.

Makale Aşağıda Devam Ediyor

Site Alanı Barındırma

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

logo woocommerce temasını özelleştir

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.

renkleri ve yazı tiplerini seçin - bir woocommerce temasını özelleştirin

Yine, seçtiğiniz renkler sağ taraftaki önizlemeye yansıtılacaktır.

renkleri ve yazı tiplerini seçin - bir woocommerce temasını özelleştirin 2. adım

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.

WooCommerce sitenizi oluşturun - bir WooCommerce temasını özelleştirin

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.

WooCommerce sitenizi oluşturun WooCommerce temasını özelleştirin

İşiniz bittiğinde, özelleştirilmeye hazır basit bir web siteniz olacak.

Makale Aşağıda Devam Ediyor

WooCommerce barındırma

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.

woocommerce wordpress temanıza ince ayar yapmak için özelleştiriciyi kullanın

Başlamak için, WordPress panonuzdan Görünüm – Özelleştir'e gidin.

woocommerce wordpress tema önizlemenize ince ayar yapmak için özelleştiriciyi kullanın

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

küresel stil seçenekleri - woocommerce temasını özelleştirin

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.

küresel stil seçenekleri - woocommerce temasını özelleştirin 2. adım

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.

küresel stil seçenekleri - woocommerce temasını özelleştirin 3. adım


Benzer şekilde, seçtiğiniz renkler size pek uygun değilse, sitenizdeki tek tek öğelerin renklerini düzenleyebileceğiniz Renkler 'i seçin.

küresel stil seçenekleri - woocommerce temasını özelleştirin 4. adım

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:

küresel stil seçenekleri - woocommerce temasını özelleştirin 5. adım

Boyut, şekil, renk ve kenarlıklar dahil olmak üzere Harekete Geçirici Mesaj düğmelerinizin her ayrıntısını değiştirin.

küresel stil seçenekleri - woocommerce temasını özelleştirin 6. adım

En üste kaydırmayı etkinleştirerek kullanılabilirliği artırın

B. Özel Bir Başlık Oluşturun

özel bir başlık oluşturun - woocommerce temasını özelleştirin

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.

özel bir başlık oluşturun - woocommerce temasını özelleştirin 2. adım

Burada, üç temel başlık öğesini yeniden düzenlemek için ekranın altındaki sütunları kullanabilirsiniz.

özel bir başlık oluşturun - woocommerce temasını özelleştirin 3. adım

Bu örnekte logomuzu ve navigasyon menümüzü ortaya sürükledik.

özel bir başlık oluşturun - woocommerce temasını özelleştirin 4. adım

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

özel bir başlık oluşturun - woocommerce temasını özelleştirin 5. adım

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.
altbilginizi özelleştirin - woocommerce temasını özelleştirin

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.

altbilginizi özelleştirin - woocommerce temasını özelleştirin, adım 2

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.

altbilginizi özelleştirin - woocommerce temasını özelleştirin 3. adım

Buradan, özelleştirmek ve kendi içeriğinizi eklemek için sol paneldeki herhangi bir parçacığın adına tıklayın.

altbilginizi özelleştirin - woocommerce temasını özelleştirin 4. adım

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

altbilginizi özelleştirin - woocommerce temasını özelleştirin, adım 5

Temanız, aktif olmadığınız sosyal platformların simgelerini gösteriyorsa, bu simgenin köşesindeki *x* sembolüne dokunarak bunları silmek kolaydır.

altbilginizi özelleştirin - woocommerce temasını özelleştirin 6. adım

Ardından, bir dizi üçüncü taraf platformuna bağlantılar eklemek için Sosyal Simge Ekle özelliğini kullanabilirsiniz.

temadaki woocommerce seçeneklerinizi özelleştirin

Son olarak, mağazanızın e-Ticaret öğelerini ve özelliklerini düzenlemek için özelleştirme menüsünden WooCommerce'i seçin.

2. tema adımında woocommerce seçeneklerinizi özelleştirin

Burada, oynamak için birçok farklı seçeneğiniz var. Bakmak isteyeceğiniz ana seçeneklerden bazıları şunlardır:

woocommerce temasını özelleştir genel

Ürün sayfalarınızın genel düzenini ve konumunu ayarlamak için bu sekmeyi kullanın.

Ürün kataloğu

woocommerce tema ürün kataloğunu özelleştirin

Ürün Kataloğu altında, tüm ürünlerinizi görüntüleyen katalog sayfalarının genel düzenini özelleştirebilirsiniz.

woocommerce temasını özelleştirin ürün kataloğu adım 2

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ı

woocommerce temasını özelleştirin 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

woocommerce tema ödemesini özelleştir

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

tasarımınızı ve içeriğinizi özelleştirin

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.

tasarımınızı ve içeriğinizi özelleştirin adım 2

Örneğin, ifadeyi değiştirmek, boyutu ve hizalamayı özelleştirmek ve bağlantılar eklemek için tek tek metin öğelerine tıklayabilirsiniz.

tasarımınızı ve içeriğinizi özelleştirin adım 3

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.

tasarımınızı ve içeriğinizi özelleştirin adım 4

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.

tasarımınızı ve içeriğinizi özelleştirin adım 5

Daha sonra bu sütunları resim yer tutucuları ve CTA düğmeleriyle doldurabiliriz.

tasarımınızı ve içeriğinizi özelleştirin adım 6

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.

tasarımınızı ve içeriğinizi özelleştirin adım 7

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.