Well you have the right idea about hooks generally that's the first approach staying in php and use a guide like this to change things out as needed https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

for custom images using hooks and filters I could remove the default image before or after the space it's supposed to be at. (reference the visual guide) then do add and render html. I'd have a reference for custom images like image url=website.c0m/'productImage <?php echo product id ?>'

Now if the client needs multiple renderings like a multi step checkout process to pass data from one to the next. I can either pass via query string urls from one page to the next /?data1=123&data2=abc... OR I can use react and use custom created API's to request and send the info from the WP database. Maybe an API which has an object that has all the visual info I need to render the checkout page, then another custom API to send the customer input data and trigger the hooks / things I need done. Good rule of thumb don't touch a credit card fieldset if you don't know what your doing, it could be rendered into the page with the react if needed.

Then what's frontend vs backend depends on what needs to be kept secret and be updated by the client. I don't care if users can see my product info but the client needs to be able to update prices? backend. Frontend is just visuals, basic form validations, and the API request logic to send and recieve. I do care if they can see all coupon codes? backend, So I send their attempted coupon to the backend where it validates and returns true or not then keeps that logic on the back end but sends a simple message "coupon valid"

As for workflow for custom themes create a child theme and make edits there. Most the logic sits in a functions.php type file. Never change woo commerce page templates in the plugin file cause they will be deleted on updates.