Layout – basic question

[Peaceless]

Hi!

I think I have a rather basic question; I am using Magazine pro together with woocommerce. The default layout of the cart and checkout page is that the contents of the page is stacked ontop of eachoter and I would like for instance to move the Cart totals to be next to the cart contents to the right instead of below. How do I go about adjusting this in the template file so that I do not break any responsiveness...? the tutorials I find googling just tells me how to create templates and adding text and new content to the templates, not moving something, so I´m stuck!

I´m not keen on buying plugins since I want to at least gather some knowledge even if I am not a programmer!

thanks in advance!

kr,

?…sa

[Victor Font]

There is a set of templates in the WooCommerce plugin folder that can be customized to your liking. They are in the WooCommerce/Templates directory. What you need to do is create a directory called WooCommerce in your child theme directory and copy whatever templates you want to customize into that directory. The customized templates override the WooCommerce templates. There are details here: http://docs.woothemes.com/document/template-structure/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Peaceless]

Hi Victor!

Thanks for answering! I´m on top of the creating template deal and adding/changing text, but when it comes to changing the actual layout, like making two columns (? not sure if that is what I need to do 🙂 ) I´m lost.... you have any additional pointers to give me?

Thanks again!

?…sa

[Peaceless]

Hi again!

ok so I managed to adjust the layout of the cart via CSS where I set the width to 75% on the conents table and float: left, and the total table to have width 25% and float: right. Some additional styling and it looks ok but, it´s not responsive, hence the total doesn´t move to be below the content when using a smaller screen, both are next to each other untill one point where the total table moves below the content table but of course it floates right and is still 25%. Any way to come around this?

Thanks for any help!

kr,

?…sa

[Brad Dalton]

Add your CSS to a Media Query and modify it there so each column displays 100% at a specific screen width. Change the 680px to anything you like:

@media only screen and (max-width: 680px) {

	Your CSS

}

---

Tutorials for StudioPress Themes.

[Peaceless]

Lovely! Thanks braddalton! that worked perfectly 😀

Million thanks!

[Author]

Posts