Fancy 3 Category Products CSS

[JackAubrey]

Hello —

Just a quick CSS question. I tried this on my own for a while but couldn’t get it to come out right. I’m trying to close the gap between the price and the variations, and put in a very small space between the variations and the purchase button below it. Basically just want this to hang together a little nicer from a design point of view. Any ideas how to get the right CSS?

Here’s the page: http://www.spinozarods.com/store/classic-reels/

Thanks!

-JA

[amin007]

The same variation code is used in all the fancy displays (code re-usability is a very good practice in coding) so to accommodate the variation code in all the displays it places a linebreak depending on the fancy display it is being used for. For fancy display 3 it does place the linebreak. You can modify the code for fancy display 3 and remove the line break which should get rid of that space.

[JackAubrey]

Do I get rid of the line break in the plugin css? Sorry if I’m a little daft here…

-JA

[amin007]

Open the “shortcode_include.php” file from the Extra eStore shortcodes plugin and find the following function:

function show_wp_eStore_fancy3

Inside that function find the following line:

$output .= get_button_code_for_element($ret_product);

Once you find it change it to the following:

$output .= get_button_code_for_element($ret_product,false);

The 2nd parameter (false) will tell the plugin to not put “line break”.

[JackAubrey]

Thanks — that worked well.

Now I just need to get a small space put in between the variations and the “purchase” button. What is the css selector that I should use to adjust the margins?

One last thing: do you know why some of the variations are no longer on different lines here?

Thanks for all of your help!

-JA

[amin007]

The CSS class to target is “eStore_button”. The variations are not in different line anymore because you told it to not put a line break (remember the previous post?).

Do you use firebug? It is a firefox addon and comes really handy to find out which CSS class to target for what when doing CSS customizations.

[JackAubrey]

Okay, I’ll give that a shot. I figured that the line break might also do that to the variations. I’m guessing there’s no other way to get rid of the break between the price and the variations without losing the ability to keep the variations from rolling over either?

It sort of seems like I’ve fixed one thing just to break another (not a new experience for me that’s for sure).

-JA

[amin007]

LOL… anything is possible with tweaking the code. I don’t recommend doing too much tweaking because it makes the plugin upgrade harder for you. I didn’t really think that the little space looked bad. Honestly, I don’t think your customers will even notice that space… if they want the item they will buy it regardless

Anyway, this is what you can do…

Find the function called “get_variation_and_input_code” from the “eStore_button_display_helper.php” file of eStore. This is the function that displays the variation control stuff. You need to copy this function and give it a name like “get_variation_and_input_code_fancy3”. Now you can customize the variation display without affecting the other displays. Once you are done customizing edit the code for the fancy3 display to use this newly customized function and that should do it.

[JackAubrey]

Okay, I give in. Mercy! Mercy!

I just changed it back to what it was. I guess I can live with that space though it is a trifle too big for me. If I could shave off a few pixels that would be ideal but I guess it’s not worth breaking the site just to satisfy my OCD.

One last question. How do I put a little space between the variations and the “purchase” button on the bottom? At first I was going to just use CSS to push the top margin of the button up, but then it will look funny with items that don’t have any variations. But if I select to made the “margin-botton” bigger on the variation buttons, wouldn’t that also put a margin between the two variations themselves? Arrgh!

-JA

[amin007]

Haha.. you can try the following CSS that will ad 10px above the button:

.eStore_button{

margin-top:10px;

}

[webmiss]

I’m trying to just make a slight change to estore fancy 12 display. I’m wanting to have everything on one line and I noticed that there is a <br> tag between the quantity box and the Add To Cart button. I can’t find the file so I can take that break tag out.

Please see [http://www.airdrivenmusic.com/rwb-project/] and scroll down to where the music singles are. Changing the css is not working. I’m sure it’s the break tag. I tried following the instructions above in the shortcode_include file, but it did nothing.

Thanks for any help.

[admin]

The URL you posted is giving a 404 error.

[webmiss]

Sorry, I recently changed the url. Here is the correct one:

[http://www.airdrivenmusic.com/nightfall-album-by-rwb-project/]

I apologize for that. Still organizing stuff.

[admin]

I have made some changes to the extra shortcodes addon. Grab a new version of the extra eStore shortcodes addon now. Then use the following shortcode:

[wp_eStore_fancy12 id=XX line_break="0"]

Where XX is your product ID.

[webmiss]

Yes, that works perfectly. Thank you so much.

[Author]

Posts