Hey all, I've been working towards a better way to get the shopping cart to display a bit better for small screens.
First, I have made a page on my site called, Cart and given it a custom template page. The template is just a very simple page that calls my header, footer, and the Woo shortcode to show the shopping cart: http://pastebin.com/w9MRFmrZ This way, I have a wrapper that I can get a bit more control over the styles with.
Now on the woocommerce's cart.php file, What I have done is taken out the html table and it's rows/columns altogether. I went ahead and made each section it's own div.
Here is the updated cart.php file: http://pastebin.com/1iEhw5F9
WORKS PERFECT! Does what I need it to do, UNTIL I add a separate/different item to the shopping cart. Then what happens is the new item's divs/content appear BELOW my wrapper div and appear unstyled. I just can't figure out why only one item and it's divs stay within my wrapper. And to be more clear, I'm talking about when at least TWO separate items are in the shopping cart at the same time. The first item is within the wrapper, but the next item is not. Can anyone help me out with this? I hope it's something easy that I'm missing. Thanks!