how to merge product image and meta in single div in woocommerce

Question

i'm working on a woocommerce based site in wordpress. i'm using the the-bootstrap theme and woocommerce Version 2.1.12. i'm on single product page and the design of my page is like:

<div class="images">...</div>
<div class="summary entry-summary">...</div>
<div class="product_meta">...</div>

Now i want to merge the images div and product meta div in a single div so that i can place another div after summary like this:

<div class="span3">
<div class="images">...</div>
<div class="product_meta">...</div>
</div>

<div class="span6 summary entry-summary">...</div>
<div class="span3 Product category">...</div>

but its all written as hooks in the woocommerce template.so how can i change this to get the desired output.

Here is the code for my content-single-product template:

<?php
        /**
         * woocommerce_before_single_product_summary hook
         *
         * @hooked woocommerce_show_product_sale_flash - 10
         * @hooked woocommerce_show_product_images - 20
         */
        do_action( 'woocommerce_before_single_product_summary' );
    ?>

    <div class="summary entry-summary">

        <?php
            /**
             * woocommerce_single_product_summary hook
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>

    </div><!-- .summary -->

    <?php
        /**
         * woocommerce_after_single_product_summary hook
         *
         * @hooked woocommerce_output_product_data_tabs - 10
         * @hooked woocommerce_output_related_products - 20
         */
        do_action( 'woocommerce_after_single_product_summary' );
    ?>

    <meta itemprop="url" content="<?php the_permalink(); ?>" />

rnevius rnevius · Accepted Answer · 2014-09-09T08:59:25

Move product_meta into your _before_single_product_summary hook
Theme the content-single-product.php template by wrapping the _before_single_product_summary action in div tags.

Please see the documentation on overriding templates for more information, concerning step #2.

how to merge product image and meta in single div in woocommerce

1 Answers