Sold Out Overlay to Pricing Tables

So you’re wanting to add some flair to your Pricing Tables, you can easily do this for conference registrations fees or if you are temporarily sold out of a service by making a Sold Out Overlay. So let’s get started on how to add this to your tables.

Getting Started:

  1. The first thing you will need to do is create your tables, something like the picture below will be great.Divi Pricing Tables 1
  2.  Once you have made your table you will want to go into the Row Settings and then your Advance Tab and enter in your class for mine it was sold-out you can name your’s whatever you like.Divi Pricing Tables 2
  3.  Now you will want to add the following CSS code to your child theme stylesheet. If you are not sure you can google how to make a child theme for divi and the other tutorials should have you on your way.
    .sold-out {
        position: relative;
        /* Sets the sold-out class to the relative position */
    }
    
    .sold-out:before {
        position: absolute;
        /* Sets the position of the sold-out:before class */
        content: "";
        /* This is always needed do not remove this */
        width: 100%;
        /* Sets the width of the background color to 100% */
        height: 100%;
        /* Sets the height of the background color to 100% */
        top: 0 !important;
        /* Puts the background color to the top most area */
        left: 0 !important;
        /* Puts the background color to the left most area */
        background: url(Link to your image);
        /* Link to your image 200x150 */
        background-color: rgba(76, 92, 98, 0.9);
        /* Adds a background color with transparency so they can see what they missed */
        background-repeat: no-repeat;
        /* Makes the background image not repeat */
        background-position: center;
        /* Centers the image to the middle even when being resized */
        z-index: 15;
        /* Sets the z-index to display over the origional content in the price area */
    }
    
  4.  Once you have done that save/update or preview your page and you should now see the overlay effect for one of your pricing table columns!

I hope you enjoyed this tutorial and as I work on a few more sites and do some custom work I will try to post more of my favorite modifications to Divi here on my blog. Stay tuned for more.

Pin It on Pinterest