WP Woocommerce Products

September 21, 2021

WP Woocommerce Products Settings

Under this tab the options are as follows:

  1. Admin label: this helps you identify better than you did with this element. This will guide you while doing further customization. You should name the admin label by keeping the relevance to the purpose of the element you have added. This will surely save you from a lot of hassles.
  2. Widget: Select a widget that is available in the drop-down list.
  3. Widget title HTML element: Select a HTML element for widget title.
  4. Number of products to show: Set the number of woocommerce products that you want to show.
  5. Show: There are 3 available options: All Products, Onsale Products, and Featured Products. Choose a product option to show from the list.
  6. Order by: Choose one of order type that products will be sorted by (Date, Randon, Price or Sales)
  7. Order: Select the ordering of how woocommerce products will be ordered. The result will be displayed in ascending or descending order.
  8. Hide free products: If you created free products with woocommerce, but do not want them to be visible in front-end. Just enable this option.
  9. Show hidden products: Enable this option if you want to show hidden products.
  10. Text align: This feature allows you to set the horizontal alignment of a text. A text can be left or right-aligned, or centered.
  11. Custom class: Write the class name used for writing custom CSS or JS.
  12. Custom ID: Give a custom ID to override the auto-generated ID.

Design Settings

Under this tab the options are as follows:

  1. Background: Select a color or tick on the box "transparent" if you don't want a background color.
    - Background repeat: sets if/how a background image will be repeated.
    - Background size: specifies the size of the background images.
    - Background attachment: sets whether a background image scrolls with the rest of the page or is fixed.
    - Background position: sets the starting position of a background image.
  2. Upload an image if you're interested in decorating the background with an image.
  3. Border: set the thickness of the element border by entering numbers in boxes top, right, bottom, and left.
    There are many border styles including solid, dashed, dotted, double.
    Choose a color for the borderline.
  4. Spacing: Add margin and padding values over the row to improve its appearance on different devices. Spacing units are px, rem, em, and %.
  5. Custom color: select a custom color for the element or otherwise make it transparent. You can set a custom color for text, regular link, hover link and active link.