-
Hello, I am stuck wondering if I can create custom product grids with GP?
For example on the homepage drop a 4 column grid of of products, best sellers
Further down the homepage show some category specific products
Or on the shop page, or category page, showcase a customized grid of products
All of these product cards would need to have an Add to Cart button
—- I have am having a hard time finding anything on actual woocommerce in your guys’ docs
I am using GP for this project because Ive seen there was this video out there:
However, mid way through the video I learned that its using a template GP Fashion
A) Is GP fashion at all your guys’ template?
B) Is there a way to achieve a similar build with some front end customizing using the provided tools in the builder?Ive also added a screenshot of what I’m trying to build ,in prviate.
TY for any assistance and/or clarity
-
Thanks for the detailed context — let me work through your questions.
On “GP Fashion” — that’s not one of our templates. It appears to be a third-party starter site built on top of GeneratePress, so I wouldn’t treat it as a direct guide for what’s available out of the box with us. That said, if you look closely at the video, the instructor is actually using WooCommerce shortcodes to handle the product grids — which is exactly the approach I’d recommend here too.
Building product grids with GP/GB
The cleanest way to achieve what you’re describing is WooCommerce’s built-in shortcodes, placed inside GB Containers on your page. For example:
[products limit="4" columns="4" best_selling="true"]for a best sellers section[products limit="4" columns="4" category="your-category-slug"]for category-specific grids
These render full product cards with Add to Cart buttons already included. You just drop a core WordPress Shortcode block inside a GB Container, paste the relevant shortcode, and handle the surrounding layout and spacing with GB as normal.
GB Query Loop approach
If you want more granular control over how each product card is built and laid out, GB’s Query Loop block lets you query products and build the card structure yourself using dynamic tags — outputting the product image, title, price, and other fields block by block. This gives you full design flexibility over the card layout.
The limitation with this approach is the Add to Cart button — there’s no native GB dynamic tag for it, so getting one into a Query Loop card requires custom PHP, which falls outside our support scope. For that reason, the shortcode approach above is the more practical path for most use cases.
Styling
Whichever route you take, you have full control to customize appearance via custom CSS — card layout, typography, button styles, hover states, etc. — to match your design.
This approach should cover all three scenarios you mentioned: homepage best sellers, category-specific sections further down, and product grids on shop/category pages.
-
Thanks so much for the detailed answer
So the structure makes sense
Now this might go into deeper customizations that you can’t help, with but I’m wondering how I would achieve the following, like GP Fashion did
1) add a “Save X%” tab above the product card photos
2) the Add to cart button is only visible on hover
3) the product photo changes to the 2nd gallery image, on hover -
Hi,
For 1 and 2, can you show me where in the video that happens?
For 3, Customizer -> Layout -> WooCommerce, in the Shop section there is a Display secondary image on hover checkbox.
-
Ah thank you, silly I overlooked that image hover option
The video doesn’t show much unfortuantely, its around the 28-minute mark he starts uploading xml template files and custom elements, and their child theme
Looks like its all done from those components
-
Hello,
He seems to be uploading Customizer settings and content. I am still not clear what you are after. If I don’t see a screenshot or an example I am not going to be able to advice accordingly, I am afraid.
- You must be logged in to reply to this topic.