How do I move the add to cart button beside the price? In the category product list.
eventually I want something like this. Where do I completely edit the layout for the product list?
-
its hard to answer without seeing the logic behid this page– Afzel ArshadCommented Aug 19, 2022 at 18:15
-
share your source code then maybe some can answer– Afzel ArshadCommented Aug 19, 2022 at 18:16
-
it's the default source code from luma theme– Isabel ChuaCommented Aug 19, 2022 at 22:13
-
basic css skills.. you should learn css in particular flex and grid for your case– Mattia KozianowskiCommented Aug 20, 2022 at 6:10
-
I know css. I found the answer myself posted below, which is changing the grid.phtml– Isabel ChuaCommented Aug 22, 2022 at 17:40
Add a comment
|
2 Answers
Its simple css, Just make the button width smaller and place it beside the price using flex properties.
answered Aug 22, 2022 at 6:23
-
this doesn't work because they're in separate divs to begin with Commented Aug 22, 2022 at 17:37
I found the answer myself for just tinkering around the template. I just needed to get the file "grid.phtml" and put it on my custom theme from luma. put the add to cart in the save div section as the price button. As the answers above css alone won't help it because of the reason it is on another separate div so I had to transfer both of them on the same div so that they can be edited accordingly.