Shortcode or builder script not rendering properly in wordpress

Question

I tried to add a shortcode to render checkbox and display the agreement and policies page on the same page, namely the checkout page. But when I tried to see the results, the content of the agreement and policies page showed some codes that were not rendered like this

I added a shortcode for the checkbox to the function.php file in the theme builder with the Divi theme. Here is the code

    add_action( 'woocommerce_review_order_before_submit', 'add_custom_agreement_checkbox', 9 );
    function add_custom_agreement_checkbox() {
        ?>
        <!-- Wrapper for Agreements and Policies -->
        <div id="agreements-wrapper" class="woocommerce-agreements-and-policies-wrapper" style="max-height: 200px; overflow: auto; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; margin-bottom: 20px; display: none;">
            <!-- Konten dari halaman agreements-policies akan muncul di sini melalui AJAX -->
        </div>
    
        <!-- Checkbox untuk Agreements and Policies -->
        <p class="form-row terms">
            <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
                <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="custom_agreement_checkbox" id="custom_agreement_checkbox" />
                <span>Saya sudah membaca dan menyetujui <a href="javascript:void(0);" id="load-agreement-content">Green Camp Agreement and Policies</a></span>&nbsp;<span class="required">*</span>
            </label>
        </p>
        <?php
    }
    
    // AJAX handler untuk mengambil konten dari halaman "agreements-policies"
    add_action( 'wp_ajax_load_agreement_content', 'load_agreement_content' );
    add_action( 'wp_ajax_nopriv_load_agreement_content', 'load_agreement_content' );
    
    function load_agreement_content() {
        $agreements_page = get_page_by_path('agreements-policies');
    
        if ( $agreements_page ) {
            $content = $agreements_page->post_content;
            $content = do_shortcode( $content ); // Proses shortcodes
            wp_send_json_success( $content );
        } else {
            wp_send_json_error( 'Sorry, the Agreements and Policies page content is not available.' );
        }
    
        wp_die();
    }
    
    
    
    // Validate if the custom checkbox is checked
    add_action( 'woocommerce_checkout_process', 'validate_custom_agreement_checkbox' );
    function validate_custom_agreement_checkbox() {
        if ( ! isset( $_POST['custom_agreement_checkbox'] ) ) {
            wc_add_notice( __( 'Please agree to the Green Camp Agreement and Policies to proceed.' ), 'error' );
        }
    }
    // Function untuk enqueue script AJAX
function enqueue_custom_ajax_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // Delegasi event untuk menangani klik pada link "Green Camp Agreement and Policies"
        $(document).on('click', '#load-agreement-content', function(e) {
            e.preventDefault();

            // Ajax request untuk mengambil konten halaman agreement
            $.ajax({
                url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                type: 'POST',
                data: {
                    action: 'load_agreement_content'
                },
                beforeSend: function() {
                    // Bisa tambahkan loader di sini jika diinginkan
                },
                success: function(response) {
                    if (response.success) {
                        // Tampilkan konten di dalam wrapper dan munculkan wrapper
                        $('#agreements-wrapper').html(response.data).slideDown();
                    } else {
                        // Tampilkan pesan error jika konten gagal dimuat
                        $('#agreements-wrapper').html('<p>' + response.data + '</p>').slideDown();
                    }
                },
                error: function() {
                    // Tampilkan pesan jika terjadi error
                    $('#agreements-wrapper').html('<p>There was an error loading the content.</p>').slideDown();
                }
            });
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'enqueue_custom_ajax_script' );

is there something wrong with my code? or i put the custom code in the wrong place ?

Answer 1

The Divi Builder is not enabled at your end. Go to Divi > Theme Options > Builder and make sure the Enable Divi Builder On Post Types option is enabled. When you enable it, when you go back to the page you will see a Use Divi Builder around the Title. Press it and your shortcodes should turn into Divi Builder Blocks.