Change the default cart icon & other styling

[pixelmommy]

Hello! I have put the shortcode for the shopping card in the header of my Genesis child theme at http://shop.anythingbutperfect.com. Currently it shows a small cart icon, then “Shopping Cart:” on another line, then “Your cart is empty” on a third line. (There also appears to be line spacing between each of those). I want to reformat this as follows:

– Would like to use my own (much smaller cart icon)

– Would like the cart icon to be on the same line as “Shopping Cart:”

– Would like the “Your cart is empty” text to be right under that. (no double line-spacing).

What files can/should I edit to accomplish this and when there is an upgrade, will I have to remember to re-edit those files each time?

Thank you!

-Angela

AnythingbutPerfect.com

[Peter]

Hi,

The following links may help you:

empty cart image – options?

Resizing image for Shopping Cart or using a different image

Also regarding the alignment of your cart and headings etc – you will have to play around with the CSS in firebug to find a fit which best suits you. When you’ve finally figured out the code which works, you should then place it in the wp_eStore_custom_style.css file.

For instance after a few minutes playing with firebug I already found that this code moves the cart image and first text line side by side:

.shopping_cart {

text-align: left !important;

}

.shopping_cart input {

margin: 0 0 -30px -40px !important;

width: auto !important;

}

There are probably many ways to achieve this so you’ll need to experiment.

This page may help you with the usage of firebug:

http://www.tipsandtricks-hq.com/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037

[pixelmommy]

Thank you! wp_eStore_custom_style.css, that’s what I was needing! Tweaking it now, let’s see what I can come up with

[Author]

Posts