How to Integrate HTML into WordPress Woocommerce Single Product Page

Question

I am actually working on WordPress Woocommerce. I searched in WooCommerce Plugin, I saw a single product page ie single-product.php in the template folder. And there is a cycle that displays a complete description of the product.

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

Now I do not understand where the entire page parameter is located and how to reset its display order of various product attributes, such as price, image, product description, etc.

So, please help me on how to embed or integrate my HTML into the Woo Commerce Single Product Page.

Any help would be appreciated.

thanks

Answer 1

You need to create a folder named woocommerce inside the themes folder and copy the contents of the woocommere plugin templates folder to the themes folder. This way you can overwrite the default content.

After completing the above, find the single product file in the woocommerce folder in the themes folder. You will see many hooks and do_action s. Do not panic. It is just calling files from the single-product folder inside the woocommerce folder. In this folder, the files are beautifully titled and grouped, and you will find out that one file is responsible for this, just by seeing the file header. For example, price.php to display the price, product-attributes.php for product attributes (in case the product is a variable).

Play with these files. If you need original ones, you will find them again in the woocommerce plugins folder.

EDIT

look in 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' ); responsible for calling the above functions. the number next to the name is the order. The smaller the number, the higher the order. Assuming you want them all, but in a 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 plugin

\ WooCommerce \ includes \ toilet-template hooks.php

By changing the hooks (changing or adding new ones), you can change the layout and everything on the page of one product.