It is very easy to get a list of all Woocommerce Product Categories. To add this list to your project, try:
{{products show="categories" assign_to="categories"}}
<h3 class="sidebar-title">Product Categories </h3>
<ul class="product-categories">
{{foreach $categories.data as $cat}}
<li class="cat-item cat-item-{{$cat.term_id}} cat-item-{{$cat.slug}}">
<a href="{{$cat.permalink}}">{{$cat.name}}</a>
</li>
{{/foreach}}
</ul>
If you are using Woocommerce to promote and sell products, you can easily mark some of the products as featured, directly from the product list (All Products page). To display a list of featured products in your project just try:
<ul class="products">
{{products show="featured" size="4" assign_to="featured_products"}}
{{foreach $featured_products.data as $product}}
<li class="col-md-3">
<article class="product">
<a href="{{$product.post_permalink}}">
<!-- add "on sale" badge -->
{{if $product.on_sale}}<span class="onsale">Sale!</span>{{/if}}
<img src="{{$product.post_thumbnail}}" class="" alt="{{$product.post_title}}" />
<h4 class="" >
<span class="product_name">
{{$product.post_title}}
</span>
<span class="price pull-right">
{{if $product.on_sale}}<i class="reg-price">${{$product.regular_price}} </i>{{/if}}
<span class="amount">${{$product.price}}</span>
</span>
</h4>
</a>
</article>
</li>
{{/foreach}}
</ul>
Building a category page is very easy. All what you have to do is to create a page and name it “category”. When you access a category page URL, all posts data within that particular will be available without the need of using additional binders. If you wish to know what is the name of the currently render category page, all what yo need to do is to type this code:
<li><strong>{{$wp_query.found_posts}}</strong> results found in the "<strong>{{$queried_object.cat_name}}</strong>" category.</li>
The $queried_object contains the current category name, slug, cat_ID, and more.
array(16) {
["term_id"]=>
&int(87)
["name"]=>
&string(8) "Business"
["slug"]=>
&string(8) "business"
["term_group"]=>
int(0)
["term_taxonomy_id"]=>
int(91)
["taxonomy"]=>
string(8) "category"
["description"]=>
&string(0) ""
["parent"]=>
&int(86)
["count"]=>
&int(37)
["filter"]=>
string(3) "raw"
["cat_ID"]=>
&int(87)
["category_count"]=>
&int(37)
["category_description"]=>
&string(0) ""
["cat_name"]=>
&string(8) "Business"
["category_nicename"]=>
&string(8) "business"
["category_parent"]=>
&int(86)
}
As you probably know your search result page already has a list of posts that were found. That means that you do not need to include any additional binder to the posts data. If you wish to know what is the total number of post that were found for a particular search term, in you search page you can include the following code:
<p><strong>{{$wp_query.found_posts}}</strong> results found for "<strong>{{$smarty.get.s}}</strong>"</p>
The previous code shows how to access the $wp_query object to get the total number of posts found. You can also access the last search term directly from the global $smarty object ($smarty.get.s).
A search results page as well as other archive pages, will bind a “$posts” object to the page. That means that you can simply iterate through the different posts contained in the collection. Below is an example that show how to render this collection:
<div class="row">
<div class="col-md-12">
{{if count( $posts.data) eq 0}}
<div class="row no-results">
<h2 class="aligncenter">No Results Found</h2>
<p class="aligncenter">We could not find the any page associated with the term <i>"{{$smarty.get.s}}"</i>
</p>
</div>
{{/if}}
{{foreach $posts.data as $post}}
{{author user_id="{{$post.post_author}}" assign_to="author"}}
{{meta post_id="{{$post.ID}}" assign_to="meta"}}
{{post show="categories" assign_to="post_categories" post_id="{{$post.ID}}"}}
<article>
<div class="row">
<div class="span8">
<div class="post-image">
<div class="post-heading">
<h3><a href="{{$post.post_permalink}}">{{$post.post_title}}</a></h3>
</div>
{{if $post.post_thumbnail}}
<img src="{{$post.post_thumbnail}}" alt="{{$post.post_title}}" />
{{/if}}
</div>
<p>
{{$post.post_content|strip_tags|truncate:400}}
</p>
<div class="bottom-article">
<ul class="meta-post">
<li><i class="icon-calendar"></i><a href="#"> {{date when="{{$post.post_modified}}" format="F j, Y"}}</a></li>
<li><i class="icon-user"></i><a href="#"> {{$author.data.fullname}}</a></li>
<li><i class="icon-folder-open"></i>
{{foreach $post_categories.data as $cat}}
<a style="float: none;" rel="category tag" title="{{$cat.name}}" href="{{$cat.cat_permalink}}">{{$cat.name}}</a>{{if !$cat@last}}, {{/if}}
{{/foreach}}
</li>
</ul>
<a href="{{$post.post_permalink}}" class="pull-right">Continue reading <i class="icon-angle-right"></i></a>
</div>
</div>
</div>
</article>
{{/foreach}}
{{paginate type="array" assign_to="pagination"}}
{{if $pagination.total > 1}}
<div id="pagination">
<ul style="list-style: none;">
{{foreach $pagination.data as $page}}
<li>{{$page}}</li>
{{/foreach}}
</ul>
</div>
{{/if}}
</div>
</div>
In WordPress you have created s custom post type to manage special data, and you would like to render the custom post entries in your project.
You can use the post binder ({{posts…}}) and pass a parameter post_type. The posts binder will allow you to request posts from the database and adding the parameter post_type, followed by the slug of the post type, it will filter out posts that are different than the posts that you wish to request.
Render a list of custom posts titles
/* assuming you have a custom post type "event" */
{{posts assign_to="my_events" post_type="event"}}
<ul>
<h2>Events</h2>
{{foreach $my_events.data as $event}}
<li>Name: {{$event.post_title}}<br/>
Description: {{$event.post_content}}<br/>
<a href="{{$event.post_permalink}}">View Details</a>
</li>
{{/foreach}}
</ul>