Make a WordPress Pricing Table with TablePress

hello builders here's what we'll be making in today's video it's a gorgeous pricing table built without fancy plugins or page builders and we're doing it with the free table press plugin and some custom css this design is adapted from this mock-up shown here which is what we'll be working from i'll also link the full css code from the video in the description below all right let's get started all right the first thing we need to do obviously if you don't have it already is to install table press so to do that we can go to plugins add new and just go over here and search for plugins and you would just click install and activate once you activate table press this table press icon will appear here in your wordpress dashboard and we can go to our existing tables uh you won't have any tables when you first install it but i've already created one and let's go to it and i can show you the structure here so i've added some basic structure here to the table we have the name of our plan the price i have link inserted in the bottom of the table and we have our sort of comparison features on the side and we can just preview it and this is what it looks like with no markup so first let me add the icons that we have in the table and you could add this a couple different ways you could use short codes from maybe shortcode's ultimate or if you font awesome on your website you can just put the icon class in here to add the icons i'm going to be using some icon images that i got from flat icon which i subscribe to and i'll put the link to that down in the video description so to do that i'm just going to click on the insert image button and click in the box where i want the image and we're going to put the check mark in there first and we'll just click insert table i'm going to duplicate this across all the other boxes that have a check mark but i just want to make a couple modifications quick so i actually want to resize this image to 32 pixels by 32 pixels and i'm going to add a class to the image and we'll call it pt icon just so that i can style it later if i want to and apply styles to all the images in the table and then we'll just copy and paste to all the rows that should have this and we can save and preview and this is how it looks on the front end and i'll just do the same thing with the x icon and i'll add the same class and copy and paste and there's our completed table now let me also show you how i add the links real quick that we're going to turn into buttons on the bottom eventually so here's one right here and to add a link in table press all you have to do is click insert link and then click in the cell where you want the link and i'm just going to use just the hashtag as the link you would put whatever target url you want in there and we're just using buy now as the link text and i'll say open a new tab and we'll just add the link and then you can copy and paste it across the other boxes and you could add a custom class to these links just like i did with the images if you want next make sure you've checked the options to make the first row the table header and the last row of the table footer and before we head to the front end the last thing i've done here is i've added a css class to this table which is pricing table and adding a class will allow you to style your table separately from the other table press tables on your site and i've also disabled the data tables add-on because we don't need sorting or filtering or anything like that in our pricing table and we'll save changes and go to the front end next up you need to grab this short code here for your table and we're going to insert it into a post so i'll go i'll post and i've already created a post called pricing table and if we edit it you can see that the only thing that's here is just a short code that has the short code that we just copied i can just paste it again and this works whether you're in the classic editor or using the gutenberg editor just to add the short code to your text and we'll click update and now we'll go to the front end of the site and now on the front end of the site we can see our price table right here all right so now we're gonna start styling the table and you can put the code a couple different places the best place to put your code for table press is actually in table press options and they have custom css right here the advantage of this is that it only loads this css when a table press table isn't inserted into a post so this will save you some site overhead by preventing it from being loaded in your style sheet on every page but we're going to build it on the front end and i'm going to be using you can either use the wordpress customizer additional css or i'm going to be using custom css pro plugin to write my css and then you can copy and paste it into the table press plugin options afterwards and the reason to do it this way is because i want to see my table as i'm adding the css code so let's go into our post here and we can start writing our code so first up let's look at the custom class names that taylorpress gives us to help us style our table relatively easily and we can go in any web browser pretty much you can right click and click inspect and it will bring up your browser's inspector tool i'm using chrome right now and here's the markup for the table and you can see that it gives us an id table press one it gives a class this is applied to all table press tables it's a table press class and we also have that the custom class that we added in the settings pricing table so that's how we're going to target all our styles to this specific table so anytime you want to make a pricing table you would just add the pricing table class and all these styles will be applied and then if you scroll down you also get the table head class for the table heading and you have individual column classes for each of the column numbers and this is the same for the table body so we have table rows and then columns within the row and so that's how we're going to target specific styles to specific rows and columns so let's just start with the header row and we're going to try to get the font looking like we want to to match the table that we're basing this off of so here's the way we're going to write our styles and pretty much every rule is going to start with this can be class table press which is also class pricing table and we're going to target at the table header and we're going to be targeting the t head element or the th element and our first row will be font size and we'll call it 25 pixels and then the text is uppercase so we can just make it text transform uppercase and we'll change the color to white to match the table then right off the bat we can do that border radius effect that you have on the table so we can just add border radius and we'll try 10 pixels 10 pixels so that's for the top left top right and then 0 0 for bottom right bottom left and i think that looks okay all right next up let's uh do the heading colors to match the table that we're basing this off of and we're going to use the column classes that are provided by table press to do this so let's grab this sort of wrapper class again to target our rule we're going to target these header elements one by one so first we're going to do the header elements that is column two which will be right here here's our rule background color and then now we can basically just duplicate this rule and we're just going to change the column number and the background color so we'll do that and then now we can change the column number in each so column three column four and let's grab the new color for each and of course you can use your own colors i'm just using this based off of the table now you may notice this also changes the background color for the footer tape of the table and i did elect to make this a footer that's an option in table press as well to choose whether to make the last row of the table the table footer and the reason i did that is because we're going to put a button here and you don't know you know perhaps you're going to make multiple pricing tables on your site and it's not always going to be the same number of rows so this way no matter how many rows you have the last row we can make at the button and i'll show you how to override these styles a bit later but the footer element also has th's in it so it's the t footer with th elements inside of it and we're going to overwrite those styles a bit later but we'll leave that for now all right next up let's do the styles for our second row here so we can grab our wrapper class again and we're going to be targeting row 2 which is this row right here and first let's do the font so font size 22 pixels color white and it's going to disappear against the white background and we can do font weight 700 and that will make it a little bit bolder to better match our table header here and now we can add the background colors to make them stick out so let's grab this wrapper class again and we can do row 2 and now we'll start with the columns so we're going to start with column 2 and if i grab the background color from the table here we go like before we can just duplicate this rule change the column numbers and then now we'll adjust the background color for each all right so it's starting to take shape here all right next up let's make the overall shape of the table look a bit more like the one that we're basing this off of so we need to hide these two table cells over here and i'd like to center all the content in the table so let's grab our wrapper class again and if you haven't already guessed we're targeting row one column one and row two column one so row one column one and we'll put a comma because we want we want this rule to apply to two different selectors and we'll add the same wrapper class row two column one and we can write our rule now and the rule is simply visibility hidden and there you go those disappeared now you might be tempted to use something like display none but as you can see this shifts over all these table cells as if that road didn't exist so visibility hidden works much better and next up let's center all the content in the table so paste our wrapper class again and we're going to target all tds all table cells and paste that wrapper class again and ths and you know the comma between so that we're targeting two different selectors and our rule is simply text align center and that should move everything into the middle and look very nice all right next up let's style the buttons in the bottom and you'll notice again that it's borrowing the background color from our table header because this is also a table header or th element in the table footer and we could just style our links and make them white and you can just sort of leave this how it is if you like the way this looks so to write our rule we will once again grab our wrapper class t foot and a to target any link that's in there and since we only have one type of link in the footer we don't have to put any any other markup like a class or anything and we're just going to say color white text transform uppercase and that font size looks okay for now we might tweak it later so right now this looks perfectly fine and you could make that the the base of your table the buttons on the bottom of your table if you want it and we could do something like display block to make it take up the full width of the table and now this entire table cell is clickable like a button and i changed my mind i think we are going to get rid of this um table cell here because it's sort of distracting me so so we will just add it to our other visibility hidden rule so we'll put our wrapper class once again and don't want to make the whole pricing table disappear but we want the t foot column one of the t of the table footer disappear all right so that's looking better now what if we want to make this look more like the pricing table so the first thing we need to do is override these background styles and turn them back to white and we could either do that by making sure the styles don't apply to this in the first place or by uh overwriting the existing styles so the easiest thing to do is just to overwrite them and we're just going to make the background color white and we're target the table footer and we're targeting specifically the table th elements inside the table footer and we're going to say background color white and because the previous rule has more specificity we also need to add important and now you can see our button has disappeared and that's only because the text color on our link is white so now we need to give it a background so let's grab our wrapper clasp again and we'll start styling our buttons so first let's just make them all reappear so we can see them and work on them and you'll notice that the button color actually more closely matches the second row color rather than the first row color so let me grab this color and we'll just temporarily make this the background color for all our buttons so we can say background color okay and now our buttons have appeared and they're block elements they're they're stretching the full width of the column in our demo version they don't actually go the full width so we're going to have to set a max width and let's try 150 pixels and see how that looks maybe 160 and we can add some padding at the top and size just to make sure that they don't get too narrow and they're not too skinny on top so we can add maybe three pixels of padding on top and we'll put 10 pixels on the side just in case but the width the mid width is enough that the padding actually isn't being added on and we can add a border radius and we'll do 100 not 100 but 100 pixels just to make sure it's fully circular or completely round and the last thing we want to do so you can see it's not being centered like the rest of the table and that's because it's a block element and so the text align property that is centering everything else in the table won't apply to the this block element there's a couple ways we could fix this we could set an auto margin so we'll say top margin is zero and left and right margin is auto and that will center it in our table cell there and i'll just copy that for a second and the other option you could do is you could make it an inline block and then you would have to add maybe some more padding to round it out a little bit but i like the way we had it before so i'm just going to change it back and we'll leave that rule just like that and save changes now of course we need to get the separate colors for each column so i'll inspect and grab this color right here and we just need a new rule so let me paste that color for a sec and we're gonna grab our wrapper so we're gonna target this at table footer and we want column three a element and now we just want to make it backgrounds color and i'll grab this color that i was saving here and we can duplicate this whole rule change it to column four and inspect and grab this background color and paste it and a couple more things i'd like to do here um i want to sort of separate the section off here with the feature labels and column one and we'll just give it a background color of a light gray and you sort of have these buttons floating out here it is a little bit tricky to do the box shadow like we have in this image that we're copying because if you try to put it on the entire table it'll just be a rectangle around the outside and we could apply the box shadow sort of individually to each little cell but that's a bunch of rules so let's try just putting a border on here and see how it looks along the bottom here and i think probably between the cells to create some separation between these planes so we'll grab our wrapper class again and we'll target all tds and also oh there should be a comma additionally the table footer but not the table header th element and we're just gonna make it order one pixel solid ddd just like the rest of the table i think that looks pretty good and uh just to be nitpicky you'll see that our texts and images aren't quite centered in our table cells so we can fix that wrapper element td and we'll say vertical align middle and you'll notice it shifted the text but it didn't shift the image so we actually have to target the images separately so we'll say uh that's why i added that class to my images previously so we can target them easily and the class if i recall was pt icon and that shifted them down and we'll save changes next up i'm going to show you one easy tweak to make this look more like a traditional pricing table but first some personal news i'm launching a free newsletter with tips tricks discounts tutorials to help you build and monetize better more beautiful websites faster if you'd like to sign up go to buildthatwebsite.commail or click the link in the video description all right and if you want to build pricing tables that have the sort of standard pricing table you're used to where there's a bit of separation between these uh each product section and usually you don't have this feature box on the left but more of like a sort of buy now pricing plans table we can make this one little tweak so up first i'll make that column on the left disappear and the rule you want is we're going to write we're going to use our wrapper class again and we're going to change the border collapse property so right now all the borders collapse into one and we actually want separate borders and then for the border spacing we're gonna make it 10 pixels in zero so that's 10 pixels in the x direction and zero in the y direction and you can make it wider if you want more separation between your table elements and then you would just want to fix our borders for example we would probably change this rule but you get the idea this is sort of looking more like that traditional pricing table layout if you enjoyed this tutorial please hit that like button and make sure to subscribe you don't want to miss what's coming next and to keep on building check out these videos right here

Channel: Build That Website

Views: 3,796

Keywords: tablepress price table, tablepress css, tablepress, tablepress tutorial, wordpress price table, css pricing table, responsive table, wordpress pricing table, wordpress pricing table plugin, free pricing table tutorial, css price table tutorial

Id: jNTJTBRrJIk

Length: 20min 20sec (1220 seconds)

Published: Thu Feb 11 2021