Elementor ile muhteşem bir WooCommerce ürün sayfası oluşturun ve tasarlayın

E-ticaret mağazanızı rakiplerinizden ayırmak ve müşterilerinize benzersiz bir deneyim sunmak için ürün sayfanızda değişiklik yapmalısınız. Ayrıca ürün sayfanızı estetik olarak kişiselleştirme seçeneği, çevrimiçi mağazanızın tamamında tutarlı bir görsel tasarımın sürdürülmesi açısından kritik öneme sahiptir.

Elementor, piyasadaki önde gelen WordPress web sitesi oluşturucularından biridir, ancak onu kullanarak WooCommerce mağazaları oluşturabileceğinizi de biliyor muydunuz?

Birçok yerleşik Elementor WooCommerce modülü, WooCommerce içeriğini veya işlevsellik bloklarını eklemenize veya Elementor oluşturucuyu kullanarak bunları şekillendirmenize olanak tanır. Oldukça harika, değil mi?

WooCommerce'i şekillendirmek ve özelleştirmek eskiden her küçük değişiklik için PHP ve CSS gerektiriyordu, ancak Elementor gibi araçlar gelişip daha karmaşık hale geldikçe, mağazanızın görünüşünü ve çalışma şeklini kontrol altına almak için giderek daha fazla seçenek kullanılabilir hale geliyor.

Başlayalım.

• Elementor şablonu oluşturma
• Building Elementor ürün görseli veya galerisi
• WooCommerce ürün başlığı, fiyatı ve sepete ekleme
• Elementor ürün sekmelerini ayarlama
• Elementor ürün kısa açıklaması
• Elementor ve WooCommerce ürün satışları
• Sonuç – Elementor ürün sayfası oluşturucu

Elementor şablonu oluşturma

Prosedürdeki ilk adım, WordPress kontrol panelindeki Şablonlar'a giderek yeni bir Elementor şablonu oluşturmaktır. 'Yeni Oluştur'u tıklayın ve oluşturmak istediğiniz şablon olarak Tek ürün'ü seçin.

Bu şablonu sıfırdan geliştirdiğimiz için herhangi bir blok koymaya gerek kalmıyor; Yeni bir sayfa için olağan Elementor oluşturucu ekranına ulaşana kadar sonraki kutudan çıkın.

Building Elementor ürün görseli veya galerisi

Her WooCommerce Ürününün, ürünün fotoğraflarını müşterilere gösteren bir ürün resmi veya resim galerisi vardır. Elementor, bunu şablonumuza eklememize olanak tanıyan yerleşik bir Ürün Görselleri modülü sağlar.

2 sütunluk basit bir satır oluşturun ve sol sütundaki Ürün Görselleri modülüne girin; bu pratik görünüyor ve işi görüyor, ancak satış rozetini bu makalede kullanılan Elementor Merhaba Temasına uyacak şekilde özelleştirelim. Bunu yapmak için Gelişmiş > Özel CSS kısmına giderek tanıtabileceğimiz özel CSS'den küçük bir satır uygulamamız ve aşağıdaki kodu yapıştırmamız gerekiyor.

