Woocommerce check out on product page


I want to make it when you click on AddtoCart it opens the checkout on the same page as the product page.

So I got this working by adding the shortcode below in the product page, then I changed the link for the Add to cart button to #checkout and used an anchor(checkout) on the checkout section, so this solved the problem, I know I now need to go and replace all add to cart button on the site with static buttons that says view product.

I then noticed that styling and functionality are not pulling into this checkout section. After inspecting the code I noticed that some CSS links are not there so I went to find them and added them manually to the product page. For the life of me, I can’t find what makes deliver to a different address tickbox show or hide the content(different address details sections) and its the same when you select a payment method.

All of this works perfectly on the checkout page, is there a way I can all have the includes that are on the checkout page on the product page without having to go through one by one to check what CSS/JSS is on the different pages?

Here’s the link to one of the product pages: https://gooddayformula.fi/product/vitamin-b12/ Then here’s the link to the checkout page(everything works how it’s supposed to in the checkout process): https://gooddayformula.fi/checkout/

I came to the conclusion that some scrips include are omitted from the product pages to increase speed but the client wants this solution with no checkout or cart pages.

I am using Elementor + OceansWP + Latest Woocomm