product-page Restructure Product Page

Site URL: https://www.mdrtraininguk.com/shop/p/hgvclassroom

Hi,

Im wondering if it is possible to restructure the product page. At the moment, I use the "simple" layout which is:

Title
Description
Purchase button
Additional info

With images on the right.

I would like to structure the page in the following way

Title
Additional info
Purchase button

The reason is that the additional info section can be designed, with sections the same as a standard page. The product description section is just text only.

I hope that makes sense. If there are any coding wizards with a solution, I'd really like to hear it 🙂

Thanks

Rich

This is possible. You want this on specific product or all products?

Hi Tuanphan

Ideally all pages, so I guess some sort of code injection?

@tuanphan would you be able to help me with the code please.. I have absolutely no idea about CSS🙂

On 2/18/2022 at 8:26 PM, RichD said:

@tuanphan would you be able to help me with the code please.. I have absolutely no idea about CSS🙂

Sorry for the delay. Add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('section.ProductItem-additional').insertBefore('div.product-quantity-input');
	});
</script>
<style>
  section.ProductItem-additional {
    margin-top: 0px !important;
}
</style>

Brilliant! Thank you very much. I'll have a play with this later today.