Custom shortcode works in Elementor editor but not on frontend

Question

I'm used to creating custom shortcodes through my child theme and Elementor, never a problem.

However this time something is wrong, when I inserted the shortcode widget in Elementor editor my code is correctly showing, but after saving I visit the page, its blank, like the shortcode was never processed.

Anyone have any idea of why this is happening?

This is the code where i create the shortcode:

    <?php 
    add_shortcode('test', function () {
    ob_start();
    require_once (locate_template('views/test.php'));
    return ob_get_clean();
});

Inside the file views/test.php a simple form, nothing crazy.

This is the screen of Elementor editor where the shortcode is showing:

If i visit the page it's completely blank.

Answer 1

The problem is with the require_once, you are passing a relative path and that path doesn't exist.

Assuming the test.php file you want to require is in this path

wp-content/themes/your-theme/views/test.php

You can use the following

require_once locate_template('views/test.php');

Consider using include instead of require_one, if this shortcode is not 100% necessary for your site to function, its best to use include as this way you will not receive a fatal error because that file doesn't exist.

Answer 2

I find out the solution. Thanks for all the answers.

This is the code now:

add_shortcode('test', function () {
    ob_start();
    include('views/test.php');
    return ob_get_clean();
});

Now it shows up on frontend, i don't know why with require_once was not working, but if i use include it works fine.