Price List

The JupiterX Price List widget is ideal for creating visually appealing lists of products or services. It's particularly effective for crafting restaurant menus, but its flexibility extends to various applications like product catalogs or featured product lists. The widget simplifies the process of designing and displaying detailed lists, making it a valuable addition for any business looking to showcase its offerings in an organized and attractive manner​​.

View Live Demo

Content Tab

List

• List Items: Here, you will see default list items that you can customize. Each list item has options for Price, Title, Description, Image, and Link.

Editing a List Item

• Price: Click on the pencil icon next to the Price field to edit the price for the item. You can type in the new price directly.
• Title: Click on the pencil icon next to the Title field to edit the title of the item.
• Description: Click on the pencil icon next to the Description field to edit the description of the item. You can use plain text or HTML to format your content.
• Image: Click on the image icon to add or change an image for the item. This will open the WordPress Media Library where you can select an existing image or upload a new one.
• Link: Click on the 'Link' field if you want to make the list item clickable, leading to a different page or a website. You can either enter a URL directly or use dynamic tags.

Adding a New List Item

• Click the “+ Add Item” button to create a new list item. A new set of fields will appear where you can enter the Price, Title, Description, add an Image, and set a Link as described above.

Reordering List Items

• To change the order of the items, click and drag the six-dot icon next to the list item you want to move.

Deleting a List Item

• To delete a list item, click on the “X” icon next to the item you wish to remove.

Additional Options

• Collapse Items: If your list is long, you may want to keep it manageable by collapsing list items. This can be done by clicking on the arrow next to each list item.
• Copying Items: To copy an existing item's settings, click on the two-paper icon next to the “X” on the item you wish to duplicate.

Style Tab

List

• Title
  • Color: Click on the color palette icon to change the color of the title text.
  • Typography: Click on the pencil icon to set the font, size, weight, transform, style, decoration, line-height, and letter spacing for the title text.
  • Text Stroke: Click on the pencil icon to apply a stroke effect to the title text, allowing you to adjust the width and color of the stroke.
• Price
  • Color: Click on the color palette icon to change the color of the price text.
  • Typography: Click on the pencil icon to customize the font settings for the price text similar to the title.
• Description
  • Color: Click on the color palette icon to change the color of the description text.
  • Typography: Click on the pencil icon to adjust the typography settings for the description text.
• Separator
  • Style: Choose the style of the separator from the dropdown menu (e.g., solid, dashed, dotted).
  • Weight: Adjust the thickness of the separator line by sliding the scale or entering a number in the box.
  • Color: Click on the color palette icon to select a color for the separator.
  • Spacing: Adjust the space above and below the separator by sliding the scale or entering a number in the box.

Image

• Image Resolution: Choose the resolution for the images from the dropdown menu.
• Border Radius: Adjust the roundness of the image corners by entering values for top, right, bottom, and left, or link them together and set one value for all.
• Spacing: Adjust the space between the image and the text by sliding the scale or entering a number in the box.

Item

• Rows Gap: Adjust the space between each item in the list by sliding the scale or entering a number in the box.
• Vertical Align: Select the vertical alignment for the items by clicking the top, center, or bottom align icons.