Cara mengubah warna tombol WooCommerce
Kepuasan pengguna dengan situs web Anda dapat sangat dipengaruhi oleh skema warna yang Anda pilih. Pilihan pembelian pelanggan dan aktivitas penting lainnya dapat dipengaruhi oleh desain fitur yang tampaknya tidak signifikan seperti tombol. Mengetahui cara mengubah warna tombol WooCommerce sangatlah penting.
Kabar baiknya adalah ada beberapa cara cepat dan sederhana untuk melakukannya. Pilihan ideal Anda akan bergantung pada beberapa pertimbangan, seperti tema WooCommerce yang Anda gunakan, keakraban Anda dengan pengkodean, dan kesediaan Anda untuk memasang plugin baru.
Hari ini kami akan menunjukkan kepada Anda cara mengubah warna tombol WooCommerce dengan cara termudah. Jadi, tanpa basa-basi lagi, mari kita mulai.
Daftar Isi
Cara mengubah warna tombol WooCommerce di pengaturan tema
Menggunakan opsi bawaan yang disediakan oleh tema Anda adalah salah satu cara tercepat dan termudah untuk mengubah warna tombol WooCommerce Anda. Untuk mengilustrasikannya, kami akan menggunakan tema default WooCommerce yang paling sederhana, Storefront.
Tidak apa-apa jika Anda tidak menggunakan etalase. banyak gratis dan premium Tema WooCommerce Semua dilakukan dengan cara yang sama. Namun, Anda harus ingat bahwa beberapa tema mungkin memiliki lebih banyak ruang untuk penyesuaian daripada yang lain, karena setiap tema memiliki struktur dan rangkaian pilihannya sendiri.
Langkah-langkah untuk Mengubah Warna Tombol WooCommerce
Tema etalase yang dimuat sebelumnya memungkinkan Anda menyesuaikan warna tombol secara instan.
Untuk melakukannya, buka Penampilan → Kustomisasi → tombol.
Opsi penyesuaian berikut ditampilkan untuk tombol.
- warna latar belakang
- warna teks
- Warna latar belakang tombol alternatif
- Warna teks tombol alternatif
Anda dapat mengklik tombol pemilih warna untuk membuka editor hex dan mengubah warna tombol. Anda juga dapat mengubah warna tombol hover di sini. Ada juga tombol Default jika Anda ingin kembali ke warna default.
Namun, seperti yang telah disebutkan, tidak semua tema hadir dengan opsi penyesuaian ini. Jadi Anda harus memasukkan beberapa kode CSS secara manual. Namun demikian, jika Anda tidak menggunakan etalase atau tema lain yang memiliki opsi penyesuaian yang layak, tidak ingin menginstal plugin baru, dan yakin dengan keterampilan pengkodean Anda, ini bisa menjadi alternatif yang layak.
Tingkat 1: memeriksa elemen
Untuk memulai, buka bagian depan situs web Anda, temukan tombol “Tambahkan ke Troli” (atau tombol yang ingin Anda ubah), klik kanan padanya dan pilih “Periksa”.
Langkah 2: Temukan dan salin kode HTML
Jika Anda menggunakan browser Chrome, DevTools akan membuka tempat Anda dapat menemukan kode HTML dan CSS untuk tombol tersebut. Temukan kelas tombol dan salin.
Langkah 3: pilihan warna
Untuk membuat tombol warna yang Anda inginkan, Anda memerlukan kode heksadesimal untuk warna itu.
Periksa bagian kanan konsol pengembangan. Seharusnya ada garis “warna latar belakang: #81d742”. Klik kotak warna untuk menampilkan daftar warna sehingga Anda dapat memilih warna untuk tombol tersebut.
Pindahkan pemilih warna dan penggeser ke warna yang diinginkan. Setelah Anda memutuskan, salin nomor heksadesimal.
Sekarang kita mengetahui kelas tombol dan kode warna yang diinginkan. Sekarang saatnya menerapkan aturan CSS baru.
Masuk ke WordPress dan buka Penampilan → Kustomisasi → CSS tambahan di dasbor. Klik tab untuk memunculkan panel tulisan.
kata sandi:
button.single_add_to_cart_button.button.alt {
background-color: #81d742;
}Sekarang rekatkan kode yang baru saja Anda salin ke editor. Kemudian ganti Color Hex dengan warna yang Anda inginkan dengan kode yang disalin dari Google Color Picker.
Setelah selesai, klik ‘Publikasikan’. Dan Anda telah berhasil mengubah warna tombol WooCommerce.
Juga, ada cara ketiga untuk mengubah warna tombol WooCommerce. Untuk melakukannya, Anda perlu mengimpor plugin dan menggunakan pengaturannya. tidak peduli apa yang Anda gunakan ShopEngine berdasarkan Elementor atau Produk berdasarkan GutenbergX, Anda dapat dengan mudah menyesuaikan tidak hanya warna tombol tetapi lebih banyak lagi. Tapi mari kita simpan itu untuk hari lain.
Ada juga tutorial lain untuk pemula. Periksa mereka:
✨Cara Memasang Tema dan Plugin WordPress✨
✨Cara memulai blog WordPress tanpa pengalaman✨
✨SEO WordPress: Yang Perlu Anda Ketahui!✨
✨Cara Memasang WordPress di Localhost: Panduan Mudah!✨
kesimpulan
Singkatnya, kami akan memberi Anda solusi yang sesuai dan memberi tahu Anda cara mengubah warna tombol WooCommerce dengan cara termudah. Dengan cara ini, Anda dapat meningkatkan fungsionalitas WooStore dan menarik lebih banyak pembeli. Jangan malu menggunakan cara-cara yang disebutkan di atas untuk menarik perhatian ke toko dan produk Anda. Semoga bermanfaat dan silahkan berbagi dengan yang lain.
semoga sukses!
