How to divide the product view into 3 columns in magento 2?

Question

I want to divide the product view into 3 corresponding columns, could anyone please help me solve this problem. thanks

Answer 1

If this is going to be applied for every product, A good place to start would be to look into the Magento Product XML file inside Vendor folder.

/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml

You will want to Extend this file inside your theme. (I'm going to assume you know how to do this):

app/design/frontend///Magento_Catalog/layout/catalog_product_view.xml

I've not tested this, but I don't see any reason why it wouldn't work. Inside the 'content' reference container, we can see that we already have two containers:

'product.info.main' and 'product.info.media'.

What you would need to do in your theme extend would be to reference the 'content' container, to add the additional container in, e.g.

<referenceContainer name="content">
  <container name="product.info.third.col" htmlTag="div" htmlClass="third-container" after="-">
   // Add Block content in here which you want to appear in the 3rd column.
</container>
</referenceContainer>

Alternatively, if the block content already exists, you can simply just move it into the new container you have just made. e.g.

<move element="name.of.block.to.move" destination="product.info.third.col" before="-" /> 

Now that you have the XML in place, all you would then need to do is change the CSS so the page knows how much each container should take up.

Magento blank uses CSS to determine this already for the existing two columns, but you may want to look into an alternative solution such as Foundation grid 6 (which will help with responsive design also).

SS's for ref:

Hope this helps.

Answer 2

You could use the standard Magento settings to change the layout of the product view page into 3 columns layout https://docs.magento.com/user-guide/v2.3/design/page-layout.html