You can set all the widget settings of the ProDesign – WooCommerce Product Designs
Step 1. Go to Pages » Add Page » Edit with Elementor
Step 2. Search widget ProDesign – WooCommerce Product Designs
Step 3. To Set the ProDesign – WooCommerce Product Designs widget on your page.
Step 4. Drag and Drop the widget on your page.
Step 5. Now, set all the settings as per your preferences.
Step 6. Click on the “Update” button at the bottom of the page and enjoy the ProDesign – WooCommerce Product Designs Widget.
Content Settings – ProDesign – WooCommerce Product Designs for Elementor
1. General Settings
- Design Type: To select a Type of Design ProDesign – WooCommerce Product.
- Design Style: To select the Layout of ProDesign – WooCommerce Product.
- Display No. of Product: To select a number of Product to show.
- Show Image: To show or hide an Image of Product.
- Image Resolution: To select a size of Product Image.
- Show Title: To show or hide the Title of Product.
- Title HTML Tag: To select a Title tag for Product .
- Show Category: To show or hide the Category of Product.
- Show Tag: To show or hide the Tag of Product.
- Tag Position: To select the position of Product Tag.
- Show Sale Price: To show or hide the Sale Price of Product.
- Show Regular Price: To show or hide the Regular Price of Product.
- Show Rating: To show or hide the rating of Product.
2. Query Settings
- Product Types: To select the Types of Product.
- Product Source: To select the Source of Product.
- Order By: To show product by Order.
- Sort By: To show product by Sort.
- Product Categories: To select Product by Categories.
- Exclude Above Categories: To Exclude or Include the Product by Categories.
- Product Tags: To select Product by Tags.
- Exclude Above Tags: To Exclude or Include the Product by Tags.
- Off Set: To select the Product by Off Set.
3. Grid Settings
- Grid Column Gap: To Set the Column Gap between Product in Grid Layout.
- Grid Row Gap: To Set the Row Gap between Product in Grid Layout.
4. Slider Configuration
- Slides To Show: To select a slides in Slider Layout.
- Slides To Scroll: To select number of slider Scroll.
- Show Arrows: To show or hide the Arrows in Slider Layout.
- Previous icon: To select an icon for Previous Arrow.
- Next icon: To select an icon for Next Arrow.
- Show Infinite: To select slides infinite in Slider Layout.
- Pause On Hover: To set an effect of pause on Slider Hover.
- Autoplay: To On or Off Autoplay Slider.
- Autoplay Speed: To set an Autoplay Speed of Slider.
5. Advanced
- Show Cart Button: To show or hide the Add to Cart Button of the Product.
- Show Custom Button: To show or hide the Custom Button Text of the Product.
- Simple Product Text: To set the text of the Simple Product Button.
- Grouped Product Text: To set the text of the Grouped Product Button.
- External/Affiliate Button Text: To set the text of the External/Affiliate Product Button.
- Variable Product Text: To set the text of the Variable Product Button.
- Sale Badge: To show or hide the Sale Badge.
- Sale Badge Text: To set the text of Sale Badge.
Style Settings – ProDesign – WooCommerce Product
1. Item
To set Item settings for ProDesign – WooCommerce Product
- Border Type: To set the border of Item.
- Button Toggle: To set the Button Toggle Normal or Hover.
- Content Background: To select the Background color for Item Content using the color picker.
- Item Border Radius: To set the Border Radius for Item.
- Content Padding: To set the Padding for Item Content.
- Content Alignment: To set an alignment of content.
2. Image
To set the Image settings for ProDesign – WooCommerce Product.
- Height: To set the height of Product image.
- Width: To set the width of Product image.
- Button Toggle: To set the Button Toggle Normal or Hover.
- CSS Filters: To select an effect for Product Image.
3.Title
To set the Title settings for ProDesign – WooCommerce Product Designs
- Spacing: To set the upper Spacing for Product Title.
- Title Typography: To set the Title Typography of Product.
- Title Color: To select the Title Color using the color picker.
- Title Hover Color: To select the Title Hover Color using the color picker.
4. Category
To set the Category settings for ProDesign – WooCommerce Product.
- Category Spacing: To set the upper Spacing for Product Category.
- Title Typography: To set the Category Typography of Product.
- Button Toggle: To set the Button Toggle Normal or Hover.
- Category Color: To select the Category Text Color using the color picker.
5. Tag
To set the Tag settings for ProDesign – WooCommerce Product.
- Tag Spacing: To set the upper Spacing for Product Tag.
- Title Typography: To set the Tag Typography of Product.
- Button Toggle: To set the Button Toggle Normal or Hover.
- Tag Color: To select the Tag Text Color using the color picker.
6. Prices
To set the Prices settings for ProDesign – WooCommerce Product.
- Price Spacing: To set the upper Spacing for Product Price.
- Space Between Price: To set the Space Between Price of Product.
- Regular Price Typography: To set the Regular Price Typography of Product.
- Regular Price Color: To select the Regular Price Text Color using the color picker.
- Sale Price Typography: To set the Sale Price Typography of Product.
- Sale Price Color: To select the Sale Price Text Color using the color picker.
8. Button
To set the Button settings for ProDesign – WooCommerce Product.
- Typography: To set the Button text Typography.
- Alignment: To set the alignment for button.
- Button Spacing: To set the upper Spacing for Button.
- Button Toggle To set the Button Toggle Normal or Hover.
- Text Color: To select the Text Color for Button using the color picker.
- Button Background Color: To select the Background Color for Button using the color picker.
- Border Type: To set the Border Types like Solid, Double, Dotted, Dashed, Groove.
- Border Radius: To set the Border Radius for Button.
- Button Padding: To set the Border Padding for Button.
8. Rating
To set the Rating settings for ProDesign – WooCommerce Product.
- Rating Size: To set the size of rating.
- Rating Spacing: To set the upper Spacing for Product Rating.
- Rating Color: To select the Rating Color using the color picker.
- Rating Fill Color: To select the Rating Fill Color using the color picker.
9. Sale Badge
To set the Sale Badge settings for ProDesign – WooCommerce Product.
- Sale Badge Typography: To set the Sale Badge text Typography.
- Sale Badge Color: To select the Text Color for Sale Badge using the color picker.
- Sale Badge Background Color: To select the Background Color for Sale Badge using the color picker.
- Padding: To set the Padding for Sale Badge.
10. Arrows
To set the Arrows settings for ProDesign – WooCommerce Product.
- Arrow Size: To set the size of Arrows.
- Arrow Color: To select the Arrow Color using the color picker.
- Arrow Background Color: To select the Arrow Background Color using the color picker.
- Arrow Border Radius: To set the Border Radius for Arrows.
- Arrow Padding: To set the Border Padding for Arrows.