In this documentation, we will show you how to customize the Price List widget presented by Element Pack Pro.
Inserting The Price List Widget
Open your page in the Elementor editor, search by the widget name, and then drag and drop it on the page.
Note: You need both Elementor and Element Pack Pro installed to use this widget.
Work With The Content Tab
List Section
Go to Content > List
Step-1
Come to the List section, you can add Price List widget items (with the Add Item button).
Step-2
Click on Each widget item, you will find the Price, Old Price, Title, Text, Badge, Image, and Link options.
Additional Section
Go to Content > Additional
Step-1
Come to the Additional section, you will find the Image Size, Image Hide On (Mobile, Tablet, and Desktop), Vertical Align (Top, Middle, and Bottom), Columns, and Row Gap options.
Step-2
Here also find the Item Counter, Add to Cart, Cart Icon, Cart Space, Old Price, Old Price Space, Badge, and Badge Offset options.
Work with The Style Tab
Items Section
Go to Style > Items
Step-1
Come to the Items section, you will find two tabs section; Normal, and Hover.
In the Normal tab mode, you will find the Background Type (Classic, and Gradient), Background Color, Image, Border Type, Border Radius, Padding, and Box Shadow options.
Step-2
In the Hover tab mode, you will find the Background Type (Classic, and Gradient), Background Color, Image, Border Color, and Box Shadow options.
Title Section
Go to Style > Title
Here find the Title Color, Hover Color, Margin, Typography, and Text Stroke options.
Price Section
Go to Style > Price
Step-1
Come to the Price section, you will find two tabs section; Normal, and Hover.
In the Normal tab mode, you will find the Price Color, Background Color, Border Type, Border Radius, Width, Height, Box Shadow, and Typography options.
Step-2
In the Hover tab mode, you will find the Price Color, Background Color, and Box Shadow options.
Old Price Section
Go to Style > Old Price
Step-1
Come to the old Price section, you will find two tabs section; Normal, and Hover.
In the Normal tab mode, you will find the Price Color, Background Color, Border Type, Border Radius, Padding, Box Shadow, and Typography options.
Step-2
In the Hover tab mode, you will find the Price Color, Background Color, and Box Shadow options.
Text Section
Go to Style > Text
Here find the Text Color, Hover Color, and Typography options.
Separator Section
Go to Style > Separator
Here find the Separator Style (Solid, Dotted, Dashed, Double, None), Width, Spacing, Color, and Hover Color options.
Image Section
Go to Style > Image
Step-1
Come to the Image section, you will find two tabs section; Normal, and Hover.
In the Normal tab mode, you will find the Border Type, Border Width, Border Color, Border Radius, Padding, Size, Spacing, and Box Shadow options.
Step-2
In the Hover tab mode, you will find the Border Color, and Box Shadow options.
Counter Section
Go to Style > Counter
Step-1
Here you will find two tabs section; Normal, and Hover.
In the Normal tab mode, you will find the Counter Color, Background Type ( Classic, and Gradient), Background Color, Image, Border Type, Border Width, Border Color, Border Radius, Padding, Spacing, Typography, and Box Shadow options.
Step-2
In the Hover tab mode, you will find the Counter Color, Background Type ( Classic, and Gradient), Background Color, and Box Shadow options.
Cart Icon Section
Go to Style > Cart Icon
Step-1
Here you will find two tabs section; Normal, and Hover.
In the Normal tab mode, you will find the Cart Icon Color, Background Type ( Classic, and Gradient), Background Color, Image, Border Type, Border Width, Border Color, Border Radius, Padding, Box Shadow, and Icon Size options.
Step-2
In the Hover tab mode, you will find the Cart Icon Color, Background Type ( Classic, and Gradient), Background Color, and Background Image options.
Badge Section
Go to Style > Badge
Here find the Badge Color, Hover Color, Background Color, Border Type, Border Color, Border Width, Border Radius, Padding, Box Shadow, and Typography options.
All done! You have successfully customized the Price List widget on your website.
Video Assist
You can also watch the tutorial video about the Price List widget. Please visit the demo page for examples.
Thanks for staying with us.
