WooCommerce düğmelerinin rengini değiştirmek için, varsayılan style.css düğme dosyasını değiştirmemiz veya değiştirmemiz gerekiyor. Bunu yapmak için, bir eklememiz gerekecek özel CSS kodu bizim için çocuğun WordPress teması.

Bunu yapmanın iki yolu vardır:

• Alt tema style.css dosyasına özel bir CSS ekleyin
• Web sayfalarınıza özel CSS kodu eklemek için bazı eklentileri kullanın.

1 Adım: WordPress Basit Özel CSS üzerine eklentisini yükleyin ve etkinleştirin

kullanacağız WordPress Plugin CSS kodunu bir sitenin sayfalarına enjekte etmek için WooCommerce Online Mağazası. Eklentiyi indirebilirsiniz: Basit Özel CSS

Bizim öğretici okuyabilirsiniz WordPress eklentisinin kurulumu ve aktivasyonu.

Eklentiyi etkinleştirdikten sonra menüye yeni bir alt menü eklenecek Apparence :

Bu bölüme erişim sizi, özel CSS kodunu girebileceğiniz bir metin kutusu içeren bir arayüze götürür.

Aşağıdaki CSS’yi metin kutusuna koyun ve ardından " Güncelleme Özel CSS".

.woocommerce #content input.button.alt: .woocommerce #respond giriş # submit.alt, hover: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: .woocommerce sayfa düğmesini hover: .woocommerce sayfa #content input.button.alt hover: hover, .woocommerce sayfa girişi #respond # submit.alt: hover, .woocommerce sayfa a.button.alt. button.alt: .woocommerce sayfa input.button.alt hover: hover {background: red önemli; background-color: red önemli; ! Renk: beyaz önemlidir; text-shadow: şeffaf önemli; box-shadow: none; border-color: #ca0606 önemli; } .woocommerce #content Input.button: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce sayfa # .woocommerce #respond giriş # göndermek, hover mutlu input.button: hover .woocommerce sayfa a.button: hover, .woocommerce sayfa button.button: hover, .woocommerce sayfa input.button: .woocommerce sayfa girişi #respond # göndermek, hover hover {background :! kırmızı önemli; background-color: red önemli; ! Renk: beyaz önemlidir; text-shadow: şeffaf önemli; box-shadow: none; border-color: #ca0606 önemli; } .woocommerce #content Input.button, .woocommerce #respond giriş #, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce sayfa #content input.button, .woocommerce sayfa # teslim # girişi, .woocommerce sayfa a.button, .woocommerce sayfa button.button, .woocommerce sayfa input.button yanıt göndermek {background: red önemli; ! Renk: beyaz önemlidir; text-shadow: şeffaf önemli; border-color: #ca0606 önemli; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond giriş # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: .woocommerce sayfa düğmesini hover: .woocommerce sayfa #content input.button.alt hover: hover, .woocommerce sayfa girişi #respond # submit.alt: hover, .woocommerce sayfa a.button.alt .button.alt: .woocommerce sayfa input.button.alt hover: hover {background: red önemli; box-shadow: none; text-shadow: şeffaf önemli; ! Renk: beyaz önemlidir; border-color: #ca0606 önemli; }

Artık çevrimiçi mağazanıza erişebilirsiniz, düğmelerin gerçekte renkleri değiştiğini fark edeceksiniz.

Nihayet istediğiniz görünüme sahip olmak için düğmelerin rengini özelleştirmek için,

Mülkü değiştir " backgroud: Kırmızı önemli! Tarafından Seçtiğiniz renk. Kodları güncelleyin ve çevrimiçi mağazanıza tekrar erişin. Aslında, size az önce sağladığımız stili kullanarak, düğmelerin yapısını tamamen değiştirebileceksiniz.

Biraz araştırma ile tarzınıza uygun benzersiz düğmeler oluşturabileceksiniz. WordPress tema (özellikle ikincisi WooCommerce ile uyumlu değilse).

Aşağıdaki örnek için aşağıdaki CSS kodunu kullanabilirsiniz.

