Sebuah situs klien yang saya pegang adalah toko WooCommerce yang sudah live, dibangun di atas theme komersial XStore plus Elementor PRO. Tugasnya jelas: migrasi ke theme custom yang saya bikin sendiri, biar lebih ringan dan gampang di-maintain. Semua data produk, order, dan halaman tetap. Yang berubah cuma layer presentasinya. Saya tes aktivasi di staging dulu, dan begitu theme baru saya aktifkan, homepage-nya langsung kacau.
Header theme baru saya muncul di atas, rapi, sesuai desain. Tapi di bawahnya, body-nya masih isi Elementor lama: video hero, section produk, semuanya bergaya theme lama. Lebih parah lagi, widget off-canvas XStore (dropdown cart, wishlist, my-account) numpuk di atas konten theme baru saya. Jadinya bukan setengah jadi, tapi dua theme yang saling tabrakan di satu halaman.
Gejalanya
Reflex pertama saya: cache. Toko ini pakai LiteSpeed plus Redis plus Cloudflare, jadi wajar kalau HTML lama masih nyangkut. Saya purge semuanya, hard refresh, buka jendela incognito. Tetap sama. Waktu sebuah tampilan rusak selamat dari purge cache berlapis, itu bukan cache. Itu sesuatu yang deterministik, dirender ulang tiap request.
Reflex kedua: template file. Saya cek theme baru saya punya front-page.php dan index.php yang benar. Saya cek meta _wp_page_template di halaman homepage: nilainya front-page.php, persis yang saya mau. Secara teori, WordPress harusnya milih front-page.php dari theme aktif dan render body dari situ. Tapi yang keluar tetap body Elementor. Template hierarchy WordPress seolah diabaikan total.
Di titik ini saya berhenti nebak dan mulai baca gimana Elementor sebenarnya nyisip ke render pipeline.
Akar masalahnya
Ternyata ada dua mekanisme yang jalan sendiri-sendiri, dan dua-duanya nggak peduli theme mana yang aktif.
Pertama, dan ini yang paling nyebelin: setting Page Layout per-halaman punya Elementor itu independen dari WP page template. Di panel Elementor tiap halaman ada opsi Page Layout, dan homepage ini di-set ke 'Elementor Full Width'. Selama nilainya bukan 'Default Template', Elementor nggak peduli _wp_page_template kamu isi apa. Dia bungkus halaman itu pakai template-nya sendiri:
wp-content/plugins/elementor/modules/page-templates/templates/header-footer.phpFile itu yang men-take over render body, ngeganti apa pun yang mestinya keluar dari template hierarchy theme aktif. Jadi front-page.php theme baru saya memang ada dan valid, tapi Elementor nyegat lebih dulu. Cuma nilai 'Default Template' yang bikin Elementor mundur dan ngasih WP template hierarchy jalan normal.
Kedua, widget off-canvas itu. XStore Core (folder plugin et-core-plugin) nyuntik HTML off-canvas-nya lewat hook wp_footer, tanpa peduli theme mana yang aktif. Theme baru saya nggak punya CSS buat nyembunyiin atau nampung widget itu, jadi mereka muncul mentah, numpuk di atas konten.
Dua-duanya bukan bug. Dua-duanya fitur plugin yang jalan persis seperti didesain. Yang salah asumsi saya: saya kira nge-aktifin theme baru otomatis mutusin semua yang di-render theme lama. Padahal Elementor dan XStore hidup di layer plugin, bukan layer theme, jadi ganti theme nggak nyentuh mereka sama sekali.
Perbaikannya
Karena target akhirnya emang lepas total dari XStore plus Elementor, solusi paling bersih bukan ngakalin CSS, tapi matiin plugin-nya. Urutannya penting. PRO Elements (add-on Elementor PRO) harus dimatiin paling dulu, karena dia nge-lock dependency ke Elementor core. Kalau Elementor core dimatiin duluan sementara PRO Elements masih aktif, bisa error.
1. pro-elements/pro-elements.php (matikan pertama, lepas dependency lock)
2. elementor/elementor.php (baru core Elementor)
3. et-core-plugin/et-core-plugin.php (XStore Core, sumber widget off-canvas)Setelah tiga plugin itu mati, purge cache lagi secara eksplisit: LiteSpeed, Redis, Cloudflare. Deactivate doang nggak ngusir HTML lama yang udah kerender di cache. Habis itu hard refresh, dan homepage akhirnya render murni dari front-page.php theme baru.
Kalau klien ternyata masih mau nahan Elementor buat sebagian halaman, ada workaround yang lebih halus: buka tiap halaman, set Page Layout-nya ke 'Default Template' satu-satu. Itu ngasih balik kendali render ke template hierarchy tanpa matiin plugin-nya. Lebih ribet dan manual, tapi valid kalau Elementor masih kepakai.
Yang bikin saya berani eksekusi ini di staging: rollback-nya aman total. Aktifin lagi theme lama plus tiga plugin tadi, dan data Elementor tetap utuh di database. Deactivate plugin nggak ngehapus apa-apa, cuma berhenti nge-render. Jadi migrasi ini reversible sampai menit terakhir.
Checklist
- Kalau ganti theme tapi body halaman nggak berubah, cek Page Layout Elementor per-halaman, bukan cuma
_wp_page_template. - Nilai 'Homepage' dan 'Elementor Full Width' nge-bypass template hierarchy; cuma 'Default Template' yang ngasih theme jalan.
- Elementor dan XStore hidup di layer plugin, bukan theme. Ganti theme nggak nyentuh mereka.
- Matiin plugin dengan urutan benar: PRO Elements dulu, baru Elementor core, baru XStore Core.
- Deactivate aja nggak cukup: purge LiteSpeed, Redis, dan Cloudflare, karena HTML lama masih nyangkut di cache.
- Deactivate plugin itu reversible: data Elementor tetap di DB, rollback tinggal aktifin lagi.