Woo Commerce Customisation

Hi there,

as that differs so significantly from the default templates - I personally i would look at custom development of a woocommerce template. This would include the specific custom fields as well as 'rejigging' the HTML for thay layout. Word of caution: Woo can get complicated, and Woo gets updated quite often so custom work requires maintenance.

The alternative is to take advantage of Hooks.
This site provides a good visual guide of them all and the default actions they perform:

https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

Although Elements would be great for prototyping I would probably move the completed Hooks to a child theme functions.php to avoid the risk of accidental client edits.....

Thanks for the reply.

Am I correct in thinking that if I was to use Hooks then I would be restricted to adding in content either before or after existing hook positions but not be able to alter the layout?

Or would I have to remove content currently located in Hook positions and then add new content back into those positions but with custom HTML surrounding the content to alter the layout?

If I did this then would I still be at the mercy of WooCommerce updates in terms of messing with my layout?

You can do either or both :)
That is:
Use priority to position it before or after an existing hooked function.
Or use the remove_action and add_action to move a function to a completely different hook.

You can also get a little creative for example:

add_action( 'woocommerce_after_single_product_summary', function(){
    echo '<!-- open custom wrapper--><div class="custom-wrapper">';
},5);

add_action( 'woocommerce_after_single_product_summary', function(){
    echo '</div><!-- close custom wrapper-->';
},12);

What this would do ( experimental ) is to wrap a new div around the Woocommerce tabs, the opening DIV with a priority of 5 sits before the tabs. And the closing DIV at 12 which is before the related products function.

This sort of thing shouldn't be affected by Woocommerce updates - but be mindful that other plugins may be also using these hooks.

Thanks David,

I tried that code as an experiment but it did not work - it simply printed the code onto the product page. Am I missing something?

If I didn't place any php and just added a div then I can see that appears in the Chrome Inspector.

Instead of adding that code into a hook, try one of these methods: https://docs.generatepress.com/article/adding-php/

Thanks. Using the child theme works. I have done a little more research and discovered Toolset which looks like it will allow me to use Gutenberg blocks to layout the page exactly as I require. Do you have any thoughts on using Toolset along with Generatepress?

One final question - the menu header is using a background image which contains 'signs' which the menu text is to sit on top of to represent a train station signage. Do you have any ideas on the best way to achieve this? I am concerned that I cannot simply use a single background image as upon resizing the menu text will be offset from the 'signs'.

We have quite a few users that use Toolset and GP. Don't have much experience myself. I know it used to use Bootstrap CSS library which is never fun with its conflicting CSS Classes but if they do a Block editor now then maybe they ditched it.

The Background options allows you to add images to the Menu Items.