[Support request] Best practices to create custom layouts for WooCommerce products

[Thierry]

Hi,

I’ve just purchased GeneratePress + GenerateBlocks, and I’ve been recreating an e-commerce website I’ve been developing in Elementor up until then. I know that for now, the theme and plugin is limited when it comes to WooCommerce. What I saw is that for example :

– We cannot use the current element’s ID in a shortcode when using a query loop, for example to show the price of a product (handling sale price, etc. directly in the shortcode)
– It’s not exactly possible to create a custom template for a product. I was able to add content through a block hooked to before_content to specific products, with custom information in it (featured image, description, etc.) but I’m losing some of WooCommerce capabilities of course (such as featured image changing when selecting a different product variation)

I’ve seen in the interview Tom Usborne gave to the Admin Bar that eventually, the idea is to be able to design a loop for products and access any field, same thing with custom product’s template, etc. it seems. I don’t know how far down the road that will be !

So for now, what would be the best way to tackle custom templates for single products and query loops ? Do you have good solid plugins (such as yours) you could recommend (for example a plugin bundling Gutenberg blocks for product image, price, add to cart, etc.) ?

Right now, if no such plugin exists, I’m torn between :

– Developing my own products templates by overriding WC templates the old way
– Creating a bunch of shortcodes I could use to show part of my product and handle the design in GeneratePress with the hook method I mentioned above
– Creating a bunch of custom gutenberg blocks instead of shortcodes, so that I can actually get something showing up in the editor
– Or maybe another solution : extending GenerateBlocks with custom code allowing me for example to add “woocommerce price” in dynamic data options and then render the price how I want it. But I would need documentation for this if possible and the problem is, if you update your plugin to work in any other way that could potentially break my site

I know it’s quite a big question, but I really want to grow my business towards the most lightweight websites I can, and I’ve fallen in love with how robust, easy to use and quick it is to build content with your plugin. So now I just need to find the perfect way to handle that in WC.

Hope you can give me some insights on this !

Thanks.

[Fernando]

Hi Thierry,

For reference, some of our templates utilize custom CSS to fully alter WooCommerce pages.

If you opt to use a GB Query Loop Block, it should be possible to add product meta like price. See this screen recording for example: https://share.getcloudapp.com/2Nu6mKKL You just need to set the proper post meta field name for the product meta for it to appear.

You can also add shortcodes in Query Loop Blocks though not conventionally. You need to inject it through a filter called render_block(). Reference: https://developer.wordpress.org/reference/hooks/render_block/

All your proposed solutions should be viable except for “extending GenerateBlocks” as getting product data should be possible without “extending” or altering product code.

If you opt to use third-party plugins, unfortunately, we have no specific recommendations. What we can recommend is to ask for suggestions in our Facebook Group: https://www.facebook.com/groups/1113359788719597

I find that many people are willing to help there as well, especially with plugin recommendations.

[Thierry]

Hi Fernando,

Thanks for the quick answer !

I’ve seen the examples you gave, for example the use of _regular_price meta to show the price in a query loop. The problem is that it shows the price with no formatting and no currency, and no sale_price if any was given. I’ve found a hook that can customize dynamic data output, so that I could add currency and format the value, but this relies on the headline having a specific class, etc.

This becomes a bit cumbersome to simply output the price of a product. But I love the fact that you guys always give some kind of solutions to do what we need to do. It’s just not the most streamlined way to do that, when handling multiple e-commerce sites and trying to set a clear workflow.

I understand your comment about extending GenerateBlocks, my idea was not to alter your product code, more to add a series of functions using your own hooks and filters to do what I want. For example, I was able to add a custom “style” attribute (with ACF data in it) to certain blocks by using the ‘generateblocks_attr_container’ filter. But since this filter is not in your doc (I found it in the code) I run into the possibility that it won’t be available anymore if you update your code.

Do you think it’s a bad idea to do that or generally, when you use a filter, they’re here to stay ?

I’ve asked the admin to get access to the facebook group you mentioned, I’ll go there to ask further questions about third party solutions to do what I want.

[David]

Hi there,

personally, i would stick with:

– Developing my own products templates by overriding WC templates the old way

That is not to say you could not use Hooks and Block Elements to insert dynamic content or even build a block content template. The real headache comes from getting things as simple as a price. The meta data is no good on its own as Woo uses multiple functions to return the price considering currency, taxes, discounts, variants etc. before returning the formatted HTML.
You could of course repurpose some of woos functions and use the render_block filter to inject the price into a static block. Which is probably relatively straight forward on a single post but somewhat near on the impossible to do in a Query Loop block.

Aside from the headache of rebuilding what woo does really well, like getting a price, and managing any compatibility and extension integration doing the above work today is really kinda piece meal and feels hackish.
I would sooner spend the ( less ) time writing some templates and custom CSS.

Note regarding the GB filter, we wouldn’t remove that – its just not very well documented.

[Thierry]

Hi David,

Thanks for the thorough answer !
I’ve tested this and through shortcodes I can actually add content inside my template by calling certain WC hook and functions and without losing capabilities. For example, even though I’ve added the featured image and add to cart block through a shortcode and in separate places on the page, WC capabilities are still there : selecting a different variation shows a different image.

Of course, when templates are easy to customize with CSS and some PHP, because they are fairly close to what WC deliver out of the box, I won’t try and recreate everything with GB. But on the website I’m using for testing purpose, being able to create most of the visual elements with GB saves me a lot of times.

I hear you concerning the query loop, for product miniatures I will mostly try and use the WC template and default blocks, CSSed and with some added content (through templating or hooks). Out of curiosity, I could add GB block in any of the given WooCommerce hooks by using a custom hook that I would type myself, that’s possible ?

Regarding the GB filter, that’s great ! I’m using it to add ACF information (such as background, gradient, etc.) inside the style attribute. If the filter won’t be removed soon, I could extend this a bit and use data attributes in order to customize styles, hrefs or other stuff.

[David]

Yeah woo and shortcodes are a great combo.
i was really disappointed when they released woo blocks and found there was no relation to the plugin templates. So i still use shortcodes.

RE: Hooks, In the GP Block Element ( or Hook element ) you will see a list of Woo Action hooks.
And if you want to add your own hook or one that is not listed then set the Hook to: Custom, and it will provide a field for you to type in the hook name.

We aim to add Dynamic HTML attributes as a GB Pro feature ( it currently has static attributes that you can build yourself ) which will make that a lot easier. But otherwise that filter is great.

[Author]

Posts