Edit Elementor Tidak Muncul Padahal Cache Sudah Dihapus — Ini Penyebab Sebenarnya

Ada satu bug yang bikin saya buang hampir tiga jam waktu pertama kali kena: saya edit sebuah halaman di Elementor — geser section, ganti teks, perbaiki padding — klik Update, buka halaman live di tab incognito, dan… tidak ada yang berubah. Halaman tetap menampilkan versi lama.

Reaksi pertama semua orang sama: purge cache. Saya purge WP Rocket. Purge Cloudflare. Hard refresh. Bump versi tema biar query ?ver= berganti. Tetap tidak berubah. Saat itu saya sedang membangun ulang sebuah situs marketing dari Figma di Elementor untuk seorang klien, jadi tekanannya nyata.

Ternyata, di 9 dari 10 kasus, masalahnya bukan di cache yang biasa kita purge. Masalahnya ada di tempat yang jarang disebut: cache internal Elementor sendiri.

Elementor menyimpan HTML hasil render secara terpisah dari datanya

Ini bagian yang bikin kebanyakan orang tersesat. Saat Anda menyimpan halaman, Elementor tidak me-render ulang dari data setiap kali halaman dibuka. Ia menyimpan hasil render dan CSS-nya ke beberapa tempat sekaligus:

• _elementor_element_cache — post meta berisi HTML hasil render
• _elementor_css — post meta berisi metadata CSS
• _elementor_page_assets — daftar aset yang di-enqueue
• File fisik: wp-content/uploads/elementor/css/post-{ID}.css

Saat Anda mengubah data layout (entah lewat editor, lewat update_post_meta('_elementor_data', …), atau lewat skrip migrasi), data berubah tapi keempat cache di atas tidak. Halaman terus menyajikan HTML dan CSS lama. Dan yang penting: membuka halaman itu saja tidak memicu regenerasi. Lapisan cache ini tidak ikut terhapus saat Anda purge WP Rocket atau Cloudflare, karena mereka bukan page cache — mereka cache milik Elementor.

Jadi urutan cache yang sebenarnya Anda hadapi itu berlapis:

browser → Cloudflare/CDN → page cache plugin (WP Rocket dll) → cache internal Elementor

Kebanyakan orang membersihkan tiga lapisan pertama dan melewatkan yang keempat — yang justru jadi penyebabnya.

Solusi: invalidasi cache Elementor dengan benar

Hapus keempat artefak itu, lalu paksa Elementor regenerasi CSS-nya. Membuka halaman saja tidak cukup — Anda harus memanggil generator CSS secara eksplisit:

$pid = 123; // ID halaman yang bermasalah
 
// 1. Hapus cache HTML & CSS milik Elementor untuk post ini
delete_post_meta( $pid, '_elementor_element_cache' );
delete_post_meta( $pid, '_elementor_css' );
delete_post_meta( $pid, '_elementor_page_assets' );
 
// 2. Hapus file CSS fisiknya
$css_file = WP_CONTENT_DIR . "/uploads/elementor/css/post-{$pid}.css";
if ( file_exists( $css_file ) ) {
    @unlink( $css_file );
}
 
// 3. Paksa Elementor membangun ulang CSS (langkah yang sering terlewat)
\Elementor\Core\Files\CSS\Post::create( $pid )->update();

Langkah ketiga itu kuncinya. Tanpa ->update(), Anda hanya menghapus cache lama tanpa membuat yang baru — dan halaman bisa malah tampil tanpa style sama sekali sampai sesuatu memicu regenerasi.

Lewat WP-CLI (untuk semua halaman sekaligus)

Kalau perubahan Anda menyentuh banyak halaman (misalnya setelah mengganti global setting atau migrasi), bersihkan seluruh cache CSS Elementor sekaligus:

wp elementor flush-css

Kalau perlu lebih agresif, regenerasi penuh:

wp eval '\Elementor\Plugin::$instance->files_manager->clear_cache();'

clear_cache() menghapus semua file CSS yang sudah di-generate dan semua post meta _elementor_css — Elementor akan membangun ulang on-demand. Ini yang saya jalankan setiap kali sebuah deploy menyentuh data Elementor secara langsung.

Gejala lanjutan: header/footer tiba-tiba polos & logo raksasa

Ada satu turunan dari bug ini yang sempat bikin saya panik. Setelah cache CSS Elementor terhapus tapi belum di-regenerasi, situs bisa tampil tanpa style sama sekali: header dan footer jadi polos, logo membesar tidak terkendali, dan muncul double scrollbar.

Penyebabnya: pada banyak instalasi, file CSS milik active kit (misalnya post-9.css, di mana 9 adalah ID kit Elementor Anda) memegang peran yang dulu dipegang global.css — variabel warna, tipografi, container global. Saat file itu hilang dan belum dibangun ulang, seluruh fondasi style situs lenyap.

Perbaikannya sama: regenerasi CSS kit-nya secara eksplisit.

# Cari dulu ID kit aktif
wp option get elementor_active_kit
 
# Regenerasi (ganti 9 dengan ID kit Anda)
wp eval '\Elementor\Core\Files\CSS\Post::create( 9 )->update();'

Setelah itu post-9.css muncul kembali dan style situs pulih.

Checklist saat "edit Elementor tidak muncul"

Lain kali Anda mengalami ini, lewati tebak-tebakan dan kerjakan berurutan:

1. Konfirmasi datanya memang sudah tersimpan — cek _elementor_data di database. Kalau data lama, masalahnya di penyimpanan, bukan cache.
2. Hapus cache internal Elementor — keempat artefak di atas, lalu Post::create($id)->update(). Ini penyebab paling umum.
3. Baru purge page cache plugin (WP Rocket "Clear Used CSS" juga, bukan cuma "Clear Cache").
4. Baru purge CDN/Cloudflare.
5. Terakhir test di incognito atau dengan DevTools "Disable cache" — browser sering menyimpan 301 dan aset lama.

Kuncinya: mulai dari lapisan terdalam (Elementor), bukan terluar (browser). Hampir setiap kali "sudah purge semua tapi tetap tidak berubah", jawabannya ada di cache milik Elementor yang tidak ikut terhapus oleh purge biasa.