1. Home
  2. Docs
  3. WooListing – WooCom...
  4. Detail Document
  5. WooListing Product Settings

WooListing Product Settings

You can set all the widget settings of the WooListing – WooCommerce Product Listing for Elementor.

Step 1. Go to Pages » Add Page » Edit with Elementor

Step 2. Search widget WooListing

Step 3. To Set the WooListing Product 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 WooListing Product.

 

Content Settings – WooListing Product 

1. Prouduct Layout

Product Layout settings for the WooListing Product.

  • Layouts: To select a Grid and Slider Layout of WooListing Product.
  • Layouts: To select a Layout of WooListing Product.
  • Grid Columns: To select column of WooListing Product.

2. Item

Item settings for the WooListing Product.

 

  1. Display No. of Product: You can select a number of Product to show.
  2. Show Image: You can show or hide an Image of Product.
  3. Show Title: You can To show or hide the Title of Product.
  4. Show Description:  You can hide, show short or full Description of Product.
  5. Show Regular Price:  Here, you can show or hide the Regular Price of Product.
  6. Show Sale Price:  Here, you can show or hide the Sale Price of Product.
  7. Show Customer Rating: You can show or hide the customer rating of Product.
  8. Show Sale Label: You can show or hide the Sale label of Product.
  9. Sale label Text: You can write the Any sale name.
  10. Show Out of stock product : You can show or hide the Out of stock of Product.
  11. Show Out of stock Label: You can show or hide the Out of stock label of Product.
  12. Out of stock label Text: You can write the Any Out of stock name.
  13. Show Button: You can show or hide button.
  14. Show Custom Button: You can show or hide custom button text for different product.
  15. Simple Product Text: You can set the text of Simple Product Button.
  16. Grouped Product Text:  Here, you can set the text of Grouped Product Button.
  17. External/Affiliate Button Text: You can set the text of External/Affiliate Product Button.
  18. Variable Product Text:  Here, you can set the text of Variable Product Button. 

3. Products Query

 

  1. Product Source: You can select product source like Best Selling, Top Rated, Manual selection, Sale and Recent product .
  2. Product Categories: You can search product categories.
  3. Exclude Above Categories:  Here, you can exclude or include product by selected categories.
  4. Product Tags: You can search product tags.
  5. Exclude Above Tags:  Here, you can exclude or include product by selected tags.
  6. Order By: You can select product by Date, Name, Random and ID.
  7. Sort By: You can select product by DECS/ASC.
  • Product Source

 

  1. Recent Products:  You can show Recent Product from Product Source.
  2. Featured Products: You can show Featured or Favorite Product from Product Source.
  3. Best Selling Products:  You can show Best Selling Product from Product Source.
  4. Sale Products: You can show Sale Product from Product Source.
  5. Top Rated Products: You can show Top Rated Product from Product Source.
  6. Manual selection Products: You can show Manual selection Product from Product Source.
  • Manual selection

  • Search Manual selection: You can search the manual selection product from Manual Selection.

4. Grid Configuration

Grid Configuration settings for the WooListing Product.

Then

  • Grid Column Gap: To Set the Column Gap between Category in Grid Layout.
  • Grid Row Gap: To Set the Row Gap between Category in Grid Layout

5. Slider Configuration

General settings for the WooListing Product.

Then

  • Show Dots: To show or hide the Pagination in Slider Layout.
  • 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.
  • Slides To Show: To select a slides in Slider Layout.
  • 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.
  • Column Gap: To Set the Column Gap between Category in Slider Layout.

Style Settings

The content settings are divided into various sections.

1. Item

  1. Item Background Color: Here, you can set the background color of item.
  2. Border Type:  You can set the border for item.
  3. Box Shadow:  You can set the box shadow for item.
  4. Item Border Radius:  You can set the border radius for item.
  5. Content Padding:  You can set the padding for item content.

2.Image

  1. Alignment: You can set the alignment Right, Center and Left.
  2. Image Border Radius: Here, you can set border radius for image.
  3. Border Type: You can select border type for image.
  4. Padding: You can set the around Image.
  5. Image Width: You can set the Width of the image.
  6. Image Height: You can set the Height of the image.

3. Title

  1. Alignment: You can set the alignment Right, Center and Left for your title.
  2. Typography: Here, you can set typography for your title.
  3. Title Color: You can set the title color here.
  4. Title Spacing:  You can set spacing for your title.

4. Description

  1. Typography: Here, you can set typography for your Description.
  2. Description Color: You can set the Description text color here.
  3. Description Spacing:  You can set spacing for your Description.

5. Price

  1. Regular Price Typography: You can set typography for your Regular price.
  2. Regular Price Color:  You can set the Regular Price color here.
  3. Show Line Through: You can show or hide Line Through.
  4. Price Line Through: You can set line through Regular price.
  5. Price Line Through Width:  You can set the width of line through for Regular price.
  6. Sale Price Typography: You can set typography for your Sale price.
  7. Sale Price Color:  You can set the Sale Price color here.
  8. Price Spacing: You can set spacing between sale price and regular price.

6. Button

  1. Typography: You can set typography for button text.
  2. Button Spacing:  You can set spacing for your product Button.
  3. Toggle button:  You can select normal or hover by toggle button.
  4. Text Color:  You can set the text color for button here.
  5. Button Background Color:  You can set the background color for button.
  6. Border Type: Here, you can select border type for button.
  7. Border Radius:  Here, you can set border radius for button.
  8. Button Padding:  You can add padding for button .

7. Rating

  1. Rating Spacing: You can set spacing for Rating.
  2. Rating Size: Here, you can set size of rating.
  3. Rating Fill Color: You can set color of fill rating.
  4. Rating Color: You can set color of rating.

8. Sale Label

  1. Label Typography: You can set typography for  label text.
  2. Label Color: You can set the label color.
  3. Label Background Color:  You can choose an label background color.
  4. Border Type: You can select the label border type.
  5. Label Border Radius: Here, you can set the border radius for label.
  6. Label Padding: You can add padding for label .

9. Out of stock Label

  1. Label Typography: You can set typography for label text.
  2. Label Color: You can set the label color.
  3. Label Background Color:  You can choose an label background color.
  4. Border Type: You can select the label border type.
  5. Label Border Radius: Here, you can set the border radius for label.
  6. Label Padding: You can add padding for label .

10. Pagination

To set the Pagination settings for WooListing Product.

  • Pagination Color: To select the Pagination Color using the color picker.
  • Active Pagination Color: To select the Active Pagination Color using the color picker.
  • Pagination Size: To set the size of Pagination.
  • Active Pagination Size: To set the size of Active Pagination.

11. Arrows

To set the Arrows settings for WooListing 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.
  • Border Type: To set the Border Types like Solid, Double, Dotted, Dashed, Groove.
  • Arrow Border Radius: To set the Border Radius for Arrows.
  • Arrow Padding: To set the Border Padding for Arrows.

 

 

 

 

How can we help?