Atomic Elements generated CSS returns 404 on hosted WordPress VIP
Description
Elementor Atomic Elements render correctly in the editor, but their custom styling is missing on the frontend when running on a hosted WordPress VIP environment.
The Atomic markup/classes are present on the frontend, but generated Atomic CSS files such as:
/wp-content/uploads/elementor/css/local-{post-id}-frontend-desktop.css
return 404.
Legacy Elementor widgets on the same environment continue to render their frontend styles correctly.
Environment
- WordPress hosting: WordPress VIP
- Elementor: 4.2.4
- Elementor Pro: 4.2.3
- CSS Print Method: Internal Embedding
- Affected feature: Atomic Elements / Atomic Components
Testing performed
The same Atomic Elements setup was tested in:
- Standard WordPress Local — works correctly
- WordPress VIP Local — works correctly
- Hosted WordPress VIP — generated Atomic CSS returns 404 and frontend styling is missing
The issue occurs with both standalone Atomic Elements and reusable Atomic Components.
Elementor Files & Data regeneration and wp elementor flush_css were also tested without resolving the issue.
On VIP Local, blocking the generated Atomic CSS request in browser DevTools reproduces the same missing frontend styling seen on hosted VIP.
WordPress VIP filesystem findings
The hosted environment uses WP_Filesystem_VIP, with the uploads path reported by wp_upload_dir() as:
vip://wp-content/uploads
As an independent test, a CSS file was written using WP_Filesystem_VIP. The write succeeded and $wp_filesystem->exists() reported the file as existing, but its corresponding public /wp-content/uploads/... URL returned 404.
Normal Media Library uploads are accessible.
This appears to be a compatibility issue between the Atomic CSS generation/delivery mechanism and the hosted WordPress VIP filesystem architecture.
Could you please confirm whether Atomic Elements currently support hosted WordPress VIP environments and WP_Filesystem_VIP, and whether there is a supported approach for Atomic-generated CSS in this environment?
References
Editor (Styles visible and working)
Frontend(Styles are not being applied)
Steps to reproduce
- Run Elementor on a hosted WordPress VIP environment.
- Create or edit a page using Elementor.
- Add an Atomic Element and apply custom styling to it.
- Publish/update the page.
- Open the page on the frontend.
- Observe that the Atomic Element markup renders, but its custom styling is missing.
- Inspect the frontend network requests and observe that the generated Atomic CSS file under
/wp-content/uploads/elementor/css/returns 404.
For comparison, repeat the same setup using a legacy Elementor widget. Its frontend styling renders correctly.
Expected behavior
Atomic Elements should render their configured styles on the frontend when Elementor is running on WordPress VIP, using a CSS delivery mechanism compatible with the VIP filesystem architecture.
Elementor System Info
Environment
WordPress: 7.1
PHP: 8.3
Elementor: 4.2.4
Elementor Pro: 4.2.3
Hosting: WordPress VIP (hosted Develop environment)
Filesystem: WP_Filesystem_VIP
Uploads filesystem path: vip://wp-content/uploads
CSS Print Method: Internal Embedding
Affected feature: Atomic Elements / Atomic ComponentsAgreement
- I confirm I have read and followed all the guidelines and instructions outlined in the Editor V4 Bug Report form.
- I agree that my issue may be closed without further action if it doesn't meet all the requirements outlined in the Editor V4 Bug Report form.
Source: elementor/elementor