Cara Mengubah Skala Kelabu Imej Produk Habis Stok dalam WooCommerce Menggunakan CSS

WooCommerce ialah pemalam eCommerce yang berkuasa dan fleksibel untuk WordPress, membolehkan anda membuat dan mengurus kedai dalam talian dengan mudah. Membuat perubahan visual pada produk anda, terutamanya yang kehabisan stok, menggunakan CSS hanyalah salah satu daripada pelbagai cara anda boleh memperibadikan kedai WooCommerce anda. Siaran ini akan menerangkan cara menggunakan coretan kod CSS ringkas pada foto produk skala kelabu yang kehabisan stok supaya pelanggan dapat melihat bahawa item ini tidak tersedia.

Mengapa Imej Produk Habis Stok Skala Kelabu?

Foto skala kelabu produk kehabisan stok ialah pendekatan yang mudah tetapi berkesan untuk memberitahu pembeli bahawa beberapa perkara kini tidak tersedia. Isyarat visual ini membantu mengurus jangkaan pengguna tanpa memerlukan teks atau pemberitahuan tambahan. Ia juga meningkatkan pengalaman pelanggan dengan menunjukkan dengan jelas produk mana yang ada dan mana yang tidak, mengurangkan kekecewaan dan menambah baik keseluruhan pengalaman membeli-belah.

Kod CSS

Kod CSS yang diperlukan untuk menskala kelabu imej produk kehabisan stok dalam WooCommerce adalah mudah dan mudah:

.outofstock img {
    filter: grayscale(1);
}

Bagaimana Kod Ini Berfungsi

Mari kita pecahkan cara kod ini berfungsi dan sebab ia disepadukan dengan lancar dengan WooCommerce:

Kelas Terbina Dalam WooCommerce untuk Produk Habis Stok: WooCommerce memperuntukkan kelas kehabisan stok secara automatik kepada produk yang kehabisan stok. Kelas ini boleh disasarkan dengan CSS untuk menggunakan gaya khusus pada item kehabisan stok sahaja.

Menyasarkan Imej Produk: Pemilih img dalam .kehabisan stok memastikan bahawa hanya imej produk kehabisan stok dipengaruhi oleh peraturan CSS ini. Ini bermakna butiran produk yang lain, seperti tajuk dan harga, akan kekal tidak berubah.

Menggunakan Penapis Skala Kelabu: Sifat penapis dalam CSS digunakan untuk menggunakan kesan visual pada elemen. Dalam kes ini, skala kelabu(1) menukar imej kepada hitam dan putih, dengan 1 menunjukkan kesan skala kelabu penuh (berbanding dengan 0, yang akan meninggalkan imej dalam warna penuh). Ini menjadikan imej produk kelihatan diredam, dengan jelas menandakan item itu tidak tersedia.

Melaksanakan Kod dalam Kedai WooCommerce Anda

Untuk menggunakan kod CSS ini pada kedai dalam talian WooCommerce anda, anda hanya boleh menambahkannya pada helaian gaya tema anda atau gunakan pilihan CSS Tambahan terbina dalam dalam Penyesuai WordPress:

Menggunakan Lembaran Gaya Tema:

1. Pergi ke papan pemuka WordPress anda.
2. Navigasi ke Rupa > Editor Tema.
3. Cari fail style.css tema aktif anda.
4. Tambahkan kod CSS di bahagian bawah fail dan simpan perubahan anda.

Menggunakan Penyesuai WordPress:

1. Pergi ke papan pemuka WordPress anda.
2. Navigasi ke Rupa > Sesuaikan.
3. Klik CSS Tambahan.
4. Tampal kod CSS ke dalam kawasan teks dan terbitkan perubahan anda.

Kesimpulan

Menyesuaikan kedai WooCommerce anda untuk memaparkan foto produk kehabisan stok skala kelabu ialah kaedah yang mudah tetapi berkesan untuk meningkatkan pengalaman pengguna. Menggunakan kelas terbina dalam WooCommerce dan fungsi penapis CSS, anda boleh membezakan secara visual produk yang tidak tersedia, membolehkan pelanggan meneroka kedai anda dengan lebih cekap. Perubahan kecil ini boleh memberi kesan ketara pada cara orang melihat kedai anda, menghasilkan pengalaman membeli-belah yang lebih menyeronokkan.

Jangan ragu untuk bermain-main dengan kod CSS ini dan menggabungkannya dengan gaya lain untuk menyesuaikan lagi kedai WooCommerce anda!

Selamat Mengekod :D

Atas ialah kandungan terperinci Cara Mengubah Skala Kelabu Imej Produk Habis Stok dalam WooCommerce Menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!