How to Customize WooCommerce Product Page Layout & Template
— April 21, 2017
• 2 Minutes Read
In this tutorial, I will demonstrate how you could manipulate & customize the WooCommerce product page design layout to provide additional details. This is an excellent way of using the available data for enhancing user experience.
Customize WooCommerce Product Page Layout Design
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.
1234567891011121314151617181920212223242526272829<?phpget_header();$params = array('posts_per_page' => 3, 'post_type' => 'product');$wc_query = new WP_Query($params);?><ul><?php if ($wc_query->have_posts()) : ?><?php while ($wc_query->have_posts()) :$wc_query->the_post(); ?><li><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3><?php the_post_thumbnail(); ?><?php the_excerpt(); ?></li><?php endwhile; ?><?php wp_reset_postdata(); ?><?php else: ?><li><?php _e( 'Found No Products ' ); ?></li><?php endif; ?></ul><?phpget_footer();?>
You can put this code in your theme file. Alternatively, you can create a custom page template. for this, use the following:
|
1 2 3 4 5 |
<?php /* Template Name: Modify Products */ ?> |
WooCommerce Products Display
The easiest solution for displaying a product’s price is to use the get_price_html method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <li> <h3> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h3> <?php the_post_thumbnail(); ?> <?php the_excerpt(); echo $product->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())); ?> </li> <?php endwhile; ?> |
I hope that you have understood the code in the above snippets and now you can easily customize the Woocommerce product’s layout”. Here is the complete code through which you can easily display the WooCommerce variable Product Layout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<?php get_header(); $params = array('posts_per_page' => 3, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> <ul> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <li> <h3> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h3> <?php the_post_thumbnail(); ?> <?php the_excerpt(); echo $product->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())); ?> </li> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else: ?> <li> <?php _e( 'Found No Products ' ); ?> </li> <?php endif; ?> </ul> <?php get_footer(); ?> |
Conclusion
In this tutorial, we discussed how you could easily change or customize the WooCommerce product page layout design 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.
Create Faster WordPress Websites!
Free eBook on WordPress Performance right in your inbox.
Moeez is ‘The’ blogger in charge of WPblog. He loves to interact and learn about WordPress with people in the WordPress community. Outside his work life, Moeez spends time hanging out with his friends, playing Xbox and watching football on the weekends. You can get in touch with him at moeez[at]wpblog.com.
