John Davidson

javascript - How to add <p> after table? (php / JS / wordpress)

0 comments
Message:


I would like to add p tage or line break after table, so that contents in table and div can display in two lines.

At the moment they display in one line which is very messy (i.imgur.com/7cnQhou.jpg).

Would you please let me know how to do it using php or JS?




<div class="woocommerce-variation">
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="test2">
<table class="thwepo-extra-options thwepo_variable" cellspacing="0">
<tbody><tr class=""><td class="label leftside"></td>
<td class="value leftside">
<input type="text" id="test2" class="thwepof-input-field">
</td></tr>
</tbody>
</table>
<div class="quantity">
<input type="number" id="quantity_60" class="input-text qty" inputmode="numeric">
</div>
<button type="submit" class="single_add_to_cart_button">Add to cart</button>
</div>


My Answer:
You can achieve this by adding a `

` tag or a line break `
` after the closing `` tag. Here is an example using JavaScript:

javascript
document.addEventListener("DOMContentLoaded", function() {
var table = document.querySelector(".thwepo-extra-options");
var div = document.querySelector(".quantity");

table.insertAdjacentHTML('afterend', '

');
});


This code will add a `

` tag after the table with the class `thwepo-extra-options`. You can also use `
` tag instead of `

` tag if you prefer a line break.

If you are using WordPress, you can add this JavaScript code in your theme's `functions.php` file or in a custom JavaScript file that is enqueued in your theme.

Alternatively, you can also achieve this using PHP by adding the following code in your theme's `functions.php` file:

php
function add_paragraph_after_table() {
echo '

';
}
add_action('woocommerce_after_single_variation', 'add_paragraph_after_table');


This PHP code will add a `

` tag after the table in the WooCommerce single product variation section.

Rate this post

5 of 5 based on 9845 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us