seçici .onsale { \sbackground-color: #cc3366 ; \S}

WooCommerce ürün başlığı, fiyatı ve sepete ekleme

Ürün Başlığı, Ürün Fiyatı ve Sepete sağdaki sütuna ekleyeceğiz

Elementor yapıcısında bu üç modülü arayın, ardından bunları yukarıda belirtilen sıraya göre düzenlemek için sürükleyip bırakın; bu tamamen işlevseldir, ancak yukarıdaki Hello Elementor teması bölümündeki stile uyacak şekilde özelleştirmek istiyoruz. Elementor ile modülleri şekillendirmek kolaydır; yapmanız gereken tek şey modüle tıklamak ve düzenleyicinin sol taraftaki stil seçeneklerini açması gerekir.

Bu modüllerin içeriği mükemmeldir. Böylece Stil sekmesi altında çalışacağız. Öncelikle Ürün Başlığının yazı tipini ve rengini Hello Elementor temasında kullanılanlarla eşleşecek şekilde güncelleyelim.

Daha sonra her modülün üzerine tıklayıp metin rengini değiştirerek Ürün Fiyatı ve Sepete Ekle modülleri için aynı işlemi yapmamız gerekiyor. Ürün Fiyatı için, başlığa kontrast oluşturmak için koyu gri kullanacağım, bu yüzden takip ediyorsanız bu onaltılık kodu yazın – #54595f

Daha sonra Sepete Ekle modülünde birkaç şeyi güncelleyeceğiz. Aşağıdaki ayarlar kullanılarak düğmenin arka plan rengi ve düğmenin kenarlık yarıçapı:

• İçeriği 'Sepete ekle' olarak ayarlayın.
• Arka plan rengini '#cc3366' olarak ayarlayın
• Kenarlık yarıçapını 0'a ayarlayın

Miktar seçicinin kenarlık yarıçapını 0 olarak değiştirdim; bunu Miktar için Stil sekmesinde yapabilirsiniz.

Elementor ürün sekmelerini ayarlama

Her ürünün, ürün açıklaması ve varsa incelemeler gibi bazı temel bilgileri görüntülemesi gerekir; bu genellikle ürün sekmeleri aracılığıyla gerçekleştirilir.

Lütfen üst bölümün altında yeni bir satır oluşturun ve eklemek için Ürün Veri Sekmeleri modülünü Elementor oluşturucusundan bu satıra sürükleyin. Bazı stilleri Hello Elementor temasından devraldığı için burada çok fazla stile gerek yok. Ancak inceleme gönderme düğmesinin stilini değiştirelim.

Bunu yapmak için yine biraz özel CSS'ye ihtiyacımız olacak. Ürün Verileri Sekmelerini düzenlemeye başlayın, ardından Gelişmiş sekmesine tıklayın ve Özel CSS'ye ilerleyin. Aşağıdaki CSS'yi girin ve renkleri tasarımınıza göre ayarlayabilirsiniz.

.woocommerce #review form #reply .form-submit input { arka plan rengi: #cc3366; renk: #fff; sınır yarıçapı: 0px; }

Elementor ürün kısa açıklaması

Tamam, şu ana kadar düzgün, basit görünümlü bir tasarımımız var ama biraz seyrek görünüyor. Üst kısma bir Ürün Kısa Açıklaması modülü eklemek, bunu gidermenize ve daha fazla bağlam eklemenize yardımcı olabilir.

Lütfen WooCommerce Kısa Açıklama modülünü arayın ve ardından Ürün Fiyatının altına ve Sepete Ekle Modülünün üstüne sürükleyip bırakın.

Stiller Hello Elementor'dan devralındığı için henüz burada herhangi bir stile gerek yok.

Elementor ve WooCommerce ürün satışları

Ortalama sepet değerinizi artırmak her WooCommerce sitesi için çok önemlidir; bu nedenle, özelleştirmeyi mağazanıza kolayca entegre edebilmeniz için Elementor'un bir Ürün Ek Satış modülü içermesi güzel.

Lütfen Elementor oluşturucuda ürün Üst Satış modülünü arayın ve bunu Ürün Veri Sekmelerinin arkasındaki yeni bir satıra ekleyin.

Gördüğünüz gibi, tarzımızın geri kalanını tamamlamak için biraz ayarlama yapılması gerekiyor. Modülü değiştirmeye başlayın ve aşağıdaki değişiklikleri yapın:

• Başlık rengini – #cc3366 olarak ayarlayın
• Başlık rengini – #cc3366 olarak ayarlayın
• Fiyat rengini – #54595f olarak ayarlayın
• Düğme arka plan rengini – #cc3366 olarak ayarlayın
• Düğme rengini – #fff olarak ayarlayın
• Düğme kenarlığı yarıçapını t0 – 0 olarak ayarlayın

Bitmiş ürün yukarıdaki gibi görünecek. Bu kılavuzu şablonunuz için bir başlangıç ​​noktası olarak kullanırsanız, renk hex kodunu uygun gördüğünüz şekilde ayarlayabilirsiniz.

İşiniz bittiğinde şablonunuzu yayınlarsınız. Bir sonraki pencerede “Şablonunuzu nerede görüntülemek istiyorsunuz?” sorusunu göreceksiniz. Bu şablonun ne zaman kullanılması gerektiğini belirlemek için "Koşul Ekle"ye tıklayın. Şablonu tüm ürün sayfalarınızda kullanmak için “Tüm Ürünler”i seçebilirsiniz. Bu şablonu yalnızca belirli bir kategoriye giren veya bunlarla ilişkilendirilmiş belirli bir etikete sahip ürünler için kullanmayı da seçebilirsiniz.

Sonuç – Elementor ürün sayfası oluşturucu

Bazı kullanıcılar, Elementor'u kullanırken yazı tipi rengi ve tipografi gibi özelleştirilmiş tasarım ayarlarının görüntülenmesinde zorluk yaşayabilir. Mağazanızın görünümünü kontrol edebilen bir WordPress teması kullanıyorsanız WooCommerce mağazanızın görünümü etkilenebilir. Bu sorunla karşılaşırsanız bazı durumlarda makalenizin özel sayfa ayarlarınızı geçersiz kılabileceğini unutmayın.

Ayrıca boş bir sayfa seçebilir ve tamamen özelleştirilmiş bir görünüm için ürün widget'larını kullanarak sıfırdan bir sayfa oluşturabilirsiniz. Boş bir sayfa kullanın, şablon kitaplığı açılır penceresini göründüğünde kapatın ve yeni oluşturulan sayfada oluşturmaya başlayın. Özel "Sepete Ekle" düğmesi, "Ürün Fiyatı", "Ürün Resmi" ve "Ürün Başlığı ve Açıklaması", ürün sayfanızı özelleştirmek için kullanabileceğiniz WooCommerce widget'larından yalnızca birkaçıdır. Bu sayfayı ziyaret ederek şu anda mevcut olan farklı widget'ların tümüne bakabilirsiniz. İsterseniz widget'ları sayfa düzeninde istediğiniz yere yerleştirebilir ve stillerini istediğiniz görünüme uyacak şekilde özelleştirebilirsiniz.

E-ticaret mağazanızı rakiplerinizden ayırmak ve müşterilerinize benzersiz bir deneyim sunmak için ürün sayfanızda değişiklik yapmalısınız. Ayrıca ürün sayfanızı estetik olarak kişiselleştirme seçeneği, çevrimiçi mağazanızın tamamında tutarlı bir görsel tasarımın sürdürülmesi açısından kritik öneme sahiptir. Elementor, WooCommerce mağazanızın sayfalarını özelleştirmek için harika bir araçtır ve şiddetle tavsiye edilir. Sayfa oluşturucu, kullanımının basit olmasının yanı sıra, özel ürün sayfaları oluşturmanıza yardımcı olacak gerekli tüm widget'ları ve stil seçeneklerini içerir. Bu öğreticiyi bilgilendirici bulduğunuzu ve WooCommerce ürününüzü ve ürün arşivi sayfalarınızı Elementor kullanarak özelleştirmek için ihtiyaç duyduğunuz bilgileri sağladığınızı umuyoruz. Geçmişte WooCommerce sayfaları oluşturmak için Elementor'u kullandınız mı? Düşüncelerinizi yorum kısmında paylaşabilirsiniz. Bir göz atmaktan memnuniyet duyarız.