Cross Domain & Live Template Copy Addon for Site
2000+ ready blocks, header-footer, pages, & templates
Add awesome floating animation to any elements
Customize tooltip with images, gifs, & backgrounds
Make every widgets & content equal of heights
Select content audience from roles and browsers
Add dynamic links to any thing on your website
Add background overlay color to widgets & sections
Display lots of party popper particles in any section
One-click to duplicate whole page, post & template
Snappy particle animations for your live website
Customize widget dimension beyond normal scale
Embed content, site, media within your website
Customizable cursor button for professional web design
Dynamic grids for easy web design maneuvers
Fully custom grid and carousel for posts (single)
Discrete navigation controls for carousel widgets
Highlight text or heading with marker notations
Turn section backgrounds into interactive galleries
Dynamic horizontal scrolling slider widget in action
Crafted page templates to help you get started with your landing page just by dropping a starter design
Ready Blocks comes with a variety of layouts and design elements, such as headers, footers, and widgets etc.
Pre-designed headers with lucrative styles that are suitable for various niche websites and design tastes
A helpful collection of footer designs to help you create an instant attractive footer on your landing page
Find us 24/7 at your service. We are glad to help.
Detailed guidelines available for every features at BdThemes
Learn something new, stay informed about WordPress, Web Design and more
Here are some of the key milestones in my development:
Learn product usage, WordPress tips & tricks from our videos
Earn hefty commissions by joining us in the promotion
Widget Idea Share is a great way to find similar widgets that you can improve.
Certainly! If you need to get in touch with us feel free to reach out
The zoloblocks plugin which lets you create stunning websites using the gutenberg site builder
Most superior Slider in the Era of Elementor Slider
The only Compatible blogging widgets in Elementor for any Blog
Create next gen e-commerce website for your business in WordPress
Organize your photos in a different angel every time with Elementor
Boost your website engagement and drive more sales with Spin Wheel WordPress plugin.
The AI Image Generator Plugin for WordPress is a powerful tool by ChatGPT
Get 360° Augmented Reality for WooCommerce today!
Copy & Paste any web design you like just with 2 clicks!
A fully functioning theme for elementor with unlimited options
Showcase customer feedback and reviews to build trust and credibility.
Get amazing Flyers, visiting card, Logo template from here
Price Box is a very useful tool if you are running a website to sell any products. Normally, most eCommerce websites use it to sell packages, products, courses, daily necessaries, etc. People often address it as Price Table in the tech industry. Furthermore, well-structured price tables make price comparison easier for the users and make it easy to decide what to purchase.
In fact, if you can present offers and prices to your customers with a decent price box design, they most likely are willing to pay. With Elementor, you can in fact create neat and stunning pricing tables. As for the widget Price Table, Element Pack has developed it. This widget has awesome features that you can use to create an effective price box easily.
In this blog, we will show you a step-by-step process of creating a price box using Elementor and Element Pack Addon’s Price Table Widget.
First thing’s first. Though, it’s not worth mentioning, for beginners it may be helpful. Drag and drop the Price Table widget (Element Pack logo attached) into your webpage.
If you don’t have the Element Pack plugin installed, no problem. In that case, you can use Elementors’ price table widget instead. Note that, both of them are available on pro versions.
We must mention one thing, the company Element Pack always puts tonnes of customizing options in each of their widgets. As a result, you have a big menu bar for customizing your price box. The Price Table widget will help you to create unique and stylish designs easily.
Let’s move into the main course!
Once you drop the widget, it will pop up Content Tab. This tab holds the base settings for customizing the contents of the box. As you can see, the first section of Layout has two options; Skin & Layout. Both are set to Default. Keep an eye on the section list of this tab.
In case you choose a different Skin (Partait), the appearance of your price box will also change. Now notice that there is a section ‘Image‘ is missing on the section list. Also, you can see no Layout option under Skin. However, the reason is, when you change the Skin option, it will automatically show/hide options related to that layout.
Once again, back to the default settings. The Layout option under Skin also has its uses. After all, you can choose from a number of layout styles from here. Each layout style is different and has different sets of options.
After choosing a layout, what we need to do now is add our details. In fact, you can add any image to your price box if you want. Adding service/product-related images will bring more attention to it. In fact, adding images increase the charm of that product.
But, if the landing page already shows all the information about that service, you may not need any image. However, I will show you how to add images anyway.
Go to Content Tab> Image section
Let’s be precise. To add an image to your price box is not a difficult matter. But what’s difficult, is choosing the right image. Just go to the Image section from the widget customizing panel and choose your image.
After choosing an image, you can also customize a few things about it. From the Style Tab, go to Image. Here, you can find some options like Background color, Size, Opacity, Hover Animation, etc.
For the most part, the image size, background color, and opacity options are enough. But, as you can see, Element Pack given out more options like Border, Border Radius, and Box shadow along with other options. However, try for yourself! I guaranty that you will make a great design.
Now, let’s move on to the details.
A title holds great importance for your content. Therefore, you must put something that grabs the attention of the visitors. For a price box, you need to put direct titles such as product names or service plans’ names. As for its customization, go to Style Tab> Header. There, you can change the color and typography of the title and sub-heading.
Next, let’s talk about the price tag. The Price Table widget has an interesting setting for this part.
Like all the price labels on the market, you can change the pricing from the Pricing section. The fun part is, you can choose any currency label from the Currency Symbol option.
Again, if you click on the Switcher Sale, it will bring up another price field Original Price. Here, you can put the original price of your product with a crossed-out style. Generally speaking, you can use this to show discounted products or offers.
And Lastly, you can customize your price tag from the Style tab> Pricing. As shown above, try to leave the background color separate from the rest. Doing this will highlight the price tag to the viewers.
Go to Content Tab> Features
For starters, the features section holds the key to understand what things your offer includes. Though it’s not a briefly detailed part, it gives a quick view of the contents. Hence, for this part, use direct words and be specific.
Let’s talk about customization. As you can see, this section has a bunch of repeaters. You can add more or remove them also. Each repeater has two option sets, one as Normal Text, the other as Tooltip Text. For the normal text, you have options to choose a logo, logo color, and title. In most cases, you can ignore the tooltip option.
Now, let’s change the outlook of this part. In this case, go to Style Tab> Features. There, you will find the options shown above. We are, in fact, maintaining a single color for the whole price box. Again, the price tag is the only part highlighted.
However, you can change the color, typography, borderline width and weight, and gap from this part. Moreover, there is an option to change the alignment of the texts. But, you may want to keep it in the middle of this style.
We are very close to the finishing part. Regardless of what type your price box is, you need to add the footer. Let’s see how to make one.
The Content Tab of the Price Table widget has a section named Footer. Basically, the footer area has a call-out button and an additional text box. From the settings, you can see two switchers named Easy Digital Downloads Integration and Add Custom Attributes. You can use the first one to link EDD to your button. As for the second one, you can learn about it here.
However, you can change the look of the footer from the Footer section in the Style Tab. In fact, you can make the button round using the Border Radius option. You can change the background and foreground color of the footer here. Also, you can add a hover effect and a box shadow to the button.
People often use Ribbon on their price box to show features or new offers. It is nothing but a mark that highlights a specific product. Let us show you how you can use it.
On the Content Tab, the last section is Ribbon. There is a switcher at the top of the section. You need to turn it on to make the ribbon appear. However, you can edit the title, change the position of it from Alignment & Horizontal/Verticle Position. Also, you can rotate the ribbon as you like.
Now, to change the outlook of the ribbon, go to Style Tab> Ribbon. Surely as the image above, you can easily design this by changing its color, border-radius, typography, and box shadow.
Congratulations and thanks for keeping patients up to this moment. Look at the stunning price boxes you made with us. With the example above, you can easily create such boxes for your eCommerce websites.
One more thing, you can also add your custom backgrounds to these price boxes. It’s easy to create. It’s attractive. Also, it’s fun. Thanks for reading this blog. Have a great day!
Change your mind? No problem. We offer a no-hassle, 14-days money back guarantee.
Largest Elementor Templates pack with the most user-friendly UI and 300+ useful Elementor widgets. Build websites from zero to 100% perfection in no time.
This website is powered by Element Pack Pro and Rooten Theme.
Copyright © 2025 BdThemes. All Rights Reserved.