Use The Grid for Woocommerce Shop Layout

I’d like to use The Grid for my Shop page layout.
I’ve change the Shop page to display categories instead of products, and now I’d like edit the shop template to use the grid to control the layout style.

I’ve added archive-product.php to pro-child/woocommerce and edited the file.

I replaced this:

if ( woocommerce_product_loop() ) {
	/**
	 * Hook: woocommerce_before_shop_loop.
	 *
	 * @hooked wc_print_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.
			 *
			 * @hooked WC_Structured_Data::generate_product_data() - 10
			 */
			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' );
}

WITH THIS:

if ( woocommerce_product_loop() ) {
	/**
	 * Hook: woocommerce_before_shop_loop.
	 *
	 * @hooked wc_print_notices - 10
	 * @hooked woocommerce_result_count - 20
	 * @hooked woocommerce_catalog_ordering - 30
	 */
	do_action( 'woocommerce_before_shop_loop' );

	woocommerce_product_loop_start();

	The_Grid('Shop Home', true); // where true is for template mode

	woocommerce_product_loop_end();

	/**
	 * Hook: woocommerce_after_shop_loop.
	 *
	 * @hooked woocommerce_pagination - 10
	 */
	do_action( 'woocommerce_after_shop_loop' );
}

But I’m not seeing any changes at all.

Can you please provide some guidance?

Ok, so I found this post which has helped me make some progress:

I’m adding The Grid code into the woocommerce.php template now and I’m seeing some results.
The problem is that grid content is not loading. I’m just getting a never-ending loading page with only the header showing up: http://146.66.103.187/~traillif/shop/

I can see The Grid html in the page when I inspect. Something is preventing it from loading.

Does it have anything to do with the fact that I have the Shop page set to load categories and The Grid content type is sent to Products? Unfortunately there is no “Categories” content type option, but maybe that doesn’t matter.

I changed the Shop Layout Display to Show Products and the Shop page still doesn’t fully load.

Hi There,

Thank you for writing in, please make sure you copy the given code entirely (no missing bracket)

And make sure you change this My Grid Name with your actual grid name.

Please keep in mind that customization is outside of the support that we can offer, the code provided is only a guide, it’s your responsibility to take it from there.

Or

Maybe you don’t need to modify the shop template. You can create a normal page (you can build it in Cornerstone) and insert your Product Grid to that page.

Hope it helps,
Cheers!

Hi @friech,

Did you check out my code? I’m using my actual grid name.
I don’t think I have any missing bracket but I’ll double check.

Does anyone know if what I want to accomplish is even possible with Pro and The Grid?

Hi There,

Please update the code to this:

<?php

// =============================================================================
// VIEWS/INTEGRITY/WOOCOMMERCE.PHP
// -----------------------------------------------------------------------------
// WooCommerce page output for Integrity.
// =============================================================================

get_header();

?>

	<div class="x-container max width offset">
		<div class="<?php x_main_content_class(); ?>" role="main">

		<?php
			if(is_shop()){
				The_Grid('Camberra', true);
			} else {
				woocommerce_content();
			}
		?>

		</div>

		<?php get_sidebar(); ?>

	</div>

<?php get_footer(); ?>

Hope it helps :slight_smile:

That worked!
The problem now is that I’m seeing Products and not the Categories.
I want The Grid to display the Categories. I don’t see a Product Categories option in the Post Types.
Is there another way to make this happen?

I also tried to get support directly from The Grid, but I don’t see a support forum and I can’t submit a ticket without an Envato Purchase Code.

Hey Jonathan,

It’s not possible to display the Product Categories in The Grid’s Content Source so showing the grid in the WooCommerce template has no use. Showing Product Categories in the Shop page has no connection with The Grid either.

Using the WooCommerce setting above, it will display Product Categories in your Shop page out of the box so with that said, I wouldn’t recommend using The Grid for this case or any customization in this case. In case you really need more information to show in your shop page, I’d recommend that you create a Global Block instead and manually adding Images, Category Titles and Category Descriptions using Image, Headline and Text elements.

Once a Global Block is created, a shortcode would be generated. For more details about Global Blocks, please see https://theme.co/apex/forum/t/global-blocks/24723

You can then use WordPress’ do_shortcode function to output the global block in PHP templates like echo do_shortcode('[cs_gb id=1796]');. You can replace The_Grid('Camberra', true); with that.

Just note that custom code issues are not a part of our support service. Please see our Terms. Issues that will arise from suggestions given in this thread would be your responsibility to fix and enhance.

If you wish to get ask for The Grid developer’s support, you will need to purchase a plugin license separately.

Thank you for understanding.

@christian_y
Thanks for the info.
The Grid support part is a little confusing because of what is written on The Grid page in the admin:

This is an exclusive deal for X users only. Your validated X license unlocks all features of The Grid including the skin builder. Updates are distributed automatically by Themeco as well as support provided in our forum.

The “as well as support provided in our forum” part made me think they have a support forum.

I see. I’ll forward that part to the personnel in charge for that for clarification.

Thanks for pointing that out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.