function custom_modify_query( $query ) {
if ( ! is_admin() && $query->is_main_query() ) {
if ( is_shop() ) {
$query->set( 'posts_per_page', 12 );
}
}
}
add_action( 'pre_get_posts', 'custom_modify_query' );
// Check product has sale
function is_product_on_sale($product_id) {
$product = wc_get_product($product_id);
if ($product->is_on_sale()) {
return true;
}
if ($product->is_type('variable')) {
$variants = $product->get_children();
foreach ($variants as $variant_id) {
$variant = wc_get_product($variant_id);
if ($variant->is_on_sale()) {
return true;
}
}
}
return false;
}
// Check product has sale
function count_sale_products() {
$transient_key = 'count_sale_products';
$cached_count = get_transient($transient_key);
if ($cached_count !== false) {
return $cached_count;
} else {
$products = wc_get_products(['return' => 'ids', 'status' => 'publish', 'limit' => -1, 'type' => array('simple', 'variable', 'bundle', 'external', 'grouped')]);
$saleProduct = [];
foreach ($products as $product_id) {
if (is_product_on_sale($product_id)) {
$saleProduct[] = $product_id;
}
}
$sale_count = count($saleProduct);
set_transient($transient_key, $sale_count, 5 * MINUTE_IN_SECONDS);
return $sale_count;
}
}
function get_discounted_variants_of_product($product_id) {
$product = wc_get_product($product_id);
if ($product->is_type('variable')) {
$variants = $product->get_children();
$discounted_variants = array();
foreach ($variants as $variant_id) {
$variant = wc_get_product($variant_id);
//print_r($variant->status); die;
if( $variant->status == 'publish')
$discounted_variants[] = array(
'id' => $variant->get_id(),
'sale_price' => $variant->get_sale_price(),
'regular_price' => $variant->get_regular_price(),
'name' => $variant->get_name(),
'sku' => $variant->get_sku(),
);
}
return $discounted_variants;
}
return false;
}
function getStockStatusCountProduct($instock = true){
$stock_status = 'instock';
if(!$instock) $stock_status = 'outofstock';
$args = array(
'stock_status' => $stock_status,
'limit' => -1,
'status' => 'publish',
'type' => array('simple', 'variable'),
);
$products = wc_get_products( $args );
return count($products);
}
function customRatingScoreHTML($productID){
$product = wc_get_product($productID);
$average = $product->get_average_rating();
$rating_whole = floor($average);
$rating_fraction = $average - $rating_whole;
$flug = 0;
for($i = 1; $i <= 5; $i++){
if( $i <= $rating_whole ){
echo '<i class="fas fa-star"></i>';
}
else{
if( $rating_fraction > 0 && $flug == 0 ){
echo '<i class="fas fa-star-half-alt"></i>';
$flug = 1;
}
else{
echo '<i class="far fa-star empty"></i>';
}
}
}
}
function customShopGridShortcode($atts=[]){
ob_start();
$availability = isset($_GET['availability'])?$_GET['availability']:'instock';
$category = isset($_GET['category'])?$_GET['category']:'';
$tag = isset($_GET['tg'])?$_GET['tg']:'';
//$on_sale = isset($_GET['on_sale'])?$_GET['on_sale']:'';
$orderBy = isset($_GET['orderby'])?$_GET['orderby']:'';
$keyword = isset($_GET['s'])?$_GET['s']:'';
$paged = max(get_query_var('paged'),1);
$args = [
'post_type' => ['product'],
'paged' => $paged,
'posts_per_page' => 12,
];
if(!empty($category) && $category!= 'all')
$args['tax_query'] = [
'relation' => 'AND',
[
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => array( $category ),
],
];
if(!empty($tag)){
if(array_key_exists ('tax_query',$args)){
$args['tax_query'][] = [
'taxonomy' => 'product_tag',
'field' => 'slug',
'terms' => array( $tag ),
];
}
else{
$args['tax_query'] = [
'relation' => 'AND',
[
'taxonomy' => 'product_tag',
'field' => 'slug',
'terms' => array( $tag ),
],
];
}
}
// if(!empty($on_sale) && $on_sale == 1){
// }
if(!empty($availability)){
if($availability == 'sale'){
$products = wc_get_products( ['return' => 'ids','status' => 'publish','limit' => -1,'type' => array('simple', 'variable', 'bundle','external','grouped')] );
$saleProduct = [];
foreach($products as $vv){
if(is_product_on_sale($vv)){
$saleProduct[] = $vv;
}
}
if(!empty($saleProduct))
$args['post__in'] = $saleProduct;
else
$args['post__in'] = [0];
// if(array_key_exists('tax_query',$args)){
// $args['tax_query'][] = [
// 'key' => '_sale_price',
// 'value' => '',
// 'compare' => '!='
// ];
// }
// else{
// $args['tax_query'] = [
// 'relation' => 'AND',
// [
// 'key' => '_sale_price',
// 'value' => '',
// 'compare' => '!='
// ],
// ];
// }
}
else{
$products = wc_get_products( ['stock_status' => $availability,'return' => 'ids','status' => 'publish','limit' => -1,'type' => array('simple', 'variable', 'bundle','external','grouped')] );
if(!empty($products))
$args['post__in'] = $products;
else
$args['post__in'] = [0];
}
//print_r($products);
}
if(!empty($orderBy)){
if($orderBy == 'popularity'){
$args['meta_key'] = 'total_sales';
$args['orderby'] = 'meta_value_num';
$args['order'] = 'DESC';
}
if($orderBy == 'rating'){
$args['meta_key'] = '_wc_average_rating';
$args['orderby'] = 'meta_value_num';
$args['order'] = 'DESC';
}
if($orderBy == 'date'){
$args['orderby'] = 'date';
$args['order'] = 'DESC';
}
if($orderBy == 'price'){
$args['meta_key'] = '_price';
$args['orderby'] = 'meta_value_num';
$args['order'] = 'ASC';
}
if($orderBy == 'price-desc'){
$args['meta_key'] = '_price';
$args['orderby'] = 'meta_value_num';
$args['order'] = 'DESC';
}
}
if(!empty($keyword)){
$args['s'] = $keyword;
}
if(isset($_GET['dev']))
print_r($args);
$the_query = new WP_Query( $args );
?>
<div class="customShopGrid-wrap">
<form id="frmFilterProduct" method="GET" action="">
<div class="frmFilterProduct-ajax">
<?php
$sort_arr = [
'menu_order' => __('Default Sorting'),
'popularity' => __('Best Selling'),
'rating' => __('Average Rating'),
'date' => __('Latest Product'),
'price' => __('Price Low To High'),
'price-desc' => __('Price High To Low'),
];
?>
<div class="customShopGrid-order-wrap">
<div class="customShopGrid-order orderbyPC">
<span>Sort By:</span>
<select id="orderby" class="slOrder" name="orderby">
<?php foreach($sort_arr as $key => $value):?>
<option value="<?php echo $key; ?>" <?php if($orderBy == $key) echo 'selected'?>><?php echo $value; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="customShopGrid">
<div class="customShopGrid-left">
<div class="customShopGrid-filter">
<div class="customShopGrid-filter-top customShopGrid-filter-space">
<h2 class="customShopGrid-filter-heading">Filter Products</h2>
<img src="https://vancitylabs.co/wp-content/uploads/2024/04/setting-ic.svg" />
</div>
<div class="customShopGrid-filter-list">
<div class="customShopGrid-filter-group">
<div class="customShopGrid-filter-group-head customShopGrid-filter-space">
<h3 class="customShopGrid-filter-heading">Availability</h3>
</div>
<div class="customShopGrid-filter-group-content">
<ul>
<li>
<label class="custom-checkbox">
<input id="Availability-instock" class="filter-checkbox" type="checkbox" name="availability" value="instock" <?php if($availability == 'instock') echo 'checked' ?> />
<span style='font-size: 18px'>In Stock (<?php echo getStockStatusCountProduct()?>)</span>
</label>
</li>
<li>
<label class="custom-checkbox">
<input id="Availability-outstock" class="filter-checkbox" type="checkbox" name="availability" value="outofstock" <?php if($availability == 'outofstock') echo 'checked' ?> />
<span style='font-size: 18px'>Out of Stock (<?php echo getStockStatusCountProduct(false)?>)</span>
</label>
</li>
<li>
<label class="custom-checkbox">
<input id="Availability-outstock" class="filter-checkbox" type="checkbox" name="availability" value="sale" <?php if($availability == 'sale') echo 'checked' ?> />
<span style='font-size: 18px'>On Sale (<?php echo count_sale_products();?>)</span>
</label>
</li>
</ul>
</div>
</div>
<!--end group-->
<?php
$cats = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => true,
'parent' => 0,
]);
if(!empty($cats)):
?>
<div class="customShopGrid-filter-group">
<div class="customShopGrid-filter-group-head customShopGrid-filter-space">
<h3 class="customShopGrid-filter-heading">Categories</h3>
</div>
<div class="customShopGrid-filter-group-content">
<ul>
<li>
<label class="custom-checkbox">
<input class="filter-checkbox" type="checkbox" name="category" value="all" <?php if($category == 'all') echo 'checked' ?> />
<span style='font-size: 18px'>All</span>
</label>
</li>
<?php
foreach ($cats as $key => $value):
$childs = get_term_children( $value->term_id, 'product_cat' );
$isChildOpen = false;
if(!empty($childs)):
foreach($childs as $child):
$child = get_term_by('id',$child,'product_cat');
//print_r($category);
if($category == $child->slug){
$isChildOpen = true;
break;
}
endforeach;
endif;
?>
<li class="<?php if(!empty($childs)) echo 'has-child'; ?>">
<?php if(!empty($childs)):?>
<div class="custom-checkbox">
<?php else: ?>
<label class="custom-checkbox">
<?php endif;?>
<input class="filter-checkbox" type="checkbox" name="category" value="<?php echo $value->slug ?>" <?php if($category == $value->slug) echo 'checked' ?> />
<span style='font-size: 18px'><?php echo $value->name ?> (<?php echo $value->count ?>)</span>
<?php if(!empty($childs)):?>
</div>
<?php else: ?>
</label>
<?php endif;?>
<?php if(!empty($childs)): ?>
<ul class="customShopGrid-filter-group-content-child" style="<?php if(!$isChildOpen) echo 'display: none;'?>">
<?php foreach($childs as $child): $child = get_term_by('id',$child,'product_cat'); if($child->count > 0): ?>
<li>
<label class="custom-checkbox">
<input class="filter-checkbox" type="checkbox" name="category" value="<?php echo $child->slug ?>" <?php if($category == $child->slug) echo 'checked' ?> />
<span style='font-size: 18px'><?php echo $child->name; ?> (<?php echo $child->count ?>)</span>
</label>
</li>
<?php endif; endforeach ?>
</ul>
<?php endif;?>
</li>
<?php endforeach ?>
</ul>
</div>
</div>
<!--end group-->
<?php endif; ?>
<div class="customShopGrid-filter-reset">
<a class="customShopGrid-filter-reset-button" href="<?php echo get_permalink( wc_get_page_id( 'shop' ) )?>">Reset Filters</a>
</div>
</div>
</div>
</div>
<div class="customShopGrid-right">
<div class="customShopGrid-order show-mb-flex" hidden>
<h3 class="customShopGrid-filter-heading">Sort by:</h3>
<div class="orderbyMB">
</div>
</div>
<!--end group-->
<?php if ( !empty($keyword) ) :?>
<p class="customShopGrid-seach-keyword-label">Search results for <span>"<?php echo $keyword; ?>"</span> <a href="https://vancitylabs.co/shop/">Remove</a></p>
<?php endif; ?>
<div class="customShopGrid-list">
<?php if ( $the_query->have_posts() ) :?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="customShopGrid-product">
<div class="customShopGrid-product-inner">
<div class="customShopGrid-product-image-wrap">
<?php
$product = wc_get_product(get_the_ID());
$product_type = $product->get_type();
if(!$product->is_in_stock()):
?>
<span class="customShopGrid-product-stockout customShopGrid-product-label">Out of stock</span>
<?php endif; ?>
<?php if(is_product_on_sale(get_the_ID())):?>
<span class="customShopGrid-product-has-sale customShopGrid-product-label">Sale</span>
<?php endif; ?>
<div class="customShopGrid-product-image">
<a href="<?php the_permalink();?>" tabindex="0">
<?php the_post_thumbnail('medium')?>
</a>
</div>
</div>
<div class="customShopGrid-product-content">
<div class="customShopGrid-product-content-inner">
<div class="customShopGrid-product-ratting-wrap">
<div class="top-rated-rating">
<?php
$types = get_the_terms(get_the_ID(),'product-type');
$type = '';
if(!empty($types)) $type = reset($types);
if(is_object($type)):
$color = get_field('color',$type);
?>
<span class="customShopGrid-product-type" style="<?php if($color) echo 'background:'.$color;?>"><?php echo $type->name;?></span>
<?php endif; ?>
<span class="customShopGrid-product-ratting">
<span class="customShopGrid-product-user-ratting">
<?php customRatingScoreHTML(get_the_ID());?>
</span>
<span class="customShopGrid-product-user-ratting-count" hidden>(<?php echo $product->get_rating_count(); ?>)</span>
</span>
<?php
$thc = get_field('thc');
if($thc > 0):
?>
<span class="customShopGrid-product-thc"><b>THC</b> <?php echo $thc.'%'?></span>
<?php endif; ?>
</div>
</div>
<h4 class="customShopGrid-product-title"><a href="<?php the_permalink();?>" tabindex="0"><?php the_title();?></a></h4>
<?php
$add_to_card_id = get_the_ID();
$discounted_variants = get_discounted_variants_of_product(get_the_ID());
if($discounted_variants):
$add_to_card_id = $discounted_variants[0]['id'];
?>
<select class="customShopGrid-product-list-variable">
<?php
foreach($discounted_variants as $key => $value):
//print_r($value);
$variable_price = ($value['sale_price']> 0)?$value['sale_price'] : $value['regular_price'];
$name_parts = explode(' - ', $value['name']);
//$variable_price = 0;
?>
<option value="<?php echo $value['id']?>" <?php if(strtolower(end($name_parts)) == '28g'){$add_to_card_id = $value['id']; echo 'selected';}?>><?php echo end($name_parts);?> - $<?php echo $variable_price;?></option>
<?php endforeach;?>
</select>
<?php else: ?>
<div class="customShopGrid-product-price">
<?php woocommerce_template_loop_price();?>
</div>
<?php endif;?>
<div class="wrap-btn">
<?php if($product_type !== 'bundle'):?>
<a class="pb-btn-style add_to_cart_button ajax_add_to_cart" href="<?php site_url();?>?add-to-cart=<?php echo $add_to_card_id;?>&quantity=1" data-quantity="1" data-product_id="<?php echo $add_to_card_id;?>"><span>Add to cart</span> <img src="https://vancitylabs.co/wp-content/uploads/2024/04/right-arrow.svg" /></a>
<?php else: ?>
<a class="pb-btn-style" href="<?php the_permalink(); ?>"><span>Buy Now</span> <img src="https://vancitylabs.co/wp-content/uploads/2024/04/right-arrow.svg" /></a>
<?php endif;?>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;?>
<?php else: ?>
<p>No product found!</p>
<?php endif;wp_reset_postdata();?>
</div>
<?php if($the_query->max_num_pages > 1):?>
<div class="customShopGrid-pagenavi">
<?php echo paginate_links(array(
'total' => $the_query->max_num_pages,
'current' => $paged,
'prev_text' => '<img src="'.CHILD_THEME_URI.'/images/prev-arrow-green.svg" />',
'next_text' => '<img src="'.CHILD_THEME_URI.'/images/next-arrow-green.svg" />'
));?>
</div>
<?php endif;?>
</div>
</div>
</div>
</form>
<script type="text/javascript">
(function($){
var sortDiv = $('body').find('#orderby');
//var spinner = $('')
$('body').on('change','.filter-checkbox',function(){
$(this).parents('li').siblings().find('.filter-checkbox').prop('checked', false)
$('#frmFilterProduct').submit();
})
$('body').on('click','.customShopGrid-filter-group-head',function(e){
$(this).toggleClass('close')
$(this).parent().find('.customShopGrid-filter-group-content').slideToggle();
})
$('body').on('change','.slOrder',function(){
$('#frmFilterProduct').submit();
})
$('body').on('click','.customShopGrid-filter-top',function(e){
$(this).toggleClass('close')
$(this).parent().find('.customShopGrid-filter-list').slideToggle();
})
$('body').on('click','li.has-child .custom-checkbox',function(e){
var $div = $(this);
var divOffset = $div.offset();
var clickX = e.pageX - divOffset.left;
if (clickX <= 28) {
$(this).parents('ul').find('.filter-checkbox').prop('checked', false);
$(this).find('.filter-checkbox').prop('checked', true)
$('#frmFilterProduct').submit();
}
else{
$(this).parent().find('.customShopGrid-filter-group-content-child').slideToggle();
}
})
function moveSortDiv(){
if($(window).innerWidth() < 768){
if(!$('.orderbyMB .slOrder').length)
sortDiv.appendTo('.orderbyMB');
}
else{
if(!$('.orderbyPC .slOrder').length)
sortDiv.appendTo('.orderbyPC');
}
}
moveSortDiv();
$(window).on('resize',function(){
moveSortDiv();
})
function customAjaxSend(form,fullUrl){
history.pushState({}, '', fullUrl);
$.ajax({
url: fullUrl,
method: form.attr('method'),
data: form.serialize(),
dataType: 'html',
beforeSend: function () {
$('.customShopGrid-list').html(`<div class="cspinner">
<div class="loadingio-spinner" style="/* display: none; */">
<div class="loadingio-spinner-spinner-gakt1tin5n">
<div class="ldio-7ufvexzivn">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>`);
$('.cspinner .loadingio-spinner').show();
$('.customShopGrid-pagenavi').css('display','none');
},
success: function(response) {
const html = $(response);
const items = html.find('.frmFilterProduct-ajax');
$('#frmFilterProduct').html(items);
$('.cspinner .loadingio-spinner').hide();
$('.customShopGrid-pagenavi').css('display','flex');
// if (items.length) {
// $('.project-box').html(items);
// } else {
// $('.project-box').html('<p>Aucun résultat trouvé</p>');
// }
//console.log(response);
moveSortDiv();
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('Error submitting form');
console.log(textStatus, errorThrown);
}
});
}
$('#frmFilterProduct').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
var fullUrl = url + '?' + form.serialize();
history.pushState({}, '', fullUrl);
let currentUrl = window.location.href;
let newUrl = currentUrl.replace(/page\/\d+\//, '');
customAjaxSend(form, newUrl);
});
$('body').on('click','.customShopGrid-pagenavi a',function(e){
e.preventDefault();
var form = $('#frmFilterProduct');
var fullUrl = $(this).attr('href');
$('html, body').animate({
scrollTop: $(".customShopGrid-right").offset().top - 300
}, 1000); // 1000 milliseconds for the scroll animation
customAjaxSend(form, fullUrl);
// setTimeout(function() {
// }, 200); // 1000 milliseconds delay before starting the scroll
})
})(jQuery)
</script>
</div>
<?php return ob_get_clean();
}
add_shortcode('customShopGrid','customShopGridShortcode');
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter