Render HTML properly from Wordpress Shortcode - php

Question

I have created a shortcode which renders this table on the frontend. At the moment the shortcode puts the content at the top of the page rather than respecting the location of where the shortcode is pasted in the editor.
How can i fix this?
<div id="cookie-container">
<div class="row justify-content-center mb-3">
<div class="col-12">
<h3>Essential Cookies</h3>
</div>
</div>
<table class="table table-bordered table-hover table-sm diva-cookie-table">
<thead class="diva-cookie-table__thead">
<tr>
<th style="width: 33%" class="diva-cookie-table__th">Name</th>
<th style="width: 33%" class="diva-cookie-table__th">Cookie</th>
<th style="width: 33%" class="diva-cookie-table__th">Purpose</th>
</tr>
</thead>
<tbody class="diva-cookie-table__tbody">
<tr>
<?php
$essential_cookies = carbon_get_theme_option( 'essential_cookies' );
foreach ( $essential_cookies as $cookie ) {
echo '<tr>';
if($cookie['name']) {
echo '<td class="diva-cookie-table__title">';
echo $cookie['name'];
echo '</td>';
}
if($cookie['cookies']) {
echo '<td class="diva-cookie-table__title">';
echo $cookie['cookies'];
echo '</td>';
}
if($cookie['usage']) {
echo '<td class="diva-cookie-table__title">';
echo $cookie['usage'];
echo '</td>';
}
}
echo '</tr>';
?>
</tr>
</tbody>
</table>
</div>
/**
* Construct Essential Cookies Shortcode
*/
function construct_essential_cookies_table()
{
ob_start();
include dirname( __FILE__ ) . '/partials/essential_cookie_table.php';
return ob_get_clean();
}
add_shortcode('diva_essential_cookies', 'construct_essential_cookies_table');

Answer 1

You need to include the full HTML code inside the php output buffer functions like that.
<?php ob_start(); ?>
<div id="cookie-container">
<div class="row justify-content-center mb-3">
<div class="col-12">
<h3>Essential Cookies</h3>
</div>
</div>
<table class="table table-bordered table-hover table-sm diva-cookie-table">
<thead class="diva-cookie-table__thead">
<tr>
<th style="width: 33%" class="diva-cookie-table__th">Name</th>
<th style="width: 33%" class="diva-cookie-table__th">Cookie</th>
<th style="width: 33%" class="diva-cookie-table__th">Purpose</th>
</tr>
</thead>
<tbody class="diva-cookie-table__tbody">
<tr>
<?php
$essential_cookies = carbon_get_theme_option( 'essential_cookies' );
foreach ( $essential_cookies as $cookie ) {
echo '<tr>';
if($cookie['name']) {
echo '<td class="diva-cookie-table__title">';
echo $cookie['name'];
echo '</td>';
}
if($cookie['cookies']) {
echo '<td class="diva-cookie-table__title">';
echo $cookie['cookies'];
echo '</td>';
}
if($cookie['usage']) {
echo '<td class="diva-cookie-table__title">';
echo $cookie['usage'];
echo '</td>';
}
}
echo '</tr>';
?>
</tr>
</tbody>
</table>
</div>
<?php return ob_get_clean();