WP eStore – Styling Variation Buttons

[JackAubrey]

This might be kind of weird question but is it possible to style the variation buttons in a way that’s different from the standard pulldowns? The default one doesn’t really match the font of my overall site and I’d love to change the colors of the arrows and the color background that the arrows are on.

Just curious…

-JA

[amin007]

Open the “wp_eStore_style.css” file and look for the following CSS code:

.eStore_variation{

margin-top:0px;

margin-bottom:0px;

}

The class “eStore_variation” is responsible for how the variations look so change the above CSS to how you want to style it.

[JackAubrey]

So I tried to test this by changing the font and it didn’t work. I put in:

.eStore_variation{

margin-top:0px;

margin-bottom:0px;

font-family: georgia;

}

-JA

[amin007]

There are two things here. One is the full area that controls the labels of the variations and buttons. The other is the individual variation drop down.

paste the following code in the “wp_eStore_style.css” file and you should see a change:

.eStore-button-form{

font-size:20px;

font-family:arial;

}



.eStore_variation{

margin-top:0px;

margin-bottom:0px;

font-size:20px;

font-family:arial;

}

Now tweak it slowly to what you want.

[JackAubrey]

Thanks so much — that’s really helpful.

One hopefully last question: Do you know how I would alter the font of the variation options themselves? With this I was able to alter the variation type, i.e., “Hand: left/right” where “hand” changed fonts but not the options. And do you know if it’s possible to change the color of the arrows that are on the blue background on the far right-hand side of the variation options? I know this is incredibly nitpicky and OCD of me, but I figured I would at least give it a shot before moving onto other priorities. I can’t seem to find out what the proper selector is using firebug…

-JA

[amin007]

I don’t think you can choose the color of arrow as those comes from the browser (this why you will see on safari or on a mac system they look different).

You should be able to change the font color, size etc by modifying the “eStore_variation” class but I am pretty sure your theme has another CSS definition of how it looks and that one is taking precedence so even though you are changing “eStore_variation” it is not taking effect. So look for the CSS for select boxes in your theme.

[JackAubrey]

Okay that’s helpful. I didn’t realize that the browser controlled that but it makes sense. Also makes sense that the theme is fighting my attempts to modify “estore_variation” — I actually noticed it acting a little funny before so that makes good sense too.

Thanks for your help — I’ll take a crack and see if I can get it styled into some kind of decent shape!

-JA

[Author]

Posts