WooCommerce Checkout Arka Plan Rengi Nasıl Değiştirilir

Yayınlanan: 2021-04-19

WooCommerce Checkout Arka Plan Rengini Değiştirin Ödeme sayfasındaki formların arka plan rengini değiştirmenin bir yolunu mu arıyorsunuz? Ödeme sayfası optimizasyonu, WooCommerce mağaza sahipleri tarafından sıklıkla gözden kaçan bir alandır.

WooCommerce esnek olduğu için popüler olmaya devam ediyor. Sitenizdeki farklı bölümleri değiştirmek için kendi özel kodunuzu ekleyebilirsiniz.

Ödeme sayfasındaki arka plan rengini değiştirmek isteyebilirsiniz. Varsayılan olarak, WooCommerce bunu yapmak için yerleşik bir çözüme sahip değildir.

Bir eklenti kullanabilirsiniz, ancak özel kod kullanmanızı öneririz. Bunun nedeni sitenizi şişirebilmeleridir.

WooCommerce Checkout Arka Plan Rengini Değiştirin

Bu gönderinin sonunda, ödeme sayfası formlarının arka plan rengini değiştirebilmelisiniz.

Ancak, sitenizin tek tip bir tasarım içermesi gerektiğini unutmamak önemlidir. Bu, sepet ve ödeme sayfasındaki formların arka plan rengini değiştirmemiz gerektiği anlamına gelir.

Ayrıca form alanlarını, yer tutucu metnini ve tüm WooCommerce düğmelerini de şekillendireceğiz.

Ödeme sayfasına, ödeme kutusunu, kupon alanını ve açılır menüleri özelleştirmek için kod eklediğimizi de belirtmekte fayda var.

WooCommerce Checkout Arka Plan Rengini Değiştirme Adımları

Bu bölümde, WooCommerce sepetini, ödemeyi ve hesap sayfalarını sitenizin geri kalanıyla eşleşecek şekilde özelleştirmek için CSS kodunu kullanacağız.

Ödeme sayfası şu şekilde görüntülenir: ödeme sayfası

İşte izlemeniz gereken adımlar:

  1. WordPress sitenize giriş yapın ve yönetici kullanıcı olarak Gösterge Tablosuna erişin.
  2. Pano menüsünden Görünüm > Özelleştir'e tıklayın.
  3. Bu, ekranın sol tarafındaki özelleştirme panelini başlatacaktır.
  4. Ek CSS bağlantısını tıklayın ve aşağıdaki CSS kodunu ekleyin:
 


/*** MAIN FORMS BACKGROUND COLOR ***/

.woocommerce table.shop_table,

.woocommerce form.checkout_coupon,

.woocommerce form.login,

.woocommerce form.register,

#add_payment_method #payment,

.woocommerce-cart #payment,

.woocommerce-checkout #payment,

#customer_details,

h3#order_review_heading,

form.woocommerce-EditAccountForm.edit-account {

            border: 0 !important; /* you can add a border if you prefer */

            background: #f5f5f5; /* this is the main background color for all forms */

}

/*** FORM AND OTHER PADDING ***/

#customer_details,

form.woocommerce-EditAccountForm.edit-account,

h3#order_review_heading {

            padding: 30px 20px;

}

/*** ADJUST FORM ROUNDED EDGES ***/

#customer_details {

            border-top-left-radius: 5px;

            border-top-right-radius: 5px;

}

.woocommerce-checkout-review-order table.shop_table {

            border-top-left-radius: 0;

            border-top-right-radius: 0;

}

/*** FIELDS ON CHECKOUT, CART, ACCOUNT PAGES ***/

.woocommerce-account input,

.woocommerce-checkout input,

#order_comments.input-text {

            background-color: #f5f5f5 !important;

            color: black !important; /* not the placeholder, the text color when typed */

            border: 0; /* optional */

}

/*** COUPON FIELD ONLY ***/

.woocommerce-page #coupon_code.input-text { /* if you want your coupon different from other fields */

            background-color: black !important;

            color: blue !important;

            font-size: 16px !important; /* if you don't want the default giant font on the coupon field */

}

/*** PLACEHOLDER TEXT ON ALL WOO PAGES ***/

.woocommerce-page ::-webkit-input-placeholder {

    color: red !important;

}

.woocommerce-page :-ms-input-placeholder {

    color: red !important;

}

.woocommerce-page ::-moz-placeholder {

    color: red !important;

}

.woocommerce-page :-moz-placeholder { /* this isn't the same as above don't delete */

    color: red !important;

}

/*** THIS COMPENSATES FOR SHIP TO DIFF ADDRESS FIELD NOT ALIGNING ***/

h3#ship-to-different-address {

            margin-top: -3px;

}

/*** ALL WOO BUTTONS ***/

.woocommerce button.button.alt,

.woocommerce-page button.button.alt,

.woocommerce a.button,

.woocommerce-page a.button,

.woocommerce button.button,

.woocommerce-page button.button {

            text-transform: capitalize !important;

            background: #ffa500 !important;

            color: #222 !important;

}

.woocommerce button.button.alt:hover,

.woocommerce-page button.button.alt:hover,

.woocommerce a.button.alt:hover,

.woocommerce-page a.button.alt:hover,

.woocommerce a.button:hover,

.woocommerce-page a.button:hover,

.woocommerce button.button:hover,

.woocommerce-page button.button:hover {

            background: #00adad !important;

            color: #fff !important;

}

/*** PAYMENT BOX ON CHECKOUT ***/

#add_payment_method #payment div.payment_box,

.woocommerce-cart #payment div.payment_box,

.woocommerce-checkout #payment div.payment_box {

            background-color: #15bf86;

            color: #fff;

}

#add_payment_method #payment div.payment_box::before,

.woocommerce-cart #payment div.payment_box::before,

.woocommerce-checkout #payment div.payment_box::before {

            border-bottom-color: #15bf86;

}

#add_payment_method #payment ul.payment_methods,

.woocommerce-cart #payment ul.payment_methods,

.woocommerce-checkout #payment ul.payment_methods {

            border-bottom: 0;

}

/*** BORDERS AND TABLES ***/

.woocommerce form .form-row input.input-text,

.woocommerce form .form-row textarea {

            border: 0;

}

.woocommerce table.shop_table td,

#add_payment_method .cart-collaterals .cart_totals tr td,

#add_payment_method .cart-collaterals .cart_totals tr th,

.woocommerce-cart .cart-collaterals .cart_totals tr td,

.woocommerce-cart .cart-collaterals .cart_totals tr th,

.woocommerce-checkout .cart-collaterals .cart_totals tr td,

.woocommerce-checkout .cart-collaterals .cart_totals tr th,

.woocommerce table.shop_table tbody th,

.woocommerce table.shop_table tfoot td,

.woocommerce table.shop_table tfoot th,

.woocommerce-checkout #main-content .cart-subtotal td {

            border-top: 2px solid #fff;

}

.woocommerce table.shop_table_responsive tr:nth-child(2n) td,

.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {

            background: transparent;

}

.woocommerce-checkout #content-area table th,

.woocommerce-checkout #content-area table td {

            padding-left: 20px;

}

.woocommerce form .form-row input.input-text,

.woocommerce form .form-row textarea {

            font-size: 18px;

}

/*** EXISTING ACCOUNT / ERROR BOXES BACKGROUND COLOR ***/

.woocommerce-message,

.woocommerce-error,

.woocommerce-info {

            background: #b33f62 !important;

}

/*** ORDER NOTES ON CHECKOUT ***/

.woocommerce-checkout .woocommerce form .form-row textarea {

            height: 150px; /* height of optional notes box */

}

/*** STATE DROPDOWN SELECT COLOR ***/

.select2-container--default .select2-results__option--highlighted[aria-selected],

.select2-container--default .select2-results__option--highlighted[data-selected] {

            background: #ffa500;

}

/*** QUANTITY BOX ***/

.woocommerce #content .quantity input.qty,

.woocommerce .quantity input.qty,

.woocommerce-cart table.cart td.actions .coupon .input-text,

.woocommerce-page #content .quantity input.qty,

.woocommerce-page .quantity input.qty {

            color: #fff !important;

            background: #222 !important;

            height: 46px; /* you may need to change this based on your font size */

}
  1. Divi gibi bir tema kullanıyorsanız, kodu eklemek için tema seçenekleri > özel CSS kutusuna tıklayın.
  2. Tıklamayı unutmayın Sonuç budur: Yayınlasepet sayfası

Çözüm

Müşterilerin satın alma işleminden önceki son adım olduğu için ödeme sayfasını özelleştirmek önemlidir. Ancak yaptığınız değişiklikler sitenizin tasarımına uygun olmalıdır.

Benzer Makaleler

  1. Çıkış Yaptıktan Sonra WooCommerce Yönlendirmesi [Ultimate Guide]
  2. Ödemeden Sonra WooCommerce Yönlendirme: Özel Teşekkür Sayfasına Yönlendir
  3. Fatura Ayrıntıları Nasıl Düzenlenir WooCommerce Ödeme Sayfası
  4. WooCommerce'de Minimum Harcama ile Ücretsiz Gönderim Nasıl Kurulur
  5. WooCommerce Mobil Ödeme Optimizasyonu Hızlı Kılavuzu
  6. WooCommerce'e Para Birimi Nasıl Eklenir [Özel Para Birimi]
  7. WooCommerce'de Ödeme Yaptıktan Sonra Sipariş Ayrıntıları Nasıl Alınır?
  8. WooCommerce On Sale Rozeti Nasıl Gizlenir, Değiştirilir veya Kaldırılır
  9. WooCommerce Checkout Alan Yer Tutucusu Nasıl Kurulur
  10. WooCommerce E-posta Renkleri Nasıl Değiştirilir
  11. URL'ye Dayalı Aktif Gezinme Sınıfı Nasıl Eklenir
  12. WordPress'te (PHP) do_shortcode nasıl kullanılır?
  13. WooCommerce'de Mağaza Sayfasına Arama Nasıl Eklenir
  14. WooCommerce'de Özel Kategori Sayfası Nasıl Oluşturulur
  15. WooCommerce'de Programlı Olarak Sepete Ürün Nasıl Eklenir
  16. WooCommerce'de Çıkışta Sepet Nasıl Temizlenir
  17. Kullanıcının WordPress'te Oturum Açmış Olup Olmadığı Nasıl Kontrol Edilir
  18. WooCommerce'de Kupon Nasıl Oluşturulur
  19. WooCommerce'de Ödeme URL'si Nasıl Alınır
  20. WooCommerce'de Para Birimi Sembolü Nasıl Değiştirilir