19 comments found.
Hi,
Does this work on Shopify?
Thank you
Its normal CSS HTML so if you can integrate CSS and HTML in shopify it should work as well
We use this as our pricing table on http://p3webnigeria.com and it’s great. and i think it brought us some good sales too. I don’t know if i will attribute the sales to the pricing table, i just love, and support was awesome when we needed help.
Does it support unlimited pricing tables or unlimited columns? I would buy it right away…
Supports 6 clumns
Man! I was excited about getting your plugin but just realized is not a WP plugin. Please create wp plugin version. Also you should add screenshots of the backend.
Will work on that ASAP
Is there an alternative way to add this to WP besides putting the CSS code into the theme CSS. When I add the CSS into the theme, it screws up the font and other items for the rest of the theme. Please advise as I really, really like this table.
Hi Rbrazeau
My apologies for the late feedback i have been away from office
There isn’t any other way i know of currently
Thanks
Hi there, nice pricing tables.
Quick question – what part of the css do I need to change to stop the anchor text in the pricing-button in the pricing-footer from changing colour? I want it to be white when active and not active.
Additionally the hover animation makes the section beneath the tables move down, how do I rectify this?
cheers
David
Hi David
The buttons are noted by this style
.smart-pricing .pricing-buttonThen for the animations there is a comment before the animation styles – look for styles below these words
animate pricing ok I have done the buttons, I can see the animate pricing in the css but not sure what part to edit. Here is the link, I would appreciate it if you could just tell me what code to add where so that the footer does not move along with the animation
http://webheroesdevsite.com/php/pricing.phpthanks!
Open the CSS file and look for this comment line below
/* animate pricing table columns on :hover
----------------------------------------------------------- */Remove all CSS / or comment out all css below this line up to this line below
/* features column
------------------------------------------------------ */So in short the CSS between those two lines does the animations
I see in your CSS you removed the first comment so look for the origninal file and locate those two comment lines they follow each other and there classes of CSS between them
Here is the CSS you have to remove
/* animate pricing table columns on :hover
----------------------------------------------------------- */
.smart-pricing:hover,
.smart-pricing:hover .dark-style .featured-package,
.smart-pricing:hover .elegant-style .featured-package{
z-index:1;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
.smart-pricing:hover .dark-style .featured-package,
.smart-pricing:hover .elegant-style .featured-package{ margin:0; }
.smart-pricing:hover .dark-style .featured-package .pricing-footer,
.smart-pricing:hover .elegant-style .featured-package .pricing-footer{ padding:20px; }
.smart-pricing:hover .dark-style .featured-package .pricing-header h2 span,
.smart-pricing:hover .elegant-style .featured-package .pricing-header h2 span { font-size:46px; }
.smart-pricing .dark-style .colm-list:hover,
.smart-pricing .elegant-style .colm-list:hover,
.smart-pricing .dark-style .featured-package:hover,
.smart-pricing .elegant-style .featured-package:hover{
-webkit-box-shadow:rgba(0, 0, 0, 0.25) 0 0 9px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.25) 0 0 9px 0;
-o-box-shadow: rgba(0, 0, 0, 0.25) 0 0 9px 0;
box-shadow: rgba(0, 0, 0, 0.25) 0 0 9px 0;
box-shadow: rgba(0,0,0,0.25) 0 0 12px 0 \0/IE9;
margin: -20px 0 0 0;
position:relative;
z-index:99;
top:0;
}
.smart-pricing .dark-style .colm-list:hover,
.smart-pricing .dark-style .featured-package:hover{
-webkit-box-shadow:rgba(0, 0, 0, 1) 0 0 9px 0;
-moz-box-shadow: rgba(0, 0, 0, 1) 0 0 9px 0;
-o-box-shadow: rgba(0, 0, 0, 1) 0 0 9px 0;
box-shadow: rgba(0, 0, 0, 1) 0 0 9px 0;
box-shadow: rgba(0,0,0,1) 0 0 12px 0 \0/IE9;
}
.smart-pricing .dark-style .colm-list:hover .pricing-footer,
.smart-pricing .elegant-style .colm-list:hover .pricing-footer,
.smart-pricing .dark-style .featured-package:hover .pricing-footer,
.smart-pricing .elegant-style .featured-package:hover .pricing-footer{ padding:25px 20px; }
.smart-pricing .dark-style .colm-list:hover .pricing-header h2 span,
.smart-pricing .elegant-style .colm-list:hover .pricing-header h2 span,
.smart-pricing .dark-style .featured-package:hover .pricing-header h2 span,
.smart-pricing .elegant-style .featured-package:hover .pricing-header h2 span{ font-size: 62px; }
/* features column
------------------------------------------------------ */Locate those lines in your CSS file they are in one place
Hi, thanks for your support. I assume this will remove the animation? I still want it, I just don’t want the whole site to move down when animated.
How would you like to animate it?
Hello, when we add the CSS, the tables look good – but font across our site is instantly changed – I think it has to do with originally being Open Sans, but now it is an ugly serif font ever since we added the css, please advise!
Oh sorry
Please remove this line below in smart-pricing.csshtml, body{
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font: inherit;
}Very jerky. Is it possible to get these more fluid?
Hi, I added the html and all the files to my site but so far I am having them appear like this: http://www.churbus.com/join-2/
HI Hantaah,
Your WP theme is adding extra markup in the tables like paragraphs etc you have to make sure that in your WP Editor you dont leave white spaces.
Also on long lines that span 2 lines or more just set a style with min height like 60px and call it corresponding lines
Thanks
Hi, emailed you a support ticket – did you see it?
Let me check
hi admin, this plugins can not install on wordpress
Hi Jagonyacctv,
This is a CSS product not a WordPress it is actually indicated on the page of the product as a notice.
The only way to use it with WordPress is to merge its CSS with your theme CSS and then put the HTML in the WYWYG Editor it should work that way but that’s a manual way
the features comparison table loses the feature labels AND tooltips when the screen is reduced. not a very “smart” pricing table at all.
Hi Masteryan,
The labels move above each feature details for all comparison tables using a data attribute and being a CSS product that’s the most convenient way of doing it for now. You can look at the demos for the way this works.
For the tool-tips yes they are lost but as you have raised it with some tweaking i believe we can get the tool-tips back on small screens – so i will soon be working on the idea of maintaining both while putting SEO in consideration as an update.
Thanks
I find it hard to make this work well on joomla, am interested in the price comparison table, but it doesn’t tally well. Check it out here
Hi Wconline360,
Your link doesn’t work can you re-upload the image or send me the real url. Thanks
Hello,
I am having an issue with Smart Pricing… When using on a screen resolution 1360 resolution the table appear messed up.
How may I solve this issue?
Hi riverblue,
Can you email me a screen shot of how it looks like – look for my support email in the documentation or email me via my profile page
Thank you
When I add links to the buttons at the bottom the code breaks and hafl of the css doesnt work? Is there a certain to link this buttons?
Hi Fuwak, Send me an email with a link to your demo on my profile page.
Thanks
I’m using the features option with five columns and they appear to shake violently when moused over. Can anything be done to stop these being so “jumpy”? It seems to be a very jerky animation that makes me feel dizzy.
Hi Chris, Sorry about the animation thing, you can disable it by removing all the animation CSS.
Remove all styles between these comment lines
/* animate pricing table columns on :hover
—-—-—-—-—-—-—-—-—-—-—-— /
/ features column
—-—-—-—-—-—-—-—-—-—-— */
That should solve your problem.
Regards
I’m using two-colm and I would like to have them centered, right now they are on the left side. Can this be done.
Hi zeddesign,
Just use margin:0 auto, on the parent div containing the tables, it should do the trick!
Thanks
Hi, beautiful pricing tables!
one tip: would be better, if elements under the pricing tables wouldn’t move with the animation. GLWS!
Thanks for the tip welovemilk, put under consideration.
Regards
