The “Product Card“ widget by Unlimited Elements for Elementor is designed to showcase products with an appealing and interactive format. This free 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 Free Product Card 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 in Elementor Product Card
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 in Elementor Product Card
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 in Elementor Product Card
Full
Choose icon for full rating.
Half
Choose icon for half rating.
Empty
Choose icon for empty rating.
Elementor Product Card 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 in Elementor Product Card
Set the card background, radius, border and shadow.
Header Styling in Elementor Product Card
You can set the header alignment, padding, background, and border.
Content Styling in Elementor Product Card
Set the content alignment and padding.
Footer Styling in Elementor Product Card
You can set the footer alignment, background, padding, and border.
Image Styling in Elementor Product Card
Here, you can set the image width, height, radius, margin, border, alignment and padding.
Title Styling in Elementor Product Card
Set the title color, typography, shadow and spacing.
Price Styling in Elementor Product Card
You can style the price color, typography, text shadow, margin, padding, background, border, radius, shadow, positioning and alignment.
Text Styling in Elementor Product Card
Here, you can set the text color, typography, shadow and spacing.
Button Styling in Elementor Product Card
Set the button padding, background color, text color, spacing, border and radius.
Badge Styling in Elementor Product Card
Style the badge background, color, typography, and placement.
Rating Styling in Elementor Product Card
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.
Free Elementor Product card for Furniture Items.
Free Elementor Product card for Cosmetic Items.
Thank you for using the Product Card Widget for Elementor! With its sleek design and customizable features, this is the best Product Card Widget for Elementor, perfect for showcasing individual products in an engaging and stylish way. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
