Search code examples
jquerywordpressdomwoocommerceprepend

I'd like to change the order of HTML elements inside a section

This is basicly how my woocommerce product looks like:

<section class="mpcth-post-content">
    <div class="mpcth-cart-wrap">
    <h6 class="mpcth-post-title"></h6>
</section>

And all I want is to change to order to section->title->wrap.

I tried to change it with jQuery:

$(document).ready(function() {
    $('.mpcth-post-title').insertBefore('.mpcth-cart-wrap')
});

but it placed every products's title from every section displayed on the page to each product.

I also wondered if it could be done with child theme function? The base php comes from a framework mpc_visual_composer.php.

Solution

  • The behaviour you optened is normal. What you want to do is insertBefore in the context of each section. Use child selector and a loop.

    $('.mpcth-post-content').each(function(){
    $(this).find('.mpcth-post-title').insertBefore($(this).find('.mpcth-cart-wrap'));
});