Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Change your woocommerce Product listing with Grid and List view with jQuery
<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.4.0
*/
defined( 'ABSPATH' ) || exit;
get_header( 'shop' );
/**
* Hook: woocommerce_before_main_content.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
* @hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );
?>
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>
<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description - 10
* @hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
</header>
<nav class="gridlist-toggle">
<a href="#" id="grid" title="gridview">&#8862; <span>gridview</span></a>
<a href="#" id="list" title="listview">&#8863; <span>listview</span></a>
</nav>
<script>
jQuery(document).ready(function(){
jQuery('#grid').click(function() {
jQuery(this).addClass('active');
jQuery('#list').removeClass('active');
jQuery('ul.products').fadeOut(300, function() {
jQuery(this).addClass('grid').removeClass('list').fadeIn(300);
});
return false;
});
jQuery('#list').click(function() {
jQuery(this).addClass('active');
jQuery('#grid').removeClass('active');
jQuery('ul.products').fadeOut(300, function() {
jQuery(this).removeClass('grid').addClass('list').fadeIn(300);
});
return false;
});
});
</script>
<?php
if ( woocommerce_product_loop() ) {
/**
* Hook: woocommerce_before_shop_loop.
*
* @hooked woocommerce_output_all_notices - 10
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
woocommerce_product_loop_end();
/**
* Hook: woocommerce_after_shop_loop.
*
* @hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* @hooked wc_no_products_found - 10
*/
do_action( 'woocommerce_no_products_found' );
}
/**
* Hook: woocommerce_after_main_content.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
/**
* Hook: woocommerce_sidebar.
*
* @hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
get_footer( 'shop' );
<nav class="gridlist-toggle">
<a href="#" id="grid" title="gridview">&#8862; <span>gridview</span></a>
<a href="#" id="list" title="listview">&#8863; <span>listview</span></a>
</nav>
<script>
jQuery(document).ready(function(){
jQuery('#grid').click(function() {
jQuery(this).addClass('active');
jQuery('#list').removeClass('active');
jQuery('ul.products').fadeOut(300, function() {
jQuery(this).addClass('grid').removeClass('list').fadeIn(300);
});
return false;
});
jQuery('#list').click(function() {
jQuery(this).addClass('active');
jQuery('#grid').removeClass('active');
jQuery('ul.products').fadeOut(300, function() {
jQuery(this).removeClass('grid').addClass('list').fadeIn(300);
});
return false;
});
});
</script>
ul.products.list li {
width: 100% !important;
display: flex;
align-items: center;
column-gap: 35px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment