Cara Mengubah Warna Latar Belakang Pembayaran WooCommerce

Diterbitkan: 2021-04-19

Ubah Warna Latar Belakang Pembayaran WooCommerce Apakah Anda mencari cara untuk mengubah warna latar belakang formulir di halaman checkout? Optimalisasi halaman checkout adalah area yang sering diabaikan oleh pemilik toko WooCommerce.

WooCommerce terus menjadi populer karena fleksibel. Anda dapat menambahkan kode kustom Anda sendiri untuk mengubah bagian yang berbeda di situs Anda.

Anda mungkin ingin mengubah warna latar belakang pada halaman checkout. Secara default, WooCommerce tidak memiliki solusi bawaan untuk melakukan ini.

Anda dapat menggunakan plugin, tetapi kami menyarankan untuk menggunakan kode khusus. Ini karena mereka mungkin membuat situs Anda membengkak.

Ubah Warna Latar Belakang Pembayaran WooCommerce

Pada akhir posting ini, Anda harus dapat mengubah warna latar belakang formulir halaman checkout.

Namun, penting untuk dicatat bahwa situs Anda harus menyertakan desain yang seragam. Ini berarti bahwa kita harus mengubah warna latar belakang formulir pada halaman keranjang dan pembayaran.

Kami juga akan menata bidang formulir, teks placeholder, dan semua tombol WooCommerce.

Perlu juga disebutkan bahwa kami telah menyertakan kode untuk menyesuaikan kotak pembayaran, bidang kupon, dan tarik-turun di halaman checkout.

Langkah-langkah untuk Mengubah Warna Latar Belakang WooCommerce Checkout

Di bagian ini, kami akan menggunakan kode CSS untuk menyesuaikan halaman keranjang, checkout, dan akun WooCommerce agar sesuai dengan situs Anda lainnya.

Ini adalah bagaimana halaman checkout ditampilkan: halaman checkout

Berikut adalah langkah-langkah yang perlu Anda ikuti:

  1. Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
  2. Dari menu Dasbor, klik Penampilan > Sesuaikan .
  3. Ini akan meluncurkan panel penyesuaian di sisi kiri layar.
  4. Klik pada link CSS tambahan dan tambahkan kode CSS berikut:
 


/*** 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. Jika Anda menggunakan tema seperti Divi, klik opsi tema > kotak CSS khusus untuk menambahkan kode.
  2. Ingatlah untuk mengklik Ini adalah hasilnya: menerbitkanhalaman keranjang

Kesimpulan

Penting untuk menyesuaikan halaman checkout, karena ini adalah langkah terakhir sebelum pelanggan melakukan pembelian. Namun, perubahan Anda harus sesuai dengan desain situs Anda.

Artikel Serupa

  1. Pengalihan WooCommerce Setelah Keluar [Panduan Utama]
  2. Pengalihan WooCommerce Setelah Checkout : Pengalihan ke Halaman Terima Kasih Kustom
  3. Cara Mengedit Detail Penagihan Halaman Checkout WooCommerce
  4. Cara Mengatur Pengiriman Gratis dengan Pengeluaran Minimum Di WooCommerce
  5. Panduan Cepat Pengoptimalan Pembayaran Seluler WooCommerce
  6. Cara Menambahkan Mata Uang ke WooCommerce [Mata Uang Kustom]
  7. Cara Mendapatkan Detail Pesanan Setelah Checkout Di WooCommerce
  8. Cara Menyembunyikan, Mengubah, atau Menghapus Lencana Penjualan WooCommerce
  9. Cara Mengatur Placeholder Bidang Checkout WooCommerce
  10. Cara Mengubah Warna Email WooCommerce
  11. Cara Menambahkan Kelas Navigasi Aktif Berdasarkan URL
  12. Cara menggunakan do_shortcode di WordPress (PHP)
  13. Cara Menambahkan Pencarian ke Halaman Toko Di WooCommerce
  14. Cara Membuat Halaman Kategori Kustom Di WooCommerce
  15. Cara Menambahkan Produk ke Keranjang Secara Terprogram di WooCommerce
  16. Cara Menghapus Keranjang saat Logout Di WooCommerce
  17. Cara Memeriksa apakah Pengguna Sudah Masuk di WordPress
  18. Cara Membuat Kupon Di WooCommerce
  19. Cara Mendapatkan URL Checkout Di WooCommerce
  20. Cara Mengubah Simbol Mata Uang Di WooCommerce