WOOCOMMERCE | change price position in products list.

I need to implement an ecommerce web site developed with woocommerce.
Thanks to our web designer, i need to insert, in archive pages ( categories, up-sell, cross-sell, ecc ), price and title in same container.

In default theme, title and price are in two different containers, ( something like the code below that is bring from a woocommerce demo ).

<a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
    <img width="450" height="600" src="#" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" scale="0"> 
    <h2 class="woocommerce-loop-product__title">test products</h2>
    <span class="price">
       <span class="woocommerce-Price-amount amount">
             <span class="woocommerce-Price-currencySymbol">€</span>109.95
       </span>
    </span>
</a>

We need 3 steps :

move product title out of “woocommerce_product_link” tag and wrap it in new container
move product price and currency in same container of title
hide the “original” price

We can do this by using woocommerce “addAction” and “removeAction”.
Open from your theme function.php, and at the end of the file paste this code :

// Remove prices
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

// Move title in new container, move "formatted price" in the same container

remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 ); // Remove title form original position
add_action('woocommerce_shop_loop_item_title', 'abChangeProductsTitle', 10 ); // Insert title in new position ( out of main container )
function abChangeProductsTitle() {
  $price = get_post_meta( get_the_ID(), '_regular_price', true); // Retrive products regular price
  $formatted_price = wc_price( $price ); // Formatted price by adding decimal
    echo '<a class="be_prod_title" href="'.get_the_permalink().'"><h2 class="woocommerce-loop-product__title">' . get_the_title() . '</h2><span class="price"><span class="woocommerce-Price-amount amount">'. $formatted_price .'</span></span></a>'; // Print new html with title and price
}

Re upload function.php
reload page, and you can see price and title in a new html container.

your new html is like :

<li class="post-187 product_variation type-product_variation status-publish product  instock shipping-taxable product-type-variation">
	<a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
           <img width="330" height="230" src="#" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="">	
	</a>
        <a class="be_prod_title" href="#">
           <h2 class="woocommerce-loop-product__title">Ravena – Nero, 41</h2>
           <span class="price">
             <span class="woocommerce-Price-amount amount">
                <span class="woocommerce-Price-amount amount">0,00<span class="woocommerce-Price-currencySymbol">€</span></span>
             </span>
           </span>
        </a>
</li>

Now you can styles it by css.

That’s all.