The Grid and Woocommerce

[7LeafClover]

Hi,
I am using X theme with Woocommerce. On top of that I use The grid.
So on my homepage I have this nice featured product section built with the grid plugin.
Now I would like to apply the same option, the same design to every product in my shop. I can’t figure out how to do it.
on the homepage www.7leafcloverhemp.com:

I’d like to apply this setting to all my product.

thanks,

[ruenel]

Hello There,

Thanks for writing in! This featured section, where do you want to insert in your single product page. Is it in the top or below the product description?

Please be advised that this can only be done with custom development. And because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Please let us know how it goes.

[7LeafClover]

HI,
I mean I have done this on my homepage and I would like to apply the same deisgn setting for all my products from woocommerce.
I have tried to apply it at the page level. I fo to my shop page, then I can see the grid options at the bottom, and try to apply the same setting but it does not work:

Thanks,

[christopher]

Hi there,

As my colleague mentioned that can be done only via Custom Development. The way you set stuff in the shop page for The Grid will not work, the reason behind it is that the single shop page template PHP file does not have the proper code to receive the result of The Grid as Woocommerce and The Grid are not interconnected in that way.

But you can achieve this by changing the PHP files which is responsible for the generation of the Woocommerce single product pages. This is considered as customization and outside of our support scope, we will not be able to implement or maintain the suggested codes, but we will do our best to show you how to do the customization.

You will need to install the Child Theme and copy the file below from Parent theme:

wp-content/themes/x/woocommerce/single-product/related.php

To the Child Theme:

wp-content/themes/x-child/woocommerce/single-product/related.php

You will need to create the necessary folders on your Child Theme

Then change the newly copied file content to:

<?php

// =============================================================================
// WOOCOMMERCE/SINGLE-PRODUCT/RELATED.PHP
// -----------------------------------------------------------------------------
// @version 3.0.0
// =============================================================================

if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

echo '<div class="the-grid" style="clear: both; width: 100%;">' . do_shortcode('[the_grid name="Test"]') . '</div>'; 

if ( $related_products && x_get_option( 'x_woocommerce_product_related_enable' ) == '1' ) : ?>

  <section class="related products cols-<?php echo x_get_option( 'x_woocommerce_product_related_columns' ); ?>">

    <h2><?php esc_html_e( 'Related products', '__x__' ); ?></h2>

    <?php woocommerce_product_loop_start(); ?>

      <?php foreach ( $related_products as $related_product ) : ?>

        <?php
          $post_object = get_post( $related_product->get_id() );

          setup_postdata( $GLOBALS['post'] =& $post_object );

          wc_get_template_part( 'content', 'product' ); ?>

      <?php endforeach; ?>

    <?php woocommerce_product_loop_end(); ?>

  </section>

<?php endif;

wp_reset_postdata();

We used the do_shortcode function of the WordPress to add The Grid. You need to change [the_grid name="Test"] section with the shortcode of your Grid which you can find in the listing of the Grids:

We also wrapped the code to a div tag with the-grid class. So you can add custom CSS code like this to style it as you wish:

.single-product .the-grid {
	/* Your Code Here */
}

Thank you.

[7LeafClover]

ok thanks,
I will see what I can do.
Thanks again

[Joao]

Hi There,

The easiest path, would be to create pages and add grids which you will have links on your website.

So you would not use the WooCommerce Archive pages, instead you would create your own pages using Cornerstone.

This would not eliminate the WooCommerce archives but you can organize in a way that your visitors will see more the grid looking like pages than the other woocommerce standard pages.

Hope that make sense.