How to Integrate HTML into WordPress Woocommerce Single Product Page

Question

Actually I am working on WordPress Woocommerce. I have searched out in WooCommerce Plugin, I saw single product page i.e. single-product.php in template folder. And there is a loop which display complete product description.

<?php while ( have_posts() ) : the_post(); ?>
        <?php wc_get_template_part( 'content', 'single-product' ); ?>
        <?php endwhile; // end of the loop. ?>
        <?php
?>

Now I did not understand where is the whole page setting and how to reset its order for displaying different product attributes like price, image , product description and etc.

So Please help me about how to embed or integrate my HTML into Woo Commerce Single Product Page.

Any Help Will be Appreciated.

Thanks

Answer 1

You need to create a folder named woocommerce inside your themes folder and copy the contents of the templates folder of the woocommere plugin inside your themes folder. In this way you are able to overwrite the default content.

After completing the above, look for a file content-single-product in the woocommerce folder in your themes's folder. You'll see lots of hooks and do_actions. Don't panic. These are just calling the files from the single-product folder inside the woocommerce folder. In that folder the files are nicely titled and grouped and you'll know what one file is responsible just by seeing the file title. For example price.php for displaying the price, product-attributes.php for product attributes (in case the product is variable).

Play around with these files. If you need the original ones you'll find them again in the woocommerce plugin's folder.

EDIT

look in the content-single-product.php between line 40-60:

<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 -->

This do_action( 'woocommerce_single_product_summary' );is responsible for calling the above listed hooked functions. the number next to the name is the order. The lower the number the higher is the order. Assuming you want them all but in different order you replace this section with the following-

<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' );


            // now call these function directly and change their order ;

             woocommerce_template_single_title();
             woocommerce_template_single_rating();
             woocommerce_template_single_price(); // this will output the price text
             woocommerce_template_single_excerpt(); // this will output the short description of your product.
             woocommerce_template_single_add_to_cart();
             woocommerce_template_single_meta();
             woocommerce_template_single_sharing();
        ?>

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

Answer 2

Go to this file in your woocommerce plugin folder

\woocommerce\includes\wc-template-hooks.php

By modifying the hooks (changing or adding new) you can change the layout and all in single product page.