woocommerce - 更改类别中的产品的HTML

Question

product's html looks like this:

<li class="post-13 product type-product status-publish has-post-thumbnail first taxable shipping-taxable purchasable product-type-simple product-cat-printer instock">
    <a href="http://xxx">
        <img width="150" height="150" src="http://xx" class="attachment-shop_catalog wp-post-image" alt="" />
        <h3>abc</h3>
        <span class="price"><span class="amount">15.86&nbsp;&euro;</span></span>
    </a>
    <div class="gridlist-buttonwrap">
        <a href="xx?add-to-cart=13" rel="nofollow" data-product_id="13" data-product_sku="" class="button add_to_cart_button product_type_simple">Buy</a>
    </div>
    <hr />          
</li>

Is it possible to move the price next to the button?

<li class="post-13 product type-product status-publish has-post-thumbnail first taxable shipping-taxable purchasable product-type-simple product-cat-printer instock">
    <a href="http://xxx">
        <img width="150" height="150" src="http://xx" class="attachment-shop_catalog wp-post-image" alt="" />
        <h3>abc</h3>
    </a>
    <div class="abc">
        <a href="xx?add-to-cart=13" rel="nofollow" data-product_id="13" data-product_sku="" class="button add_to_cart_button product_type_simple">Buy</a>
        <span class="price"><span class="amount">15.86&nbsp;&euro;</span></span>
    </div>          
 </li>

The only way I have found out it that I should edit core of the plugin, which is useless because I will loose all changes after updates.

Edit: for example this theme , they have this structure:

<li>
    <a href="http://demo2.woothemes.com/sliding/shop/yellow-necklace/" style="width: 192px; height: 295px;">
        <img width="192" height="295" src="http://demo2.woothemes.com/sliding/files/2011/11/yellow-necklace-192x295.jpg" class="attachment-woo_sliding_slider wp-post-image" alt="yellow-necklace" />
        <div class="meta">
            <h3>Yellow Necklace</h3>
            <span class="slider-price"><span class="amount">&pound;19.00</span></span>
        </div>

    </a>

</li>

Answer 1

You can override a template file and that will not be updated when you update woocommerce.

From the WooCommerce docs

Alternatively, you can edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /woocommerce, keeping the same file structure.

Example: To overide the admin order notification, copy: woocommerce/templates/emails/admin-new-order.php to yourtheme/woocommerce/emails/admin-new-order.php