WooCommerce Storefront CSS için Özelleştirme Kılavuzu
200.000’den fazla aktif kurulumla, mağaza temaları WooCommerce Core’un geliştiricisi tarafından tasarlanmış, geliştirilmiş ve yönetilmektedir. Bu nedenle resmi WooCommerce teması olarak adlandırıldı. Bu tema WooCommerce gibi esnek olacak şekilde tasarlanmıştır. En son sürüm 40’tan fazla eylem ve 60’dan fazla kanca filtresine sahiptir. WooCommerce Shop CSS mağazası, ana soru, temanızın görünümünü ve düzenini nasıl değiştirebileceğinizdir. Deneyimli bir WordPress kullanıcısıysanız, bu bir sorun olmayacaktır. Ellerinin CSS ve PHP ile kirli olmasını istemeyen kullanıcılar, temayı ayarlamakta zorlanıyor. Bu öğretici için bazı kodlama becerilerine sahip olmalısınız. Ek CSS bölümüne CSS kurallarını ayarlamalarla ekleyeceğiz.
Bu bölümü kullanmanın avantajı, WordPress ayarının gerçek zamanlı olarak düzenlemenize izin vermesidir. Değişikliklerinizi yayınlayabilmeniz için yaptığınız değişiklikleri görebilirsiniz. Ayrıca, mağaza temasının ayarlanırken aktif bir tema olması gerektiği de belirtilmelidir. Bu yazıda, mağaza temasında CSS özelleştirme oluşturmak için ana kılavuzu vereceğim. İşin püf noktası, değiştirmeniz ve bu öğeye kurallar eklemeniz gereken öğeleri tanımlamaktır. Bununla birlikte, mağaza teması için kullanabileceğiniz bazı CSS kuralları. 1. Buradaki başlık boyutunu ayarlayın Özelleştirici temasını tekrar kullanacağız, ancak ‘Ek CSS’ bölümüne bazı CSS kodunu yazacağız.
Aşağıdaki kodu ekleyin: * sandalye */
#Masthead.site-levers {
Yükseklik: 155px! Önemli;
Marj-Bawah: 0px
}
/ * Masthead için CSS hücresel */
@Media sadece ekran ve (maksimum genişlik: 320px) {
#Masthead.site-levers {
Yükseklik: 80px! Önemli; kenar boşluğu: 0px;
}
}
/ * Kutup Kafası Menüsü */
.Storefront-primary-navigation a, .cart-contents a {
Marj: 0 0 0 0;
}
.An-navigation ul {
Dolgu: 0 0 10px 4px! Önemli;
}
.An-navigation li {
Yükseklik: 38px! Önemli;}
/ * Masthead menüsü için CSS hücresel */
@Media sadece ekran ve (maksimum genişlik: 320px) {
.An-navigation ul {
Arka plan:#d6dde4! Önemli;
}
}
/ * Coop Alanı */
.Tajuk sitesi {
Dolgu Top: 0.5EM;
}
.Site-Header. Custom-Logo-Link IMG, .Site-Header .Site-Logo-Dashor IMG, .Site-Header. Site-logo-link IMG {
Marj -Bawah: -45px;
} İşte sonuç:
2. Başlık teması kafasından arama çubuğunu silin Bu kodu ‘Ek CSS’ bölümüne ekleyin. .Site-Header .widget_product_search { Ekran: Hiçbir şey;
} İşte sonuç:
3. Ayar başlığı menüsünün rengini değiştirme, başlığı istediğiniz renge göre ayarlamamızı sağlar. Bunu özelleştirmeye, ardından başlayarak ve istediğiniz rengi seçerek yapabilirsiniz. Ancak, bu seçenek arama çubuğu, giriş bölümü ve logo dahil tüm başlık alanını renklendirir. Başlık menüsüne farklı bir arka plan elde etmek için, ek CSS paneline aşağıdaki kod görüntülerini ekleyin. . Storefront-Private-Navigation,
.ain-navigation ul.Menu ul.sub-menu {
Arka plan rengi: yeşil;
} İşte sonuç:
4. Ana Gezinme Çubuğu mağaza temasını gizleyin, varsayılan olarak tüm sayfaları bir menü olarak görüntüleyin. Ana gezinme çubuğunu gizlemek istiyorsanız, menüyü kaldırmak yeterli değildir. Özelleştirmek için, ardından Ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin:. Storefront-Primary-Navigation { Ekran: Hiçbir şey;
} İşte sonuç:
5. Boş alanı başlıktan çıkarın, özelleştir, ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin: } İşte sonuç:
6. Arama çubuğunun genişliğini artırın Arama çubuğunun genişliğini uzatmak istiyorsanız ne yapacaksınız? Ek CSS bölümünü kullanarak aşağıdaki satırı ekleyin:.
Genişlik:%44.739; }
#Masthead .Site-Search .widget_product_search girişi [type = “Ara”] {
Genişlik: 700 piksel! Önemli;
} İşte sonuç:
7. Her şeyi aynı anda değiştirmek için logonun boyutunu, ikincil navigasyon ve arama çubuğunu nasıl değiştirir, ek CSS bölümünüze aşağıdaki kodu ekleyin: @media ekran ve (min-width: 768px) {{
/ * Logo */ .Site-Header .Site-Branding, .Site-Header .Site-Logo-Dashor, .Site-Header. Site-logo-link {genişlik:%30! Önemli; /* İsterseniz PX değerini kullanın, örn. 350 piksel */}
/ * İkincil navigasyon */
.Site-başlık. /* İsterseniz PX değerini kullanın, örn. 350 piksel */}
/ * Arama çubuğu */
.Site-Header. Site-Research {genişlik:%30! Önemli; /* İsterseniz PX değerini kullanın, örn. 350 piksel */} Sonuç:
8. Başlığın sepetini çıkarın Bu örnekte, yeni kurallar ekleyerek sepet simgesini sileceğim: none; ‘. Ek CSS’nin CSS bölümüne aşağıdaki CSS kodunu ekleyin :. Site-Header-Cart. Cart-Contents {
Ekran: Hiçbir şey; } İşte sonuç:
9. Üstbilgiyi gizlemek için başlığı gizleyin, CSS ek bölümüne aşağıdaki CSS kodunu ekleyin :.
Ekran: Hiçbir şey; } İşte sonuç:
10. Birçok kullanıcının tercihlerine göre, mağaza menü başlığındaki menü bağlantısının boyutunu biraz daha küçük artırın. Ancak, mağaza temasında menü bağlantısı yazı tipinin boyutunu artırmaları gerekir. Ek CSS bölümüne aşağıdaki kodu ekleyin: .ain-navigation ul.menu> li> a, .ain-navigation ul.nav-menu> Li> a {
Yazı tipi boyutu: 28px; } İşte sonuç:
11. Sepet başlıktaki sepet simgesinin boyutunu değiştirin, ek CSS bölümüne aşağıdaki CSS kodunu ekleyerek bunu yapabilirsiniz.
Yazı tipi boyutu: 30px;
} İşte sonuç: 12. Site Başlığı Başlığı Bozuk Tema Temasında Değiştirme Ek CSS bölümüne aşağıdaki kodu ekleyin :. Site Plant {
Yazı tipi boyutu: 20px;
} İşte sonuç: 13. Hücresel Menü Boyutunun Boyutunu Değiştirin Menü yönteminin görüntülenmesinin duyarlı bir menü oluşturmanın bir parçası olduğunu belirtmek önemlidir. Bu nedenle, ana gezinme menünüz bir masaüstü cihazında bir liste şeklinde ise, aynı menü mobil cihazlarda Hamburger menüsü olarak görüntülenebilir.
Boyutu değiştirmek için ek CSS bölümüne aşağıdaki CSS kodunu ekleyin :. düğmesi. Menü-toggle {
Yazı tipi boyutu: 19px; } İşte sonuç:
14. Ürün başlığını mağaza sayfasındaki mağaza sayfasındaki ürün başlığını gizleyin, özelleştirme bölümüne gidin, ardından ek CSS’ye gidin ve aşağıdaki satırları ekleyin: H2.Woocommerce-Loop-Product__title {
Ekran: Hiçbir şey! Önemli;
} İşte sonuç: 15. Ürünün miktarını eklemek veya azaltmak için metnin metnini artı ve eksi düğmelerle gizlemeniz için artı ve eksi ürün miktarı düğmesini ürün sayfasından gizleyin, tek yapmanız gereken aşağıdaki CSS kodunu eklemektir. Ek CSS bölümü:
. MİKTAR {
Ekran: Hiçbir şey! Önemli;} Bu sonuç: 16. Bunu yapmak için ürün sayfasındaki “Troli’ye Ekle” düğmesini gizleyin, sadece özelleştirme bölümüne gidin ve ardından bir CSS ekleyin ve aşağıdaki satırı ekleyin: .single_add_to_cart_button {
Ekran: Hiçbir şey! Önemli;
} İşte sonuç:
17. Mağaza yazı tipi widget’ın rengini ve boyutunu değiştirin, ayarları kullanarak sayfa widget’ının yazı tipinin rengini veya boyutunu değiştirmenin doğrudan bir yolu yoktur. Aşağıdaki CSS kod satırlarını ekleyerek kolayca değiştirebilirsiniz. Bunu yapmak için, özelleştirmek için, ardından ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin: .Widget-Area. Widget {
yeşil renk;
Yazı tipi boyutu: 1em;
19. Satış rozetinin rengini değiştirmek için “satış” rozetinin rengini değiştirin, sadece özelleştirmeye gidin, ardından ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:
Arka plan rengi: Siyah;
Sınır rengi: kırmızı;
kırmızı; } İşte sonuç:
20. “Artı-Eksi” kutusunun renginin miktarını değiştirin Miktar düğmesinin arka plan rengini ve eksi değiştirilerek yapılabilir. Bunu yapmak için, özelleştirmek için, ardından ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin:.
Renk: #000;
Renkler: #F5DF72;
} İşte sonuç: 21. Başlıktaki minicart arka plan rengini değiştirme başlık rengini değiştirirken, mini sepet açılır menü bu rengi devraldı. Ancak, görünürlüğü artırmak için aşağıdaki CSS kurallarını kullanarak değiştirebilirsiniz. Özelleştirmek için, ardından Ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin: .Woocommerce.widget_shopping_cart { Arka plan: kırmızı;
Sınırlar: 12 piksel;
} İşte sonuç:
22. Telif Hakkı altında CSS kullanarak altbilgi mağazasına resim ekleyin, kendi logonuzu eklemek veya telif hakkı metninin altına ortak rozeti eklemek istiyorsanız, katmana gidin, ayarlayın, ardından Footer’ı tıklayın. Paneli genişletmek için Özelleştirme’yi tıklayın ve arka plandaki görüntüyü seçin. Lütfen istediğiniz resmi seçin ve ekleyin. Tekrar ve alttan seçin veya istediğiniz gibi manuel olarak konumlandırın. Özelleştiriciye geri dönün ve paneli genişletmek için CSS’yi tıklayın. Ancak, yüzdenin spesifikasyonlarınızla eşleştiğinden emin olmalısınız. Sonra aşağıdaki satırı ekleyin: .info-situs: sonra { İçindekiler: ”;
Arka plan-görüntü: URL (kendi URL’nizi ekleyin);
Ekran bloğu;
Genişlik: 100 piksel; Yükseklik: 100 piksel;
Marj: 0 otomatik;
} İşte sonuç:
Altbilgideki boşluklardan nasıl kurtulur
Özelleştirmek için, ardından Ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin :. Footer-Widgets {Pilding-Top: 0; } İşte sonuç:
24. Varsayılan olarak köprünün alt çizgisini nasıl silir, mağaza teması bağlantının altını çizer ve silmek istiyorsanız, özelleştirmek için gezin, ardından ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin: A {
Metin dekorasyonu: Hiçbir şey! Önemli;
} İşte sonuç: 25. Mağazanın ön sayfasındaki yatay çizginin renginin nasıl değiştirilmesi, özel dosyaya aşağıdaki kodu ekleyin.
.Page-TEMPLATE-TEMPLATE-HOMPAGE. Vitrin Ürün Bölümü { Sınır rengi: kırmızı;
} 26. WooCommerce Storefront Satış Rozeti Nasıl Ayarlanır Ek CSS bölümünüze aşağıdaki kodu ekleyin :.
Arka plan rengi: #ffffff; Sınır rengi: #FF0000;
Renk: #FF0000;
} İşte sonuç:
27. WooCommerce mağaza altbilgisinin yüksekliği nasıl değiştirilir, ek CSS bölümüne aşağıdaki CSS kodunu ekleyerek WooCommerce mağaza altbilgisinin yüksekliğini değiştirmek çok kolaydır.
Dolgu Top: 25px;
}
div.situs-info {
Dolgu Top: 16px;
Rulman: 25px; } İşte sonuç:
28. Belirli bir ana sayfa teması tema mağazasının mağazasına arka plan görüntüleri eklemek Varsayılan varsayılan olarak, ürün kategorileri, en son ürünler, üstün ürünler, popüler ürünler, satış ürünleri ve en iyi satış ürünleri olmak üzere altı bölüm vardır. Ek CSS bölümüne aşağıdaki kodu ekleyin:
Arka plan-image: URL (URL’nizi buraya ekleyin);
Arka plan pozisyonu: orta orta;
Arka Plan-Tekrar: Tekrarlanmamış;
Arka plan boyutu: kapak;
-O-background boyutu: kapanış; } İşte sonuç:
29. Mağazanın ön sayfasına bir arka plan rengi ekleyin Bunu yapmak için önce rengi eklemek istediğiniz parçayı tanımlamanız gerekir. Bu, ek CSS bölümüne aşağıdaki kodu ekleyerek kolayca yapılabilir:
Arka plan rengi:#ffeb3b;
} İşte sonuç:
30. Verandanın unvanını nasıl sileceğiniz veya gizleyeceğiniz, bunu yapmak için önce silmek veya gizlemek istediğiniz parçayı tanımlamanız gerekir. Bu, ek CSS bölümüne aşağıdaki kodu ekleyerek yapılabilir: .storefront-recent-producsts.
.Storefront özellikli ürünler.
.Storefront-popüler ürünler. .Storefront-on-Sale-Producst.
.Storefront en iyi satan ürünler.
31. Satılık ürünün arka plan renginin nasıl değiştirilmesi Ek CSS bölümüne aşağıdaki kodu ekleyerek yapılabilir: Arka plan rengi:#ffeb3b;
} İşte sonuç:
32. Başlıksız bir sayfa için boşluklar nasıl otomatik olarak nasıl eklenir, herhangi bir sayfa için ana sayfanın başlığını her devre dışı bıraktığınızda, başlığın altında boşluk kalmamıştır. Bu kod görüntüleri, bir kaydırıcı, görüntü veya üstte düz olan başka bir içerik eklemek için boşluk eklemenize yardımcı olacaktır. Ek CSS bölümüne aşağıdaki kodu ekleyin: gövde.
Dolgu Top: 30px;
} İşte sonuç:
33. Telefondaki kaydırma düğmesi nasıl gizlenir Ek CSS bölümüne aşağıdaki kodu ekleyin: @Media sadece ekran ve (maksimum genişlik: 959px) {
#Site-Scroll-TOP {Display: Hiçbir Şey! Önemli; }
} İşte sonuç: Sonuç Bu kılavuzda, mağaza temaları düzenlemek için kullanabileceğiniz bazı CSS ipuçlarını paylaştım. Değişikliklerin önizlemesini gerçek zamanlı olarak görebilmeniz için Ek CSS bölümüne CSS kuralları eklemenizi şiddetle tavsiye ederim. Değişikliklerinizi önizleme, kuralları özelliklerinize göre değiştirmenize olanak tanır. Kural eklemek için, mağaza temasının özelleştirme arayüzünden “Ek CSS” bölümüne kopyalayın/yapıştırın. Bunu yapmak için: WordPress sitenizi girin ve yönetici kullanıcısı olarak gösterge tablosuna erişin.
Gösterge Tablosu menüsünden görünüm menüsüne tıklayın> Özelleştir.
Görünen tarafın sol tarafındaki ek CSS’ye gidin. CSS kuralları ekleyin.
Değişikliklerden memnunsanız, Yayınlama’yı tıklayın.
Bununla birlikte, burada paylaşılan CSS ipuçlarının yalnızca mağaza temaları için işlev gördüğünü belirtmek önemlidir. Benzer makaleler
Wooocommerce Mağazası Başlığının Yüksekliği Nasıl Ayarlanır WooCommerce Vitrinde Ana Sayfayı Nasıl Kurar
WooCommerce Storefront Tema Oturum Açma Seçenek Menüsü [Örnek]
Mağaza wooocommerce tema sloganı nasıl değiştirilir
Ana yazı tipi yazı tipinin boyutu nasıl değiştirilir tema mağazası
WooCommerce Storefront Başlığı CSS CSS CSS CSS Kılavuzu
WooCommerce Vitrini Verandadaki Tüm Kategorileri Göster
Hücresel Menü Düğmesi Dükkanı Teması’nın Boyutu Nasıl Değiştirilir
Menü penceresinin rengini nasıl değiştirir Wooocommerce
Wooocommerce dükkanı ekranının yüksekliği nasıl değiştirilir
Altbilgi mağazası teması wooCommerce nasıl kaldırılır
WooCommerce mağazasının büyüklüğü nasıl değiştirilir Temalar teması
Tema başlığı wooocommerce mağazası nasıl silinir
Ev Özelleştirme Teması WooCommerce Shop [Ana Kılavuz]
Wooocommerce dükkanının üstün görüntüsünün boyutu nasıl değiştirilir
Woocommerce Storefront Tema Kategorisi’ni gizlemek için bölünebilen divi hücresel menü için hızlı bir onarım çözümü nasıl yapılır
Wooocommerce Mağazası temasında sepet simgesinin boyutu nasıl değiştirilir
WooCommerce Vitrin Temasıyla İlgili Ürünler Nasıl Silinir
En çok satan wooocommerce dükkanının ön sayfası nasıl gizlenir
Bu bölümü kullanmanın avantajı, WordPress ayarının gerçek zamanlı olarak düzenlemenize izin vermesidir. Değişikliklerinizi yayınlayabilmeniz için yaptığınız değişiklikleri görebilirsiniz. Ayrıca, mağaza temasının ayarlanırken aktif bir tema olması gerektiği de belirtilmelidir. Bu yazıda, mağaza temasında CSS özelleştirme oluşturmak için ana kılavuzu vereceğim. İşin püf noktası, değiştirmeniz ve bu öğeye kurallar eklemeniz gereken öğeleri tanımlamaktır. Bununla birlikte, mağaza teması için kullanabileceğiniz bazı CSS kuralları. 1. Buradaki başlık boyutunu ayarlayın Özelleştirici temasını tekrar kullanacağız, ancak ‘Ek CSS’ bölümüne bazı CSS kodunu yazacağız.
Aşağıdaki kodu ekleyin: * sandalye */
#Masthead.site-levers {
Yükseklik: 155px! Önemli;
Marj-Bawah: 0px
}
/ * Masthead için CSS hücresel */
@Media sadece ekran ve (maksimum genişlik: 320px) {
#Masthead.site-levers {
Yükseklik: 80px! Önemli; kenar boşluğu: 0px;
}
}
/ * Kutup Kafası Menüsü */
.Storefront-primary-navigation a, .cart-contents a {
Marj: 0 0 0 0;
}
.An-navigation ul {
Dolgu: 0 0 10px 4px! Önemli;
}
.An-navigation li {
Yükseklik: 38px! Önemli;}
/ * Masthead menüsü için CSS hücresel */
@Media sadece ekran ve (maksimum genişlik: 320px) {
.An-navigation ul {
Arka plan:#d6dde4! Önemli;
}
}
/ * Coop Alanı */
.Tajuk sitesi {
Dolgu Top: 0.5EM;
}
.Site-Header. Custom-Logo-Link IMG, .Site-Header .Site-Logo-Dashor IMG, .Site-Header. Site-logo-link IMG {
Marj -Bawah: -45px;
} İşte sonuç:
2. Başlık teması kafasından arama çubuğunu silin Bu kodu ‘Ek CSS’ bölümüne ekleyin. .Site-Header .widget_product_search { Ekran: Hiçbir şey;
} İşte sonuç:
3. Ayar başlığı menüsünün rengini değiştirme, başlığı istediğiniz renge göre ayarlamamızı sağlar. Bunu özelleştirmeye, ardından başlayarak ve istediğiniz rengi seçerek yapabilirsiniz. Ancak, bu seçenek arama çubuğu, giriş bölümü ve logo dahil tüm başlık alanını renklendirir. Başlık menüsüne farklı bir arka plan elde etmek için, ek CSS paneline aşağıdaki kod görüntülerini ekleyin. . Storefront-Private-Navigation,
.ain-navigation ul.Menu ul.sub-menu {
Arka plan rengi: yeşil;
} İşte sonuç:
4. Ana Gezinme Çubuğu mağaza temasını gizleyin, varsayılan olarak tüm sayfaları bir menü olarak görüntüleyin. Ana gezinme çubuğunu gizlemek istiyorsanız, menüyü kaldırmak yeterli değildir. Özelleştirmek için, ardından Ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin:. Storefront-Primary-Navigation { Ekran: Hiçbir şey;
} İşte sonuç:
5. Boş alanı başlıktan çıkarın, özelleştir, ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin: } İşte sonuç:
6. Arama çubuğunun genişliğini artırın Arama çubuğunun genişliğini uzatmak istiyorsanız ne yapacaksınız? Ek CSS bölümünü kullanarak aşağıdaki satırı ekleyin:.
Genişlik:%44.739; }
#Masthead .Site-Search .widget_product_search girişi [type = “Ara”] {
Genişlik: 700 piksel! Önemli;
} İşte sonuç:
7. Her şeyi aynı anda değiştirmek için logonun boyutunu, ikincil navigasyon ve arama çubuğunu nasıl değiştirir, ek CSS bölümünüze aşağıdaki kodu ekleyin: @media ekran ve (min-width: 768px) {{
/ * Logo */ .Site-Header .Site-Branding, .Site-Header .Site-Logo-Dashor, .Site-Header. Site-logo-link {genişlik:%30! Önemli; /* İsterseniz PX değerini kullanın, örn. 350 piksel */}
/ * İkincil navigasyon */
.Site-başlık. /* İsterseniz PX değerini kullanın, örn. 350 piksel */}
/ * Arama çubuğu */
.Site-Header. Site-Research {genişlik:%30! Önemli; /* İsterseniz PX değerini kullanın, örn. 350 piksel */} Sonuç:
8. Başlığın sepetini çıkarın Bu örnekte, yeni kurallar ekleyerek sepet simgesini sileceğim: none; ‘. Ek CSS’nin CSS bölümüne aşağıdaki CSS kodunu ekleyin :. Site-Header-Cart. Cart-Contents {
Ekran: Hiçbir şey; } İşte sonuç:
9. Üstbilgiyi gizlemek için başlığı gizleyin, CSS ek bölümüne aşağıdaki CSS kodunu ekleyin :.
Ekran: Hiçbir şey; } İşte sonuç:
10. Birçok kullanıcının tercihlerine göre, mağaza menü başlığındaki menü bağlantısının boyutunu biraz daha küçük artırın. Ancak, mağaza temasında menü bağlantısı yazı tipinin boyutunu artırmaları gerekir. Ek CSS bölümüne aşağıdaki kodu ekleyin: .ain-navigation ul.menu> li> a, .ain-navigation ul.nav-menu> Li> a {
Yazı tipi boyutu: 28px; } İşte sonuç:
11. Sepet başlıktaki sepet simgesinin boyutunu değiştirin, ek CSS bölümüne aşağıdaki CSS kodunu ekleyerek bunu yapabilirsiniz.
Yazı tipi boyutu: 30px;
} İşte sonuç: 12. Site Başlığı Başlığı Bozuk Tema Temasında Değiştirme Ek CSS bölümüne aşağıdaki kodu ekleyin :. Site Plant {
Yazı tipi boyutu: 20px;
} İşte sonuç: 13. Hücresel Menü Boyutunun Boyutunu Değiştirin Menü yönteminin görüntülenmesinin duyarlı bir menü oluşturmanın bir parçası olduğunu belirtmek önemlidir. Bu nedenle, ana gezinme menünüz bir masaüstü cihazında bir liste şeklinde ise, aynı menü mobil cihazlarda Hamburger menüsü olarak görüntülenebilir.
Boyutu değiştirmek için ek CSS bölümüne aşağıdaki CSS kodunu ekleyin :. düğmesi. Menü-toggle {
Yazı tipi boyutu: 19px; } İşte sonuç:
14. Ürün başlığını mağaza sayfasındaki mağaza sayfasındaki ürün başlığını gizleyin, özelleştirme bölümüne gidin, ardından ek CSS’ye gidin ve aşağıdaki satırları ekleyin: H2.Woocommerce-Loop-Product__title {
Ekran: Hiçbir şey! Önemli;
} İşte sonuç: 15. Ürünün miktarını eklemek veya azaltmak için metnin metnini artı ve eksi düğmelerle gizlemeniz için artı ve eksi ürün miktarı düğmesini ürün sayfasından gizleyin, tek yapmanız gereken aşağıdaki CSS kodunu eklemektir. Ek CSS bölümü:
. MİKTAR {
Ekran: Hiçbir şey! Önemli;} Bu sonuç: 16. Bunu yapmak için ürün sayfasındaki “Troli’ye Ekle” düğmesini gizleyin, sadece özelleştirme bölümüne gidin ve ardından bir CSS ekleyin ve aşağıdaki satırı ekleyin: .single_add_to_cart_button {
Ekran: Hiçbir şey! Önemli;
} İşte sonuç:
17. Mağaza yazı tipi widget’ın rengini ve boyutunu değiştirin, ayarları kullanarak sayfa widget’ının yazı tipinin rengini veya boyutunu değiştirmenin doğrudan bir yolu yoktur. Aşağıdaki CSS kod satırlarını ekleyerek kolayca değiştirebilirsiniz. Bunu yapmak için, özelleştirmek için, ardından ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin: .Widget-Area. Widget {
yeşil renk;
Yazı tipi boyutu: 1em;
} İşte sonuç:
18. WooCommerce mağaza temasının varsayılan ürün sürümündeki mağaza “satışları” gösterin, belirli ürünler için satış veya indirim fiyatlarını belirlemenize olanak tanır. Ancak, ürün resmine bir satış rozeti eklemek, özelleştirmeye, ardından ek CSS bölümüne gitmek ve aşağıdaki satırları eklemek istiyorsanız: UL.
Pozisyon: Mutlak;
Yukarıda: 137px;
Sağ: 62 piksel;
19. Satış rozetinin rengini değiştirmek için “satış” rozetinin rengini değiştirin, sadece özelleştirmeye gidin, ardından ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:
Arka plan rengi: Siyah;
Sınır rengi: kırmızı;
kırmızı; } İşte sonuç:
20. “Artı-Eksi” kutusunun renginin miktarını değiştirin Miktar düğmesinin arka plan rengini ve eksi değiştirilerek yapılabilir. Bunu yapmak için, özelleştirmek için, ardından ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin:.
Renk: #000;
Renkler: #F5DF72;
} İşte sonuç: 21. Başlıktaki minicart arka plan rengini değiştirme başlık rengini değiştirirken, mini sepet açılır menü bu rengi devraldı. Ancak, görünürlüğü artırmak için aşağıdaki CSS kurallarını kullanarak değiştirebilirsiniz. Özelleştirmek için, ardından Ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin: .Woocommerce.widget_shopping_cart { Arka plan: kırmızı;
Sınırlar: 12 piksel;
} İşte sonuç:
22. Telif Hakkı altında CSS kullanarak altbilgi mağazasına resim ekleyin, kendi logonuzu eklemek veya telif hakkı metninin altına ortak rozeti eklemek istiyorsanız, katmana gidin, ayarlayın, ardından Footer’ı tıklayın. Paneli genişletmek için Özelleştirme’yi tıklayın ve arka plandaki görüntüyü seçin. Lütfen istediğiniz resmi seçin ve ekleyin. Tekrar ve alttan seçin veya istediğiniz gibi manuel olarak konumlandırın. Özelleştiriciye geri dönün ve paneli genişletmek için CSS’yi tıklayın. Ancak, yüzdenin spesifikasyonlarınızla eşleştiğinden emin olmalısınız. Sonra aşağıdaki satırı ekleyin: .info-situs: sonra { İçindekiler: ”;
Arka plan-görüntü: URL (kendi URL’nizi ekleyin);
Ekran bloğu;
Genişlik: 100 piksel; Yükseklik: 100 piksel;
Marj: 0 otomatik;
} İşte sonuç:
Altbilgideki boşluklardan nasıl kurtulur
Özelleştirmek için, ardından Ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin :. Footer-Widgets {Pilding-Top: 0; } İşte sonuç:
24. Varsayılan olarak köprünün alt çizgisini nasıl silir, mağaza teması bağlantının altını çizer ve silmek istiyorsanız, özelleştirmek için gezin, ardından ek CSS bölümünü ekleyin ve aşağıdaki satırları ekleyin: A {
Metin dekorasyonu: Hiçbir şey! Önemli;
} İşte sonuç: 25. Mağazanın ön sayfasındaki yatay çizginin renginin nasıl değiştirilmesi, özel dosyaya aşağıdaki kodu ekleyin.
.Page-TEMPLATE-TEMPLATE-HOMPAGE. Vitrin Ürün Bölümü { Sınır rengi: kırmızı;
} 26. WooCommerce Storefront Satış Rozeti Nasıl Ayarlanır Ek CSS bölümünüze aşağıdaki kodu ekleyin :.
Arka plan rengi: #ffffff; Sınır rengi: #FF0000;
Renk: #FF0000;
} İşte sonuç:
27. WooCommerce mağaza altbilgisinin yüksekliği nasıl değiştirilir, ek CSS bölümüne aşağıdaki CSS kodunu ekleyerek WooCommerce mağaza altbilgisinin yüksekliğini değiştirmek çok kolaydır.
Dolgu Top: 25px;
}
div.situs-info {
Dolgu Top: 16px;
Rulman: 25px; } İşte sonuç:
28. Belirli bir ana sayfa teması tema mağazasının mağazasına arka plan görüntüleri eklemek Varsayılan varsayılan olarak, ürün kategorileri, en son ürünler, üstün ürünler, popüler ürünler, satış ürünleri ve en iyi satış ürünleri olmak üzere altı bölüm vardır. Ek CSS bölümüne aşağıdaki kodu ekleyin:
Arka plan-image: URL (URL’nizi buraya ekleyin);
Arka plan pozisyonu: orta orta;
Arka Plan-Tekrar: Tekrarlanmamış;
Arka plan boyutu: kapak;
-O-background boyutu: kapanış; } İşte sonuç:
29. Mağazanın ön sayfasına bir arka plan rengi ekleyin Bunu yapmak için önce rengi eklemek istediğiniz parçayı tanımlamanız gerekir. Bu, ek CSS bölümüne aşağıdaki kodu ekleyerek kolayca yapılabilir:
Arka plan rengi:#ffeb3b;
} İşte sonuç:
30. Verandanın unvanını nasıl sileceğiniz veya gizleyeceğiniz, bunu yapmak için önce silmek veya gizlemek istediğiniz parçayı tanımlamanız gerekir. Bu, ek CSS bölümüne aşağıdaki kodu ekleyerek yapılabilir: .storefront-recent-producsts.
.Storefront özellikli ürünler.
.Storefront-popüler ürünler. .Storefront-on-Sale-Producst.
.Storefront en iyi satan ürünler.
31. Satılık ürünün arka plan renginin nasıl değiştirilmesi Ek CSS bölümüne aşağıdaki kodu ekleyerek yapılabilir: Arka plan rengi:#ffeb3b;
} İşte sonuç:
32. Başlıksız bir sayfa için boşluklar nasıl otomatik olarak nasıl eklenir, herhangi bir sayfa için ana sayfanın başlığını her devre dışı bıraktığınızda, başlığın altında boşluk kalmamıştır. Bu kod görüntüleri, bir kaydırıcı, görüntü veya üstte düz olan başka bir içerik eklemek için boşluk eklemenize yardımcı olacaktır. Ek CSS bölümüne aşağıdaki kodu ekleyin: gövde.
Dolgu Top: 30px;
} İşte sonuç:
33. Telefondaki kaydırma düğmesi nasıl gizlenir Ek CSS bölümüne aşağıdaki kodu ekleyin: @Media sadece ekran ve (maksimum genişlik: 959px) {
#Site-Scroll-TOP {Display: Hiçbir Şey! Önemli; }
} İşte sonuç: Sonuç Bu kılavuzda, mağaza temaları düzenlemek için kullanabileceğiniz bazı CSS ipuçlarını paylaştım. Değişikliklerin önizlemesini gerçek zamanlı olarak görebilmeniz için Ek CSS bölümüne CSS kuralları eklemenizi şiddetle tavsiye ederim. Değişikliklerinizi önizleme, kuralları özelliklerinize göre değiştirmenize olanak tanır. Kural eklemek için, mağaza temasının özelleştirme arayüzünden “Ek CSS” bölümüne kopyalayın/yapıştırın. Bunu yapmak için: WordPress sitenizi girin ve yönetici kullanıcısı olarak gösterge tablosuna erişin.
Gösterge Tablosu menüsünden görünüm menüsüne tıklayın> Özelleştir.
Görünen tarafın sol tarafındaki ek CSS’ye gidin. CSS kuralları ekleyin.
Değişikliklerden memnunsanız, Yayınlama’yı tıklayın.
Bununla birlikte, burada paylaşılan CSS ipuçlarının yalnızca mağaza temaları için işlev gördüğünü belirtmek önemlidir. Benzer makaleler
Wooocommerce Mağazası Başlığının Yüksekliği Nasıl Ayarlanır WooCommerce Vitrinde Ana Sayfayı Nasıl Kurar
WooCommerce Storefront Tema Oturum Açma Seçenek Menüsü [Örnek]
Mağaza wooocommerce tema sloganı nasıl değiştirilir
Ana yazı tipi yazı tipinin boyutu nasıl değiştirilir tema mağazası
WooCommerce Storefront Başlığı CSS CSS CSS CSS Kılavuzu
WooCommerce Vitrini Verandadaki Tüm Kategorileri Göster
Hücresel Menü Düğmesi Dükkanı Teması’nın Boyutu Nasıl Değiştirilir
Menü penceresinin rengini nasıl değiştirir Wooocommerce
Wooocommerce dükkanı ekranının yüksekliği nasıl değiştirilir
Altbilgi mağazası teması wooCommerce nasıl kaldırılır
WooCommerce mağazasının büyüklüğü nasıl değiştirilir Temalar teması
Tema başlığı wooocommerce mağazası nasıl silinir
Ev Özelleştirme Teması WooCommerce Shop [Ana Kılavuz]
Wooocommerce dükkanının üstün görüntüsünün boyutu nasıl değiştirilir
Woocommerce Storefront Tema Kategorisi’ni gizlemek için bölünebilen divi hücresel menü için hızlı bir onarım çözümü nasıl yapılır
Wooocommerce Mağazası temasında sepet simgesinin boyutu nasıl değiştirilir
WooCommerce Vitrin Temasıyla İlgili Ürünler Nasıl Silinir
En çok satan wooocommerce dükkanının ön sayfası nasıl gizlenir
