WooCommerce için Tasarımcı Kılavuzu

Shopify gibi bir WooCommerce mağazası tasarlıyorsanız veya mevcut bir WooCommerce teması geliştiriyorsanız, bu WooCommerce Tasarımcılar Kılavuzu makalesi tam size göre. Bu kompozisyon, stil, değişen tasarımlar ve ilgili WooCommerce sayfalarını kapsayan diğer bilgiler hakkında biraz daha bilgi verir.

Bu eklenti, kullanıcı dostu bir araçtır ve çok esnektir; ancak, tüm web siteleri desteklenmeyecektir. WooCommerce tarafından desteklenen özellikleri ve yaklaşımları kullanarak tasarım ve geliştirme sürecini hızlandırabilirsiniz.

Kullanıcıların değişiklikleri özelleştirmesine izin verir, ancak ek maliyetle. Hangi özelliklerin olduğunu görmenin en hızlı yolu, WooCommerce içindeki Storefront demosunu ziyaret etmektir. Genel olarak WooCommerce'i nasıl kullanacağınızı öğrenmek için bir yola ihtiyacınız varsa, başlamanıza yardımcı olması için kubbe kılavuzlarına bakın. WooCommerce aşağıdaki yeni sayfaları oluşturur. Tasarım yapmanız gereken sayfa türleri vardır.

Birincisi Ürün Sayfaları. Bu sayfaların iki türü vardır: Ürün Arşiv Sayfaları ve Ürün Tek Sayfaları.

Ürün Arşivi Sayfaları , mevcut ürün kategorileri için küçük resimler görüntüler. Bunlar, kategori küçük resmine tıkladığınızda başka bir ürün arşivi sayfasını gösterir. Ardından, bir ürün küçük resmine tıkladığınızda tek ürünü görüntüler.

Diğer tür ise Ürün Tek Sayfalarıdır. Burada, bunlar tek ürünleri görüntüler ve ürün resimlerini, ürün başlık bilgilerini, ürünün ayrıntılı bilgilerini ve ilgili ürünleri, çapraz satışları ve satışları birleştirir.

Ayrıca Alışveriş Sepeti ve Ödemeyi içeren Özel Sayfaları vardır. Alışveriş Sepetleri genellikle bir kenar çubuğu widget'ı olarak sıkıştırılmış biçimde, bazen de Teslimat bilgileriyle birlikte Sepet sayfasında genişletilmiş biçimde görüntülenir. Ödeme ise müşterinin çıkış yaptığı zamandır ve adres bilgisi gerektirir.

Farklı Ürün Çeşitleri

Bu araç, farklı Ürün türlerine sahiptir;

Birincisi, beş parçaya bölünmüş Ürün Başlığıdır. Bunlar:

1. Ürün Adı – bunlar özet/arşiv sayfalarında ve tek sayfalarda gösterilir
2. Ürün Özelliği – Özet/arşiv sayfalarında ve single sayfalarında göreceksiniz
3. Görsel – Öne Çıkan görseller özette ve ek görsellerde tek ürün sayfasında görüntülenir
4. Uzun Açıklama – Bu, tek ürün sayfasının altındaki Ürün Açıklaması alanında gösterilir.
5. Kısa Açıklama – Bu, tek ürün sayfasının en üstünde gösterilir

Bu araç aynı zamanda bir kullanıcının ürüne erişmesine de izin verecektir.

Her kategori, sağlanan bir kategori resmine ve bir açıklamaya ihtiyaç duyar ve alt kategorileri de olabilir. Örneğin, Ayakkabı bir kategoridir ve ayakkabı markası bir alt kategoridir. Ürün Kategorisi arşivleri, aşağıdaki bölümlerle otomatik olarak oluşturulur: başlık veya kategori adı, kategori açıklaması, mevcut kategorinin her alt kategorisi için bir kategori küçük resmi, isteğe bağlı ürün küçük resimleri, içindeki her ürün için başlığı, fiyatı ve Sepete Ekle'yi içerir. geçerli kategori. Bir kategoriye tıklandığında yeni bir kategori açılır, bir ürün küçük resmine tıklandığında ürün açılır.

Ayrıca, Ürün Sayfaları altında, bunlar aşağıdakilerle otomatik olarak oluşturulur:

Ürün resimleri – Bunlar, ürün için öne çıkan resimler ve ek resimlerdir. Ürün başlığı, ürün fiyatı, ürün kısa Açıklama, Sepete eklenecek miktar (+ ve kontrollerle), Sepete Ekle Düğmesi, Ürün SKU (stok tutma Birimi) kategorileri ve etiketler.

