How do I edit css for the shopping cart page?

Hello, I am brand new to MarketPlace (just purchased today). I am wondering how to style my shopping cart to look like the sample below?

http://digitaldownloads.wp-ecommerce.org/store/shopping-cart/

Currently my header and shopping cart content is all squished together: http://off.olympiawebsitedesigns.com/store/shopping-cart/ If it helps, I am using Thesis 2.0. I am very familiar with CSS syntax, just not sure which ids and classes to style and where to find them. I mean, I know I can go to the marketplace style.css file, but any update would overwrite it, correct?

Thanks!

  • slchristianson
    • WPMU DEV Initiate

    sorry, I just realized, you are going to have to put something in the cart for either of the shopping carts to show on the URLs I gave. Your sample store (the first URL in my post above), please add a product to see the layout I was referring to. In my store, there is a product at http://off.olympiawebsitedesigns.com/store/products/foxfarm-big-bloom/ that you can add to the shopping cart to see it “squished” and not layed out properly.

    Thanks.

  • slchristianson
    • WPMU DEV Initiate

    Ari, My apologies. I "played" with it late into the evening and forgot to add an update to my post. I added the following css:

    .mp_cart_contents {

    text-align: left;

    }

    table.mp_cart_contents td, table.mp_cart_shipping td {

    padding-right: 50px;

    padding-top: 10px;

    }

    I'm thinking that Thesis 2 has some default styling for tables that were interfering with MarketPress styling.

    My issue now, (which I have not been able to figure out) is that the user login info field is turned off in settings and seems to work in Firefox, but still shows in Chrome, Safari and IE9 I have attached a screenshot of it not showing in FF, and a screenshot of it showing in Chrome with the same settings.

  • slchristianson
    • WPMU DEV Initiate

    Ari – update: Another member shared the following CSS with me that seems to have taken care of the issue:

    .mp_cart_login_msg {display:none !important;}

    mp_cart_or_label {display:none !important;}

    th.mp_cart_login {display:none !important;}

    td.mp_cart_login {display:none !important;}

    Please see the cart again in the different browsers and let me know if there will be a fix to this issue (or if a fix has already been deployed!)

    Thanks!

    Sandi

  • slchristianson
    • WPMU DEV Initiate

    Ari – sorry to keep posting, but I do see a potential issue in Firefox. If you look at the shopping cart in firefox with the login setting turned off, the “checkout now” button is in a different location, and the “checkout directly” heading is missing. I guess, actually, the “checkout directly” and “or” headings should also be deleted in Chrome, Safari and IE9?

    Sandi

  • aristath
    • Recruit

    Ari – update: Another member shared the following CSS with me that seems to have taken care of the issue:

    The code posted there makes some elements of the page disappear and does not allow them to be shown. That’s why some elements of your page are now “missing”.

    Please delete the code that you posted above, refresh your browser and post back here so that I can take a new look and fix the issues you have with your theme. :slight_smile:

    Cheers,

    Ari.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.