In this tutorial, I will demonstrate how you could manipulate Woocommerce product layout to provide additional details. This is an excellent way of using the available data for enhancing user experience.

Since WooCommerce product pages are simply posts with a product type attached, I  will take advantage of the standard WordPress post functions to create the display elements such as:

• the_title()– Displays the name of the product.
• the_excerpt()– Displays a brief description of the product.
• the_content()– Displays the full description of the product.
• the_permalink()– Displays the URL of the product.
• the_ID()– Displays the product’s ID.
• the_post_thumbnail()– Displays the product image.
  

   3, 'post_type' => 'product');
  $wc_query = new WP_Query($params);
  ?>
  

  have_posts()) : ?> have_posts()) : $wc_query->the_post(); ?>

  • ">
  
   

You can put this Code in your theme file. Alternatively, you can create a custom template. for this, use the following:

WooCommerce Products Display

The easiest solution for displaying a product’s price is to use the get_price_html method:

have_posts()) :

               $wc_query->the_post(); ?>

    

I hope that you have understood the code in the above snippets. Here is the complete code you need to  of WooCommerce Product Layout Display.

 3, 'post_type' => 'product');

$wc_query = new WP_Query($params);

?>

    have_posts()) : ?>     have_posts()) :                $wc_query->the_post(); ?>     
•          

                ">                                        

                     get_price_html();         echo $product->get_sale_price();         echo $product->get_regular_price();         echo $product->get_price();         echo $product->get_price_excluding_tax();         echo $product->get_sale_price();         echo wc_price($product->get_price_including_tax(1, $product->get_sale_price()));         ?>     
                   
•               
    

Conclusion

In this tutorial, I discussed how you could easily alter the WooCommerce product layouts display to provide more information to the visitors. If you need help with the code or would like to add to the discussion, do leave a comment below.

The post Alter Woocommerce Product Layouts Display With Little Effort appeared first on WordPress Tutorials, Tips and Reviews.