[Support request] Woo Commerce Customisation

Home Forums Support Woo Commerce Customisation

  • This topic has 7 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1220578
    Rob

    Hi,

    I am looking for some guidance on the best approach for developing a Woo Commerce website using Generatepress. I have attached a screenshot of a potential single product page – as you can see it is a very different layout to the standard WooCommerce product page. The Highlights and Route Map sections will need to be custom fields – I was planning on using ACF to create these but am unsure on how to add them to WooCommerce pages. I would also need to manipulate the positioning of the standard Woo Commerce fields as you can see that the product description is in two columns etc. I have zero experience of WooCommerce so wonder if you are able to offer any advise on the best way to create such custom layouts.

    Would I need to create a unique template or could this be done by using Generatepress Elements using Hooks do you think? Or is there a way of combining GenerateBlocks with shortcodes for ACF to create such a layout?

    The key factor is the client will be adding products/events on an ongoing basis so I want to develop the website with that in mind. I appreciate that you won’t be able to give me all the details but at this stage I am looking to ensure that I take the correct approach from the outset.

    Thanks

    Rob

    #1220676
    David
    Staff
    Customer Support

    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…..

    #1220733
    Rob

    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?

    #1220943
    David
    Staff
    Customer Support

    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.

    #1221121
    Rob

    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.

    #1221476
    Tom
    Lead Developer
    Lead Developer

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

    #1223133
    Rob

    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’.

    #1223341
    David
    Staff
    Customer Support

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.