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. Nothing Found Message: Enter 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. 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.

Still puzzling over something?