The WooCommerce Pages widget is designed to fetch data from the WooCommerce pages on your site (Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account Page) and replicate it anywhere on your site using the 10Web Website Builder.
Adding WooCommerce Pages widget
- Find the WooCommerce Pages widget in the widget menu.
- Drag it to the page canvas.
- Configure the settings from the tabs below:
Content tab
Element
- Page: Select a WooCommerce page to display. Choose from:
Cart Page
Single Product PageNote:
If Single Product Page is selected, an additional field becomes available to allow you to search and select a particular product to display.
Checkout Page
Order Tracking Form
My Account Page
Style tab
Style
- Title Color: From the color picker, select the color(s) of the title.
- Title typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Text Color: From the color picker, select the color(s) of the text.
- Text Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Link Color: From the color picker, select the color(s) of the link.
- Link typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
Button
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
- Border Type: Select type and styling of the border.
- Border Radius: Adjust radius of the border.
- Padding: attune Button padding to position it more precisely.
Note:
The below settings can be separately set for Normal and Hover modes.
- Text color: From the color picker, select the color of the button text.
- Background color: From the color picker, select the background color.
- Border color: From the color picker, select the color of the border.
Input
- Typography: Click the pencil icon to open the font options panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
Note:
Note: The below settings can be separately set for Normal and Hover modes.
- Text color: From the color picker, select the text color.
- Background color: From the color picker, select the background color.
- Border color: From the color picker, select the color of the border.
- Border type: Select type and styling of the border.
- Border radius: Adjust the radius of the border.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.