WooCommerce Single: Additional Information
Crafting a captivating and intuitive online store is key for a successful online business. JupiterX makes this process seamless with its WooCommerce builder feature, empowering you to design your single product page with ease. One of the core components you can add to your product pages is the "Additional Information" widget. Let's dive into the details and learn how to customize it.
What is the "Additional Information" Widget?
The "Additional Information" widget in JupiterX is designed to show product details such as weight, dimensions, and any other extra product attributes that you've set up in WooCommerce. This helps shoppers make informed decisions about their purchases.
Styling the "Additional Information" Widget
To start styling the "Additional Information" widget, click on it to reveal the main configuration tabs. Make sure you're on the "Style" tab to begin customizing the look and feel of this element.
Text Color
- Select Text Color: Click on the color swatch next to 'Text Color' to launch the color picker tool.
- Choose a Color: Pick a new color for the text within the "Additional Information" section. You can type in a hex code if you have a specific brand color in mind.
Typography
- Access Typography Settings: Click the pencil icon next to 'Typography' to review the available typography settings.
- Font Family: Use the dropdown to select a font that fits your brand's style.
- Size: Use the slider or type in a number to set the font size.
- Weight: Choose how thick or thin you want the text to be.
- Transform: Style your text in uppercase, lowercase, or capitalize for impact.
- Style: Opt between normal, italic, or oblique styles.
- Line-Height: Modify the line height to improve readability.
- Letter Spacing: Tweak the spacing between characters as necessary.
Background Color
- Select Background Color: Click the color swatch to pick a background color for the widget.
- Choose a Color: Find a color that complements your layout.
Border Color
- Select Border Color: Click on the color swatch to pick a color for the border that wraps your "Additional Information" tab.
- Choose a Color: Look for a hue that stands out or blends in well with your design.
Padding
- Adjust Padding: Click the link icon to adjust the padding uniformly across all sides of the widget.
- Unlink Padding: If you need different padding on specific sides, simply click the link icon again to input individual values.
- Set Values: Add padding measurements in pixels (px) to get the desired spacing inside the widget.
Don't forget to preview your changes to see how they look on the front end and make sure they align perfectly with your overall store design. Always remember, the key to a great product page is not just in the information you provide but also in how you present it.
By following these simple steps, you can ensure that your product pages are well-tailored and informative, enhancing the shopping experience for your customers.