Elementor Compatibility

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 ago by rydergillen . This topic was modified 6 years ago by rydergillen . This topic was modified 6 years ago by rydergillen . This topic was modified 6 years ago by rydergillen . 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 fix the issue? Also pull requests are welcome on Github . Thank you. 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(); } }); Please provide the steps to reproduce the issue. 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 ago by rydergillen . Number 8 doesn’t happen to me. Which version of PHP, WordPress, plugins and theme are you using? 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 I don’t have Elementor Pro. Does it work for you if you only use the free version? 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. OK