The Product Card widget by Unlimited Elements for Elementor is designed to showcase products with an appealing and interactive format. This widget offers customization for images, descriptions, pricing, and call-to-action buttons, making it ideal for e-commerce and product-focused websites. With flexibility in design and functionality, it enhances user engagement and streamlines the shopping experience.
Let’s look at each of the options in the Product Card widget for Elementor below.
Add a Product Card Widget to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Product Card”
- Hover over the widget in the search results and click install
- Add your “Product Card” widget to any Elementor Page
General Settings
Image
Choose an image to display.
Image Size
Select the image size.
- Full
- Large
- Medium Large
- Medium
- Thumbnail
- 1536x1536
- 2048x2048
Title
Type text for the title.
Price
Type the price of product.
Text
Type text to show in product card.
Button Link
Type or paste URL to link with button.
Button Text
Type text to show in button.
Show Rating
Show or hide the rating.
Rating
Select the rating of product.
Badge
Type text to show as badge on product card.
Layout Settings
Image Placement
Set the image placement.
- Hide
- Header
- Content
- Footer
Title Placement
Set the title placement.
- Hide
- Header
- Content
- Footer
Price Placement
Set the price placement.
- Hide
- Header
- Content
- Footer
Text Placement
Set the text placement.
- Hide
- Header
- Content
- Footer
Button Placement
Set the button placement.
- Hide
- Header
- Content
- Footer
Show Header
Show or hide the header.
Show Footer
Show or hide the footer.
Rating Icons Settings
Full
Choose icon for full rating.
Half
Choose icon for half rating.
Empty
Choose icon for empty rating.
Product Card Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Card Styling
Set the card background, radius, border and shadow.
Header Styling
You can set the header alignment, padding, background, and border.
Content Styling
Set the content alignment and padding.
Footer Styling
You can set the footer alignment, background, padding, and border.
Image Styling
Here, you can set the image width, height, radius, margin, border, alignment and padding.
Title Styling
Set the title color, typography, shadow and spacing.
Price Styling
You can style the price color, typography, text shadow, margin, padding, background, border, radius, shadow, positioning and alignment.
Text Styling
Here, you can set the text color, typography, shadow and spacing.
Button Styling
Set the button padding, background color, text color, spacing, border and radius.
Badge Styling
Style the badge background, color, typography, and placement.
Rating Styling
Here, you can set the rating color, size, spacing, margin, alignment, and padding.
Product Card Design Examples For Elementor
Here are some live use cases for the Product Card Widget.
Product card for furniture products.
Product card for cosmentic items.
Thank you for using the Product Card Widget documentation. This guide aimed to help you maximize the widget’s features for an engaging product display on your website. With its versatile customization options, you can create professional, attractive product cards effortlessly.
If you need further assistance or have questions, feel free to reach out to our support team. We’re here to help you create a seamless and beautiful online experience for your users.
