Question About Making Website Using GeneratePress Theme

Hi Sumit,

Your single product template seems almost similar to the default template. You'll likely need just a little CSS. If you can provide the link to your current site, we can try to assist you with the code.

As for the collection page, you can achieve that through the WooCommerce Customizer settings. Here's an article you may refer to: https://docs.generatepress.com/article/woocommerce-overview/

what do you mean by "If you can provide the link to your current site, we can try to assist you with the code."

didn't I already provide that?

I meant the one already using the GeneratePress theme.

If it's in a staging site, that would be great.

The one you linked is still using Astra.

ah ok, I just updated my first comment and added the staging site link there.

I just set it up and done nothing on it yet.

I am not quite sure what is up, but the theme customize page just loads and loads, I have only generatepress premium and woocommerce plugin activated right now and it still does not work, however it works considerably faster if I deactivate gp-premium, could you help me with that?

Thank you!

Set the sidebar layout first through Appearance > Customize > Layout > WooCommerce: https://share.getcloudapp.com/NQu49mvd

Also, set the other layout settings there to your preference.

that is done. Customizer seem to be working fine as well now.

With regards to the Customizer being stuck on loading, can you first check the PHP memory limit of your site? To do so, go to Tools > Site Health > Info > Server.

Check if it's below 128M. If so, try increasing it.

See: https://docs.generatepress.com/article/increasing-php-memory-limit/

Check if there's any error in Site Heath too.

Alright! On the shop page, what specific layout from your Original site are you wanting to implement?

I could not find any setting to remove gap between the products itself.

I see. Can you try adding this through Appearance > Customize > Additional CSS:

@media(min-width: 769px) {
  #wc-column-container .products {
    grid-gap: 40px 5px;
  }
}

Modify the two values to your preference.

Then, you can add this as well so that the image doesn't overflow the container on hover:

.woocommerce .woocommerce-archive-wrapper .inside-wc-product-image {
  overflow: hidden;
}

thank you for your help. I have done that but I don't believe it is having the desired effect, on full screen gap is still to small and it reduces down on a responsive view, while the collection page view done with astra, the column gap stays the same through out.

I see. Try this instead:

@media(min-width: 769px) {
    #wc-column-container .products {
        column-gap: 20px;
    }

    #wc-column-container .products .inside-wc-product-image {
        width: 100%;
    }
}

It's the same exact gap value as your Astra site.

I did that and it still isn't right, seems like with astra product images' width also changes based on the size but here it stay max at 300px