Separate Categories in each page
-
Hello there.
I am quite new to woocommerce and i am using for a purpose of non sale. I just want to view my products to clients but not selling them through my website. However I have this code below which Is in the page template. Could anyone let me know what i should change to view each category in a single page? I only have two categories. One is called Imported and other one is called Private Label. Each one of these has three sub categories which i want them to be on top of the page as options.
Please have a look at this page before answering http://www.sypal.com.cy/products/sypal. This is the page that i want to separate.Thank you in advance!
Elena
<?php
/*
Template Name: Products In List
*/
get_header();
?><section class=”TitleSection”>
<div class=”container”>
<div class=”row”>
<div class=”col-lg-12 col-md-12 text-center”>
ΠΡΟΪΟΝΤΑ
</div>
</div>
</div>
</section><section class=”ProductSection”>
<div class=”container”>
<div class=”row”>
<div class=”col-lg-12 col-md-12 text-center”>
<?php
$taxonomy = ‘product_cat’;
$orderby = ‘name’;
$show_count = 0; // 1 for yes, 0 for no
$pad_counts = 0; // 1 for yes, 0 for no
$hierarchical = 1; // 1 for yes, 0 for no
$title = ”;
$empty = 0;$args = array(
‘taxonomy’ => $taxonomy,
‘child_of’ => 0,
‘parent’ => ‘0’,
‘orderby’ => $orderby,
‘show_count’ => $show_count,
‘pad_counts’ => $pad_counts,
‘hierarchical’ => $hierarchical,
‘title_li’ => $title,
‘hide_empty’ => $empty
);
$AllProductCategories = get_categories( $args );
?><div class=”product_category button-group filters-button-group”>
<button class=”button product_cat_name parentCate is-checked” data-filter=”all”>All</button>
<?php
foreach ($AllProductCategories as $CategoryData) {
$parentCat = $CategoryData->term_id;
?>
<button class=”button product_cat_name parentCate” data-value=”<?=$CategoryData->slug;?>” data-filter=”.<?=$CategoryData->slug;?>”><?php echo $CategoryData->name; ?></button>
<?php
}
?>
</div></div>
</div><div class=”row allProductsList”>
<?php
$args = array(
‘post_type’ => ‘product’,
‘posts_per_page’ => -1
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) {
$loop->the_post();
global $post;
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ );
$class = ”;
$terms = get_the_terms($post->ID, ‘product_cat’);
foreach($terms as $termsList) {
$class .= $termsList->slug.” “;
}
?>
<div class=”col-lg-12 col-md-12 <?php echo $class; ?> marginBoth”>
<div class=”row”>
<div class=”col-lg-3 col-md-3″>
” />
</div>
<div class=”col-lg-9 col-md-9″>
<div class=”productTitle”><?php echo $post->post_title; ?></div>
<div class=”productDescription”><?php echo $post->post_content; ?></div>
</div>
</div>
</div>
<?php
}
}
else {
echo __( ‘No products found’ );
}
wp_reset_postdata();
?></div>
</div>
</section><script>
jQuery(document).ready(function() {
jQuery(“.button”).click(function() {
var filterValue = jQuery(this).attr(‘data-filter’);if(filterValue == ‘all’) {
jQuery(“.allProductsList .marginBoth”).show();
}
else {
jQuery(“.allProductsList .marginBoth”).hide();
jQuery(“.allProductsList “+filterValue).show();
}});
});</script>
<style type=”text/css”>
.allProductsList {
padding:40px 0px;
}
.TitleSection {
padding:250px 0px 70px;
background-image: url(http://www.sypal.com.cy/wp-content/uploads/2016/11/vector-yellow-abstract-background.jpg?id=2668) !important;
font-size:40px;
color: #333;
}
.product_inner:hover img {
opacity: .2;
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
-o-transform: scale(1.06);
-ms-transform: scale(1.06);
transform: scale(1.06);
}
.product_inner {
overflow:hidden;
}
.product_inner img {
-webkit-transition: all .5s ease;
transition: all .5s ease;
width:100%;
height:300px;
object-fit:cover;
}
.image-caption {
position: absolute;
top: 0px;
background: rgba(16, 117, 187, 0.6);
width: 100%;
height: 100%;
color: #fff;
text-align: center;
padding: 140px 0px;
display: none;
transition: all .5s ease;
color: #000;
font-size: 17px;
font-weight: 600;
}
.ProductSection {
padding:50px 0px;
}.button, .button.size-large, .button.size-small, .button.size-xl, .button.size-xxl {
border: 2px solid;
border-radius: 0;
font-size: 14px !important;
transition: all 0.5s ease 0s;
border-color: #e2e2e2;
color: #8b8b8b;
}
.product_cat_name, .product_cat_name:hover {
background-color: #fff;
}
.marginBoth img {
width: 100%;
height: 200px;
object-fit: contain;
}
.productTitle {
font-size: 20px;
font-weight: 600;
color: #000;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 20px;
}
.marginBoth img {
width: 100%;
}
.productDescription {
text-align: justify;
}
.marginBoth {
padding: 20px 20px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 5px;
}
</style>
<?php
get_footer();
?>
The topic ‘Separate Categories in each page’ is closed to new replies.
