Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › Fancy 3 Category Products CSS
Tagged: fancy display
- This topic has 14 replies, 4 voices, and was last updated 9 years, 2 months ago by webmiss.
November 16, 2010 at 1:06 am #2236
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/
-JANovember 16, 2010 at 2:08 am #26554
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.November 16, 2010 at 3:07 am #26555
Do I get rid of the line break in the plugin css? Sorry if I’m a little daft here…
-JANovember 16, 2010 at 5:32 am #26556
Open the “shortcode_include.php” file from the Extra eStore shortcodes plugin and find the following function:
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”.November 17, 2010 at 2:47 am #26557
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!
-JANovember 17, 2010 at 5:45 am #26558
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.November 17, 2010 at 7:27 pm #26559
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).
-JANovember 18, 2010 at 2:29 am #26560
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.November 18, 2010 at 2:39 am #26561
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!
-JANovember 19, 2010 at 12:39 am #26562
Haha.. you can try the following CSS that will ad 10px above the button:
}March 20, 2014 at 8:26 pm #26563
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.March 21, 2014 at 5:33 am #26564adminKeymaster
The URL you posted is giving a 404 error.March 21, 2014 at 10:39 am #26565
Sorry, I recently changed the url. Here is the correct one:
I apologize for that. Still organizing stuff.March 22, 2014 at 6:56 am #26566adminKeymaster
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.March 22, 2014 at 12:14 pm #26567
Yes, that works perfectly. Thank you so much.
- You must be logged in to reply to this topic.