Whether you’re making WordPress themes and trying to show pictures of the products in your woocommerce product ?, or maybe you’re confused by displaying the title or name of the product on your woocommerce wordpress theme that you create? , If you feel never confused by displaying the title of the product, product images, or other attributes of your woocommerce on a theme that is being created, meaning only myself ever confused with these problems
When I write this article, I’m making wordpress theme for the purposes of an online store website. In the design of this website, I have to display the slider from the photo gallery, the latest 3 news, the latest 3 videos, and 3 products featured on the main page of the website (front page). all four types of content stored on the part of each type of content. So the design of the front page of an online store that I am building is divided into four main sections, namely: slider, news, video and featured products. As the main plugin for online stores I use woocommerce plugin
Quite up there, preface to illustrate the circumstances I faced in designing wordpress theme for the purposes of online stores. Immediately, the subject matter and the discussion of this paper: How do you show a picture of the product on its front page woocommerce website?. What are the requirements that must be met in order to be able to display images of woocommerce products?
Terms to Displays Image of WooCommerce Product
The main requirements that wordpress theme can display the attributes-the attributes of the existing products in woocommerce including:
- Woocommerce plugin has been installed and is active (of course)
Woocommerce is an e-commerce plugin which has a full-featured online store based wordpress. With the help of this plugin you can create an online store as you even now have meiliki woocomerce new feature, woocommere multi vendor that will make your online store like the online mall - There has been a product in woocommerce content and content the product has an image of product
- WordPress theme that we use or we design must be able to support: woocommerce, post types : product
The explanation of these terms, hopefully I will discuss in my other writings.
Once the conditions under which these requirements can be met, how to retrieve and then display the attributes-such woocommerce product attributes on the theme that we are building?
Turned out that way is not as difficult as imagined. Simply by simply calling the thumbnail images such as call image / thumbnail on standard content, such as the following:
1 | <?php the_post_thumbnail(); ?> |
If you need a bit of polish to embellish or a little adjustment to the design of your wordpress, then you can add some parameters to the function, such as for example the following parameters:
1 | <?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) ); ?> |
With these functions we have to show a picture of our online store product with large size/resolution and displayed using img class-responsive set of style sheets used. That function has been automatically call the complete image product with image tag, so you no longer need to write
1 | <img src ="<?php the_post_thumbnail(); ?>"> |
Still need more detailed examples ?. Here is an example of how to call a woocommerce product images in a loop
1 2 3 4 5 6 7 8 9 | $args3 = array( 'post_type' => 'product', ); $loop3 = new WP_Query( $args3 ); while ( $loop3->have_posts() ) : $loop3->the_post(); the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) ); endwhile; wp_reset_postdata(); |
Hopefully the problem of how to display images of woocommerce product on a wordpress theme can be resolved by this paper. If you still need a reference about the post thumbnail functionality, you can visit this page the_post_thumbnail function the_post_thumbnail