Ürün sekmeleri, isteğe bağlı resim galerisi dahil olmak üzere ürün uzun açıklamasını, ürün sayfasında görüntülenecek ürün özellikleri bileti gibi ek bilgileri ve isteğe bağlı ürün incelemelerini içerir. Bir kategoriye tıklandığında yeni bir kategori açılır, bir ürün küçük resmine tıklandığında ürün açılır.

Upsells - Bunlar, yukarı satışlar için başparmaklar/başlıklar tarafından takip edilen "beğenebilirsiniz" şeydir.

Çapraz satışlar – Bunlar, küçük resimlerin takip ettiği ilgili ürünlerdir.

Ürün sunumu, seçenekler Standart ve Opsiyonel sunumdur. Standart, öne çıkan görseli ürün sayfasının üst kısmında, ek görsel küçük resimlerinin altında 3 küçük resim sütunu halinde görüntüler. Buna karşılık, İsteğe bağlı sunum, öne çıkan resmi altında küçük resim olmadan görüntüler ve tüm resimleri Açıklama sekmesinde görüntüler.

Aracın diğer bir kısmı, kenar çubuğu widget'larına veya altbilgi widget'larına yerleştirilebilen ürün arama widget'larıdır. Herhangi bir web sitesini aramak istiyorsanız, Site Geniş Arama Seçeneklerine sahiptir. Bunun altında bir ürün adı, kısa açıklama ve uzun açıklama aramanıza izin veren ürün arama kutusu bulunur. Geniş arama seçeneklerinin diğer bölümü, kategori detaylandırması olarak adlandırılır. Herhangi bir kategori veya alt kategori seçimine izin veren açılır bir alandır. Gururlu etiket bulutu kiti, fiyat etiketlerini seçmenizi sağlayacak bir açılır listeye sahiptir.

Ürün Kategorisi Arama Seçenekleri arama widget'ları, yalnızca otomatik olarak oluşturulan ürün kategorisi arşivleri görüntülendiğinde görünecektir. Birincisi Katmanlı Navigasyon. Bu, kullanıcının ürünleri niteliklere göre hassaslaştırmasına olanak tanır ve kullanıcıya aradığı şey konusunda etkin bir şekilde yardımcı olur. Ürün Fiyat Filtresi—bu, ürünlerin bir fiyat aralığına göre filtrelenmesini sağlayan kayan bir ölçek görüntüler. En çok satanlar—bu, otomatik olarak seçilen en çok satan ürünler listesi için başlık/başparmak/fiyat görüntüler. Öne çıkan ürün, Öne Çıkan Ürünler olarak işaretlenen ürünler için başlık/başparmak/fiyat görüntüler. Satışta: Fiyatlarına ek olarak İndirim Fiyatı girilmiş ürünleri görüntüler.

Bir kullanıcı WooCommerce'lerini şekillendirmek isterse, Ürün başparmakları gibi seçeneklerimiz vardır. Ürünler ürün başparmakları olarak göründüğünde, 4 öğe görüntülenir, bunlar arasında küçük resim, başlık, fiyat, sepete ekle. Ürün arka planı, ürün kenarlığı, dolgu ve kenar boşluğu için kullanılabilen CSS stili. Sonraki küçük resim. Bunlar kenarlık, dolgu ve kenar boşluklarını içerir. Başlık, fiyatla aynı şekilde yazı tipi, ağırlık, renk ve boyutu içerir. Sepete ekle altında düğme rengi, etiket rengi, kenarlık ve yarıçap bulunur.

Araçta da gösterilen Satış Etiketi, indirimdeki ürün başparmaklarının üzerinde 'satış' kelimesi görünür—CSS stili kullanılabilir: arka plan rengi, yazı tipi rengi, kenarlık rengi. Kenarlık genişliği, düz/kesik kenarlık, kenarlık yarıçapı.

Ürün varyasyonları, müşterinin farklı renklerde veya farklı tasarımlarda mevcut olan bir giyim ürünü oluşturmasına olanak tanır. Ürün varyasyonları kullanıldığında, ürün arşiv sayfalarında Sepete Ekle düğmesi yerine "Seçenekler Seç" düğmesi görüntülenecektir.

Özetle, bir WooCommerce mağazası tasarlarken düşünmeniz gereken ana unsurları belirledik. Farklı sayfa türlerini, ürün bilgilerini, arama ve stil seçeneklerini açıkladık. WooCommerce mağazanızı kurarken iyi eğlenceler.

WooCommerce WordPress Temaları hakkında daha fazla bilgiyi buradan okuyun.