This feature is a part of Product Page Customizer. Click here to see all Product Page Customizer features.
The Product Page Customizer allows you to modify the styling of your product pages to match your brand identity and improve user experience. This guide explains how to adjust the appearance of various elements on the product page.
Accessing the Styling Options
To access and modify product page styling:
- Navigate to your WordPress Dashboard.
- Go to Catalog Settings > Catalog Design > Single Page Design.
- Locate the product page styling adjustments sections.
Available Customization Options
Colors
- Product Name Color: Change the color of the product title.
- Headers Colors: Adjust the color of all headers on the product page.
- Text Color: Modify the main text color.
- Price Color: Set the color of the product price.
- Related Box Background: Change the background color of the related products section.
- Related Box Text Color: Adjust the text color in the related products section.
Font Sizes
- Product Name Size: Adjust the font size of the product title.
- Headers Size: Change the font size of headers.
- Text Size: Modify the font size of the main body text.
- Price Size: Adjust the font size of the product price.
Additional Customizations
- Price in Box with Background: Display the price within a colored box for emphasis.
- Disable Related Products and Categories Section: Remove the related products section.
- Disable Short Description: Hide the short product description.
- Replace Description: Customize the default product description with alternative content.
- Modify Variation Selector Styling: Customize the appearance of product variation dropdowns/selectors.
- Image and Product Details Container Width: set a different width for each container
Use Cases & Examples
Example 1: Minimalist Design
- Set Product Name Color and Text Color to neutral tones.
- Disable the Related Products and Categories Section.
- Keep font sizes consistent and easy to read.
Example 2: Vibrant and Eye-Catching Design
- Use bold colors for Headers and Price.
- Enable Price in Box with Background for better visibility.
- Increase Product Name Size for emphasis.
Troubleshooting
- Changes not reflecting? Clear your caching plugin and browser cache.
- Styling not applied? Ensure that no conflicting CSS rules in your theme override these settings.
Related Features
For more product page customizations, check out:
By utilizing these styling options, you can create a product page that aligns perfectly with your store’s branding and enhances the user experience.
The goal of this screen is to be able to modify any product page element. If you would like to modify something that is missing please let us know. We will be happy to add it!