[Seranum]

Hello,

Can you give me example of the sortcode used in Pricing Page to get 3 columns pricing ?

[Mehmet S.]

Hi,

Shortcode: pricing_table

[pricing_table]
Heading 3
Heading 4
Unordered List
Button shortcode here.
[/pricing_table]

Example:

[row]

[column width="4"]

[pricing_table]

PORTRAIT

$200

Up to 2 Hours
10 Images
2 Outfit Changes
2 Edited Images
Hi-res images on cd
[button text="Contact" url="http://themes.pixelwars.org/photographer/contact/"]

[/pricing_table]

[/column]

[column width="4"]

[pricing_table]

GROUP SHOTS

$400

Up to 4 Hours
50 Images
4 Outfit Changes
10 Edited Images
Hi-res images on cd
[button text="Contact" url="http://themes.pixelwars.org/photographer/contact/"]

[/pricing_table]

[/column]

[column width="4"]

[pricing_table]

WEDDING

$800

Up to 7 Hours
100 Images
5 Outfit Changes
20 Edited Images
Hi-res images on cd
[button text="Contact" url="http://themes.pixelwars.org/photographer/contact/"]

[/pricing_table]

[/column]

[/row]

[diananasif]

Hey, regarding the pricing boxes…is it possible to define another width/heigth?
I really like the look, but my client has a lot of services. the size of the boxes is really big, having a lot of white space around it. so i was thinking if it would be possible to set a fixed size?
Also, how can I fix heigth differences between boxes?
For example if a box has a service with 4 list items and another has 6, the box with 6 will look longer (by some pixels) resulting in a kind of ugly look?

Thanks in advance! :)

[ahmetsali]

@diananasif

Hi, sorry it is not possible to set a fixed size on responsive columns, because it will break the responsiveness. You can use a custom css code like this to make pricing boxes equal height;

@media screen and (min-width: 768px) {
    .pricing-table {
        min-height: 500px;
        }
}

set the tallest pricing box’s height to min-height value.

[diananasif]

Hey @ahmetsali,
thanks for the reply. but that custom css-code does not affect anything on my end..

[diananasif]

alright, the code worked, another code in the custom css was the reason.

Now, the boxes have the same height as wished. But in my opinion this solution looks worse than before :D

Another idea I had was if it is possible to add “blank list options” so I can have the same distance between the content and the “contact” button and the same distance between the “contact” button and the table border. Adding “&nbsp” does not work as wished, because it generates that text inside the box.

Any solution?

[ahmetsali]

@diananasif

you can try adding more list items with the content like “-“, i don’t have any other idea.

[bentham403]

If you have just one box, how do you center it? They always appear placed on the left side. Thanks

[ahmetsali]

@bentham403

don’t use any column shortcodes with pricing_table shortcode, and try this custom css code;

.pricing-table {
    max-width: 320px; margin-left: auto; margin-right: auto;
}

[bentham403]

thank you very much.