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.

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page