.woocommerce #content input.button, .woocommerce #respond giriş #, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce sayfalık #content input.button göndermek, .woocommerce sayfalık #respond # girişi .woocommerce sayfalık a.button, .woocommerce sayfalık button.button, .woocommerce sayfalık input.button {background-color gönderin: #6fba26; dolgu: 10px; konum: göreceli; font-family: 'Open Sans', sans-serif; yazı tipi boyutu: 12px; text-decoration: none; Renk: #fff; Arka plan resim: lineer gradyan (alt RGB (100,170,30) 0% RGB (129,212,51) 100%); kutu gölge: ilave 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; Çerçeve-yarıçapı: 5px; } .woocommerce #content input.button.alt: gelin .woocommerce #respond giriş # submit.alt: vurgulu, .woocommerce a.button.alt: vurgulu, .woocommerce button.button.alt: vurgulu, .woocommerce input.button .alt: .woocommerce sayfalık düğmesine hover: .woocommerce sayfalık #content input.button.alt hover: hover, .woocommerce sayfalık girişini #respond # submit.alt: hover, .woocommerce sayfalık a.button.alt .button.alt: .woocommerce sayfalık input.button.alt hover: üst hover {: 7px; Arka plan resim: lineer gradyan (alt RGB (100,170,30) 100% RGB (129,212,51) 0%); kutu gölge: içerlek 0px 1px 0px #0D496F, ek 0px -1px 0px #0D496F; Renk: #156785; Metin-gölge: 0px 1px 1px RGBA (255,255,255,0.3); Arka plan: RGB (44,160,202); }

Çevrimiçi mağazalarının performansını, ürünlerin dönüşümü veya satışı bakımından optimize etmek isteyenler için,

Ayrıca, bu görev için tasarlanmış 3 premium WordPress eklentileri de sunuyoruz.

1. WoCommerce Recover Terk edilmiş Sepet

müşterilerinizin sık sık sepetleri doldurun ve bırakın: Terk Sepeti Kurtar WooCommerce Onlarla iletişim kurabilecek, ne satın aldıklarını hatırlatabilecek ve eylemlerini tamamlamaları için onları davet edebileceksiniz.

Bir alışveriş sepetinin terk edildiği zaman ile müşterinize, ne yaptıklarını görmeleri için satın alma sayfasına doğrudan bir bağlantı içeren kişiselleştirilmiş bir hatırlatma e-postasının gönderilmesi arasındaki zaman aralığını ayarlayın satın almak için gelin.

Indir | gösteri | Web hosting

2. WooCommerce Fiyatı Gizle ve Sepete Ekle Düğme Eklentisi

WooCommerce Fiyatları Gizle eklentisi, tüccarların fiyatları gizlemek için birden fazla kural oluşturmasına veya oturum açmamış müşterilerden veya e-ticaret web sitenize belirli erişim haklarına sahip kullanıcılardan "sepete ekle" düğmesini gizlemelerine olanak tanır.

Belirli ürünlerde veya belirli kategorilerde fiyatı ve "sepete ekle" düğmesini gizleyebilirsiniz. Bunları özel metinle veya onları ana sayfaya götürecek bir düğmeyle değiştirebilirsiniz.  İletişim formu. Fiyatı otomatik olarak gizleyecek sayıda kural ve " Paniğe ekler ”ne istediğinize bağlı olarak.

Indir | gösteri | Web hosting

3. WooCommerce Para Birimi Değiştirici

Bu eklenti, gerçek zamanlı olarak ürün fiyatlarını bir para biriminden diğerine değiştirmenize olanak sağlar.

Bu, tüm dünyayı hedeflediği için e-Ticarette özellikle önemlidir. Bu eklenti, müşterilerinizin nerede olurlarsa olsunlar, her zaman çevrimiçi mağazanızdan sipariş verebilmelerini sağlar.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Size yardımcı olacak diğer önerilen kaynakları keşfedin çevrimiçi mağazanızın performansını optimize edin. 

• 50 WooCommerce eklentileri online mağaza geliştirmek için
• Bir ortaklık programı oluşturmak için 9 WordPress eklentileri
• Değişken ürünlerinizin niteliklerini geliştirmek için 9 WooCommerce eklentileri
• 5 WordPress eklentileri, blogunuzda CSS’yi görsel olarak düzenlemek için

Sonuç

Burada ! Hepsi düğme özelleştirmeye adanmış bu öğretici için Sepete ekle WooCommerce'den. Arkadaşlarınızla paylaşmaktan çekinmeyin. sosyal ağlar tercih edilir. 

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Ancak bu arada, bize Yorumlar ve özel bölümdeki öneriler.

...