[SOLVED] Latest Version of Shopping Cart ... CSS files

I'm using the default theme for my cart ... I tried adding some custom CSS to my WordPress theme but it made no difference.

Where are the CSS files in this new version? I have a few tweaks I need to apply.

thanks,
-dena

Comments

  • 6 Comments sorted by
  • Vote Up0Vote Down
    Hi Dena,

    Thanks for your post.

    You could add custom CSS code to the plugin configuration under Checkout > Configuration > General > Theme, Scripts & Custom CSS (at the bottom of the page).

    http://screencast.com/t/WXVqREAbGv

    If you need to make substantial CSS changes though, I would suggest doing it via a child theme, as is also explained in that section.

    Let me know if you need more information, will you?

    Best regards,

    Phil
  • Vote Up0Vote Down
    Okay - I'm not totally understanding where I create this "child theme" folder. 

    The theme I'm using on my site is based on "photoframe". Do I create a "checkout" folder in that theme's folder /wp-content/themes/photoframe/checkout? Or am I creating a "checkout" folder in /wp-content/plugins/wp-checkout/views/checkout?

    And if I put it in /views/checkout do I select that from the drop down below? I've tried putting css in the box at the bottom of the graphic below and it didn't change anything ... besides ... how do I know what to call my "overrides" if there's no CSS classes or IDs anywhere?

    I am so confused ... 

    image
  • Vote Up0Vote Down
    Hi Dena,

    Thanks for your reply.

    Depending on the browser you use, you could use it's "console" to inspect the elements on the page and see what their IDs and classes are. If you use Firefox, there's a very handy add-on you could install called FireBug - that would help you tremendously. Most browsers have utilities like these, simply check under "Tools" or something similar.

    Placing CSS code into the "Use Custom CSS" box is a very easy method of changing the look and feel of your Shopping Cart plugin's pages and elements. If you add code into that box and it has no effect (and you know your code is correct), then try adding "!important" to the code in the following way:

    If this is correct but won't work: .elementclass { height: 10px; }
    Then try using this: .elementclass { height: 10px !important; }

    Of course best would still be the child theme, by creating a "checkout" folder in /wp-content/themes/

    Then you simply copy the style.css from your active Shopping Cart plugin theme ("default" or "simpleblue") to your "checkout" folder, and edit it according to your requirements.

    I hope this helps, Dena? I look forward to your reply.

    Kind regards,

    Phil
  • Vote Up0Vote Down
    Thanks Phil! Your response is just what I needed to get going. I'm able to apply a few tweaks here and there now that I know where to do it. Not enough to warrant a child theme ... just my picky self.

    I consider this issue resolved.

    THANKS!

    -dena
  • Vote Up0Vote Down
    You're most welcome, Dena!

    Feel free to give us a shout should you need any further help or advice, and best of success with your online venture.

    Best regards,

    Phil
Sign In or Register to comment.