How to get Product name,price in Wordpress Woocommerce Products page

Question

I just developed a wordpress woocommerce website and have many products with 5 categories. I display the products category with following short code.

<?php echo do_shortcode('[product_categories number="20"]'); ?>

when clicking on one category its goes to products page and display products finely. but i want to view product in my own div, fonts,etc. Currently i am working ( displaying ) on archive-product.php file.

my code is below.

 <div class="ProductCategoryWraper">

  <?php if ( have_posts() ) : ?>


        <?php woocommerce_product_loop_start(); ?>

            <?php woocommerce_product_subcategories(); ?>

            <?php while ( have_posts() ) : the_post(); ?>

                <?php wc_get_template_part( 'content', 'product' ); ?>


            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>
        <?php endif; ?>

  <div class="CategoryBox"> <a href="product-details.html"> <img src="images/panda-product1.jpg">
    <p>Chicken Masala</p>
    <i class="fa fa-inr"></i> <span>42</span> </a> </div>
</div>

how can i filter the price & product name only from this. please help me. Thanks

Answer 1

Open Your content-single-product.php and add your own div css class.

Go here

\wp-content\plugins\woocommerce\templates\content-single-product.php

The For price go here and add your own css div class.

\wp-content\plugins\woocommerce\templates\single-product\price.php

Answer 2

To get product name and price on product pages override content-single-product.php and price.php

Instead of editing these files directly within the plugin (which is a very bad idea because once update the plugin and all of your changes will be lost!), you can copy them into your theme:

• In your theme directory, make a new folder called “WooCommerce.”
• Navigate to the WooCommerce plugin directory and open the "templates" folder. The templates folder has a lot of subfolders with all of the different templates that WooCommerce uses. Fortunately, the template file structure and naming in WooCommerce is easy to follow.
• In your newly created "WooCommerce" folder, copy the template file that you want to edit.

Remember to keep the directory structure the same here. If the template you want to edit is within a subfolder then remember to create that subfolder within your theme's directory.