WooCommerce Archive Products

Set the style and layout of the WooCommerce Archive Products

Content

Content

1. Allow Order: Select Yes to give users the option to sort the products by Default, Popularity, Rating, Latest, Price: Low to High, or Price: High to Low
2. Show Result Count: Select Yes to show number of results for this archive, or No to hide it

Advanced

1. Nothing Found Message: Enter the text or use a Dynamic Tag for the message to be shown to users when there are no results to display

Style

Products

1. Columns Gap: Set the exact gap between the columns
2. Rows Gap: Set the exact gap between the rows
3. Alignment: Align the products data to the left, right, or center

Image

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Border Radius: Set the radius to control corner roundness of the border
3. Spacing: Adjust the amount of space between the images and their data

Title

1. Color: Choose the product Title color
2. Typography: Set the typography options for the Title text
3. Spacing: Adjust the amount of space after the Title

Rating

1. Star Color: Choose the color of a filled star
2. Empty Star Color: Choose the color of an empty star
3. Star Size: Set the size of stars
4. Spacing: Adjust the amount of space after the Rating Stars

Price

1. Color: Choose the color of the product Price
2. Typography: Set the typography options for the product Price

Regular price

1. Color: Choose the color of the product’s Regular Price
2. Typography: Set the typography options for the product’s Regular Price

Button

Normal | Hover

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

1. Text Color: Choose the color of the product’s Button Text
2. Background Color: Choose the background color of the product’s Button
3. Border Color: Choose the border color of the product’s Button

1. Typography: Set the typography options for the product’s Button Text
2. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
3. Width: Control the thickness of the border around the product’s Button
4. Border Radius: Control corner roundness of the button’s border
5. Text Padding: Set the padding within the button
6. Spacing: Adjust the amount of space above the buttons
7. Automatically Align Buttons: By toggling this on, the buttons will be aligned to the bottom of the wrapper. This allows for button alignment when product titles wrap to additional lines.

View Cart

1. Color: Choose the color of the View Cart text under the buttons
2. Typography: Set the typography options for the View Cart text

Box

1. Border Width: Control the thickness of the border around the product’s box
2. Border Radius: Control corner roundness of the products box
3. Padding: Change the padding within the products box

Normal | Hover

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

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

Pagination

1. Spacing: Set the amount of space above the pagination
2. Border: Show or Hide border around pagination
3. Border Color: Choose the color of the pagination border
4. Padding: Set the padding within the pagination

Normal | Hover | Active

The following options can be set independently for the normal, hover, and active states.

1. Typography: Set the typography options for the pagination text
2. Color: Choose the color of the pagination text
3. Background Color: Choose the background color for the pagination

Sale Flash

1. Sale Flash: Show or Hide
2. Text Color: Choose the color of the Sale Flash text
3. Background Color: Choose the background color of the Sale Flash
4. Typography: Set the typography options for the Sale Flash text
5. Border Radius: Control the corner roundness of the Sale Flash
6. Width: Control the thickness of the border for the Sale Flash
7. Height: Set the height of the Sale Flash
8. Position: Set the position of the Sale Flash, Left or Right, of the products box
9. Distance: Set the distance of the Sale Flash from the top of the products box

Nothing Found Message

1. Color: Choose the color of the Nothing Found Message text
2. Typography: Set the typography options for the message text

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.