The 10Web Product widget is used for ecommerce shops. Working primarily with the Woocommerce plugin, the Product widget is a pro drag and drop widget that allows customization of your shops on any page of your website.
Before you begin
How to add the Product widget
Any of the pages of your website that have your products are using the products widget. From your 10Web dashboard:
- Click on the website you want to edit
- Click on Edit with 10Web builder
- From the Web Structure drop down menu, choose the page to be edited
- Type Product in the search widget field
- Drag and drop the widget where you want
- Your products will automatically appear
For your products to automatically appear, you must have a created products page in Woocommerce or WordPress.
- To the left of the screen you will see all the editing and customization options available for this widget.
Customize the content you want to display.
Columns - choose the number of columns you want to display, lowest 1 and highest 12 columns.
Rows - choose the number of rows you want to display.
Pagination - yes enables pagination and displays the page count.
Enabling pagination will activate 3 more options.
Ajax pagination - enabling will dynamically update the content without reloading the entire page in the browser.
Show sorting - yes will activate a drop down menu to allow users to sort the products by popularity, rating, latest, and price.
Show results count - yes will show the number of results.
Hide product image - yes will hide the product image.
Hide product titles - yes will hide the product titles.
Hide product description - yes will hide the product description no will show the description and activate the description length.
Description length - set the number of characters to be displayed.
Source - choose the origin of your results.
Depending on what you choose, other options will activate or deactivate.
Order by - choose how your products will be displayed: date, title, price, popularity, rating, random, or menu order.
Order - set the order to ascending or descending.
Exclude - choose to exclude from search the current post or manual selection. When you choose manual selection, the search and select field is activated.
Search and select - search and select the products you want to exclude.
Customize the look of your shop.
Columns gap - set the spacing between your columns.
Rows gap - set the spacing between your rows.
Alignment - choose from, left, middle, and right alignment.
Thumbnail image width - set the width of the thumbnail.
Single image width - set the width of the individual image.
Border type - set the type of border for your image.
Border radius - give curvature to the edges of the borders.
Spacing - customize the spacing between the text and the image.
Customize the look of your product’s title.
Color - customize the color of your title.
Typography - customize the font type, size, weight and other attributes.
Spacing - adjust the spacing between the title and the description.
Star color - choose the color for the star.
Empty star color - choose a color for the empty star.
Star size - set the size of the star.
Spacing - adjust the spacing between the star and the text.
Color - choose the color of the product’s current price.
Typography - adjust the typographical settings of the price.
Color - choose the color of the product’s regular price.
Typography - adjust the typographical settings of the regular price.
Customize the look of your button for both normal and hover states.
Text color - set the color of your button text.
Background color - set the color of the button’s background.
Border color - set the color of the button border.
Typography - customize the typographical settings of the button text.
Border type - set the border type of the button.
Border radius - add curvature to the border corners.
Text padding - adjust the padding of the button text relative to the button.
Spacing - adjust the spacing of the button relative to the product price.
Color - choose the color of the view cart text.
Typography - adjust the typographical settings of the view cart text.
Border width - customize the width of the border of your box.
Border radius - give curvature to the border edges.
Box padding - set the interior padding of the box.
Content padding - sets padding of the text inside the box.
Choose from normal or hover modes. The following apply to both modes.
Box shadow - choose to enable a box shadow for normal mode, upon hover, or both modes.
Background color - set the background color for your box for normal mode, upon hover, or both modes.
Border color - set the border color of your box for normal mode, upon hver, or both modes.
If pagination is enabled in your products widget, then the pagination dropdown will be active.
Spacing - set the spacing of the pagination text relative to the box.
Border - toggle to show or hide the pagination border.
Border color - active when border is toggled to show. Set a color for the border.
Padding - adjust the spacing between the page number and the next page button.
Typography - set the typographical settings of the pagination text.
Normal, hover, and active settings for pagination.
Color - set the pagination color for one or all of the above modes.
Background color - set the background color for one or all of the above modes.
Sale flash - choose to show or hide a sale flash.
Text color - choose the color of the sale flash text.
Background color - set the color of the sale flash background.
Typography - adjust the typographical settings of the sale flash text.
Border radius - set the curvature of the corners of the border.
Width - set the width of the sale flash.
Height - set the height of the sale flash.
Position - choose to show it in the right or left corner of the box.
Distance - set the distance of the sale flash relative to the corner of the box.