How to customize the product layout in shop page

[Dadparvar]

Hi,

Now, in shop page in my, each product looks like this:

and when I hover the mouse over it, it looks like this:

Now, my question is: How can I fully change the way it looks? I use a lot of other plugins that add buttons and info to the layout, and with the default design of it, the result is very ugly, and completely different from what I want. I don’t want to apply simple css, as its easily possible with the theme options. I have a completely different layout for it.

Let’s say something like this:

I need to know what file and where in my child theme I should create to make my own design there? (and if there is any file in the parent theme so that I can dupicate it to my child theme in order to see the shortcodes that are used on the layout design, to put them in my own design?)

Thanks

[christian]

Hey @Dadparvar,

Our themes use the woocommerce_content function which can be found in wp-content\themes\pro\framework\views\STACK. To override it, you’ll need to know WooCommerce theme development and customizing our themes. Below are resources that might help:

• Customizing Our Theme: https://theme.co/apex/forum/t/customizations-best-practices/205
• WooCommerce Theme Development: https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/

Regretfully, we could only point you to those articles. We don’t have a guide to achieve your design.

Alternatively, you can try using the bundled grid plugins as they allow the creation of custom skins. Please see the items below:

• The Grid: Demos | Documentation
• Essential Grid: Demos | Documentation

Hope that helps.

[Dadparvar]

Thanks

I’ll read those articles to see what can I do.

I’m using The Grid at this time, but that has 2 problems:

1. it affects the page optimization a lot (I optimized my site a lot and that still is causing some load time increases)
2. I use a lot of 3rd party add-ons that add elements on product card, which The Grid doesn’t support anything outside itself!

It’s developer is not that much responsive as well, so I can’t rely on him. I asked a simple question and my comment is around 2 weeks waiting for review!

The best practice is for me to customize the theme so that it fully supports other add-ons, and it doesn’t load additional resources.

[jade]

Hi there,

Basically, anything that does not come with the structure, layout, styling, and features with X falls under custom development which goes beyond the scope of our support. In this case, it would be best to get in touch with a developer or for you to customize the theme display through the child theme based on the links @christian_y previously suggested.

Thank you.

[Dadparvar]

I tried testing The Grid to achieve this, as they have a feature called “The Grid As Template”
https://theme-one.com/docs/the-grid/#grid_as_template

I copied the woocommerce.php file in “integrity” from pro, to pro-child, and then replaced woocommerce_content(); with The_Grid(‘Shop Page Products’, true);

It worked for the shop page, and now the products lists in shop page is like how I designed in The Grid.

But the problem is now, even if you visit a single product page, instead of showing the product’s content, it is showing that single product as a grid!

Actually based on their documentation, I had to edit archive-product.php file, but PRO seems to use woocommerce.php and when I was searching online, woocommerce said if a theme is using woocommerce.php, then editing archive-product.php doesn’t apply (and I couldn’t find such file at all in PRO)

Any idea please?

Thanks

[ruenel]

Hello @Dadparvar,

You will need to update your code and use this instead:

<div class="<?php x_main_content_class(); ?>" role="main">
    
    <?php if ( is_shop() ) : ?>

        <?php The_Grid('Shop Page Products', true); ?>

    <?php else : ?>

      <?php woocommerce_content(); ?>

    <?php endif; ?>

</div>

This code will make sure that only the main shop page will display the grid template and when you view other woocommerce pages, it will display normally.

Please let us know if this works out for you.

[Dadparvar]

Worked like a charm. Much appreciated.

Would you mind letting me know how to achieve the same for the product categories page? Cause now when I visit a product category, it still shows the same as default, not like The Grid.

Thanks

[paul.r]

Hi,

To achieve that, please change the code to this

<div class="<?php x_main_content_class(); ?>" role="main">
    
    <?php if ( is_shop() ) : ?>

         <?php The_Grid('Shop Page Products', true); ?>
   
    <?php elseif(x_is_product_category()) : ?>

            <?php  The_Grid('Shop Page Products', true); ?>

    <?php else : ?>

      <?php woocommerce_content(); ?>

    <?php endif; ?>

</div>

Change the second <?php The_Grid('Shop Page Products', true); ?> with your product category grid.

Hope this helps

[Dadparvar]

Beautifully worked Much appreciated.

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Dadparvar]

There are 3 other places, that I wish I could achieve the same goal with. Hope you can help me with that:

1. Related products
2. Upselss
3. Cross Sells

They still show the products the same way as the default.

Thanks in advance

[rad]

Hi @Dadparvar,

For that, I recommend contacting a Woocommerce developer as it’s more related to Woocommerce core features. Example, these templates \x\woocommerce\single-product\related.php and \x\woocommerce\single-product\up-sells.php,

Examples,

<?php

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

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

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' ); ?>">

 <?php The_Grid('Related Products', true); ?>

  </section>

<?php endif;

<?php

// =============================================================================
// WOOCOMMERCE/SINGLE-PRODUCT/UP-SELLS.PHP
// -----------------------------------------------------------------------------
// @version 3.0.0
// =============================================================================

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

if ( $upsells && x_get_option( 'x_woocommerce_product_upsells_enable' ) == '1' ) : ?>

  <section class="up-sells upsells products cols-<?php echo x_get_option( 'x_woocommerce_product_upsell_columns' ); ?>">

 <?php The_Grid('Up Sells', true); ?>

  </section>

<?php endif;

This is just a sample, which means you’ll have to add your own conditions (through grid) to display which is related product, or which is up-sells. Which means, it may require different code than provided. Please contact a Woocommerce developer.

About the cross sells, it could be using the same template as up sells since there are no other templates connected to it.

Thanks!