0

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

0

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

0

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: enter image description here

enter image description here

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.