WooCommerce Products (Pro)

Display products on any page of your site, setting their content and style with the WooCommerce Products widget

Content

products

1. Columns: Sets the exact number of columns to display, from 1 to 12
2. Rows: Sets the maximum number of rows to display
3. Pagination: Select Yes to show the pagination or No to hide it
4. Allow order- Select Yes to give users the option to sort products by Default, Popularity, Rating, Latest, Price - Lowest to Highest or Price - Highest to Lowest
5. Show result count: Select Yes to show the number of results for this file or No to hide it

Consultation

Source: Select the source of results, choosing between Current query, Latest products, Offer, Featured or Manual selection. Depending on the source you have chosen for your query, you will be offered options that allow you to filter the results.

Include

1. Include by: Term, then use Find and Select to choose which ones to use
2. Sort by: Sets the order in which the products will be displayed. Options include: Title, Price, Popularity, Rating, Random, and Menu Order.
3. Order: DESC (descending) or ASC (ascending)

Note: Choose Related as Source and Category like Include by term will display posts related to the category assigned to the current post being displayed. So if the user is viewing a post in the Travel category, for example, the page will show Related Posts that are also in the Travel category. If the currently displayed post has multiple categories assigned to it, the related posts will pull posts from the FIRST category (alphabetically) assigned to the post.

Exclude

1. Exclude by: Current Post, Manual Selection, Term, then use Find and Select for Manual or Term options
2. Sort by: Sets the order in which posts will be displayed. Options include: Title, Price, Popularity, Rating, Random, and Menu Order.
3. Order: DESC (descending) or ASC (ascending)

Style

products

1. Column spacing: Sets the exact space between the columns
2. Row spacing: Sets the exact space between the rows
3. Alignment: Aligns product data to the left, right, or center

Image

1. Border type: Select the type of edge, choosing from none, solid, double, dotted, dashed or grooved
2. Edge radius: Sets the radius to control the roundness of the edge corners
3. Spacing: Adjusts the amount of space between images and their data

Title

1. Colour: Choose the color of the product title
2. Typography: Sets the typography options for the title text
3. Spacing: Adjusts the amount of space after the title

Classification

1. Star color: Choose the color of a full star
2. Empty star color: Choose the color of an empty star
3. Star size: Sets the size of the stars
4. Spacing: Adjusts the amount of space after the rating stars

Price

1. Colour: Choose the color of the product Price
2. Typography: Sets the typography options for the product price

Regular price

1. Colour: Choose the color of the usual price of the product
2. Typography: Sets the typography options for the regular price of the product

Button

Normal | Float up

The following options can be set independently for the normal and floating states.

1. Text color: Choose the color of the product button text
2. Background color: Choose the background color of the product button
3. Border color: Choose the border color of the product button

1. Typography: Sets the typography options for the product button text
2. Border type: Select the type of edge, choosing from none, solid, double, dotted, dashed or grooved
3. Edge radius: Controls the roundness of the button border corner
4. Text fill: Sets the padding inside the button
5. Spacing: Adjusts the amount of space above the buttons

See small car

1. Colour: Choose the color of the text See cart below the buttons
2. Typography: Sets the typography options for the text View cart

Box

1. Border width: Controls the thickness of the border around the product box
2. Edge radius: Check the roundness of the corners of the product box
3. Filling: Change the padding inside the product box

Normal | Float up

The following options can be set independently for the normal and floating states.

1. Shadow of the box: Adjust box shadow options
2. Background color: Choose the background color of the product box
3. Border color: Choose the border color of the product box

Flash sale

1. Flash sale: Show or Hide
2. Text color: Choose the color of the Flash sale text
3. Background color: Choose the background color of the Sales Flash
4. Typography: Sets the font options for the Flash Sale text
5. Edge radius: Controls the roundness of the Vending Flash corners
6. Width: Control the border thickness for the Sales Flash
7. Height: Sets the height of the Sales Flash
8. Position: Sets the position of the Sales Flash, left or right, of the product box
9. Distance: Sets the distance of the Sales Flash from the top of the product box

Note: The style of this widget is usually affected by the theme and plugins. If you experience any of these issues, try switching to a basic theme and disabling related plugins, or adjust the style within your theme settings.