Title: Elementor Compatibility Last modified: May 22, 2020 --- # Elementor Compatibility * [rydergillen](https://wordpress.org/support/users/rydergillen/) * (@rydergillen) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/) * Awesome plugin but doesn’t render in Elementor designer. After inspection of code it looks like Frontend Assets are only loaded when `!is_admin()` thus this is preventing the plugin from rendering within a page designer (e.g. Elementor). * I was able to resolve the issue by removing the `else` statement from `Fr_Address_Book_for_WooCommerce- >init()` and always `init()` frontend assets regardless. * Calling `enqueue_scripts` from within `add_action('woocommerce_before_checkout_billing_form',...)` is too late in lifecycle when rendering via a designer, the action hook is called but any calls to register/enqueue a CSS/JS file doesn’t work, and the file is not included at render). * To get around this issue and prevent the frontend assets from initializing on all admin pages I added the following code to`class Fr_Address_Book_for_WooCommerce_Frontend_Checkout- >init()` and similar code to other frontend classes * ``` add_action('wp_enqueue_scripts', function () { if (is_checkout()) { $this->enqueue_scripts(); } }); ``` * Would you consider taking a pull req. for these compatibility changes so that your plugin works with popular page designers? - This topic was modified 6 years, 2 months ago by [rydergillen](https://wordpress.org/support/users/rydergillen/). - This topic was modified 6 years, 2 months ago by [rydergillen](https://wordpress.org/support/users/rydergillen/). - This topic was modified 6 years, 2 months ago by [rydergillen](https://wordpress.org/support/users/rydergillen/). - This topic was modified 6 years, 2 months ago by [rydergillen](https://wordpress.org/support/users/rydergillen/). Viewing 9 replies - 1 through 9 (of 9 total) * Plugin Author [fahrirusliyadi](https://wordpress.org/support/users/fahrirusliyadi/) * (@fahrirusliyadi) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12886083) * Actually, the assets are loaded correctly. The problem is Elementor loads the elements via AJAX thus the select address field is not rendered because it’s only hooked on front-end. * Does [this](https://github.com/fahrirusliyadi/fr-address-book-for-woocommerce/commit/2f82e385a94c317af80e1a3abe61cc8cb599d533) fix the issue? Also pull requests are welcome on [Github](https://github.com/fahrirusliyadi/fr-address-book-for-woocommerce). * Thank you. * Thread Starter [rydergillen](https://wordpress.org/support/users/rydergillen/) * (@rydergillen) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12890606) * It now shows on the checkout page but the CSS for FrontEnd doesn’t load. It looks like `woocommerce_before_checkout_billing_form` on AJAX call doesn’t not properly enqueue scripts. * I had to add this to `src/Fr_Address_Book_for_WooCommerce_Frontend_Checkout-> init()` to get the CSS to properly enqueue via AJAX. * ``` add_action('wp_enqueue_scripts', function () { if (is_checkout()) { $this->enqueue_scripts(); } }); ``` * Plugin Author [fahrirusliyadi](https://wordpress.org/support/users/fahrirusliyadi/) * (@fahrirusliyadi) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12892491) * Please provide the steps to reproduce the issue. * Thread Starter [rydergillen](https://wordpress.org/support/users/rydergillen/) * (@rydergillen) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12893653) * 1) Install ‘Fr Address Book’ Plugin * 2) Install ‘Elementor’ Plugin * 3) Edit Checkout Page w/Elementor * 4) Observe ‘Fr Address Book’ Plugin doesn’t render * 5) Apply fix you provided for `$this->Frontend_Checkout->init()` * 6) Reload Elementor editor (may need to select Shortcode widget and click ‘Apply’; this makes Elementor re-render the shortcode control) * 7) Observe ‘Fr Address Book’ plugin is displayed on Checkout Page w/Elementor * 8) Observe CSS is not loaded, this is evident because the Border Box on Selected Addresss is missing && Radio button is visible and doesnt have `display:none`. * 9) Open Dev Tools in Chrome, Navigate to Network Tab, Observe many CSS style sheets are being loaded however `Fr Address Book CSS - frontend.min.css` is NOT. * 10)Now compare to loading the Checkout page on Front End (e.g. normal customer checkout page) and observe the CSS is loaded && this can be confirmed via F12– Dev Tools – Network - This reply was modified 6 years, 2 months ago by [rydergillen](https://wordpress.org/support/users/rydergillen/). * Plugin Author [fahrirusliyadi](https://wordpress.org/support/users/fahrirusliyadi/) * (@fahrirusliyadi) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12898364) * Number 8 doesn’t happen to me. * Which version of PHP, WordPress, plugins and theme are you using? * Thread Starter [rydergillen](https://wordpress.org/support/users/rydergillen/) * (@rydergillen) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12900612) * I have disabled all other plugins/themes/etc. My environment looks like this… * – WordPress: 5.4.1 – PHP (fpm-fcgi): 7.4.2 – Elementor: 2.9.9 – Elementor Pro: 2.9.5 – Theme: Hello (Elementor Theme): 2.3.0 * If you still run into issues I will create a minimum reproduction with Docker Compose * Plugin Author [fahrirusliyadi](https://wordpress.org/support/users/fahrirusliyadi/) * (@fahrirusliyadi) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12902479) * I don’t have Elementor Pro. Does it work for you if you only use the free version? * Thread Starter [rydergillen](https://wordpress.org/support/users/rydergillen/) * (@rydergillen) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12915228) * No issue persists with only free version…. I will repro this issue with a minimal setup this weekend using Docker WordPress Image + Just the FR Address Book Plugin&& Elementor (non-Pro). If I can still reproduce I will link to a git repo with the code I used to reproduce issue. * Plugin Author [fahrirusliyadi](https://wordpress.org/support/users/fahrirusliyadi/) * (@fahrirusliyadi) * [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12930101) * OK Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Elementor Compatibility’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/fr-address-book-for-woocommerce.svg) * [Fr Address Book For Woocommerce](https://wordpress.org/plugins/fr-address-book-for-woocommerce/) * [Frequently Asked Questions](https://wordpress.org/plugins/fr-address-book-for-woocommerce/#faq) * [Support Threads](https://wordpress.org/support/plugin/fr-address-book-for-woocommerce/) * [Active Topics](https://wordpress.org/support/plugin/fr-address-book-for-woocommerce/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/fr-address-book-for-woocommerce/unresolved/) * [Reviews](https://wordpress.org/support/plugin/fr-address-book-for-woocommerce/reviews/) * 9 replies * 2 participants * Last reply from: [fahrirusliyadi](https://wordpress.org/support/users/fahrirusliyadi/) * Last activity: [6 years, 2 months ago](https://wordpress.org/support/topic/elementor-compatibility-20/#post-12930101) * Status: not resolved