The Shop Style settings allow you to customize colors and design elements of your WooCommerce storefront. Use these options to ensure your buttons, product cards, and status messages perfectly match your brand identity.
To access these settings, navigate to Dashboard > Theme Options > Styling > Shop Style.
1. Product & Button Colors #
Customize the primary interactive elements of your shop pages.
- Product Box Background: Change the background color for the product card containers.
- Product Box Color: Set the default color for archive product information (best used when a specific background color is set).
- Add To Cart Colors: Fine-tune the Text Color, Background Color, and Border Radius for the “Add to Cart” button in both its normal and hover states.
- Cart & Checkout Button Colors: Dedicated controls for the “Cart” and “Checkout” buttons, allowing for unique styling of each step in the purchasing process.
2. Single Product Tabs Color #
Control the appearance of the information tabs (Description, Reviews, etc.) on individual product pages.
- Tabs Background: Set the background color for the product tab area.
- Active/Hover State: Choose unique background and text colors for the tab that is currently selected or being hovered over.
- Tabs Border Color: Adjust the color of the lines separating the tab content.
3. Product Pricing & Indicators #
Define the colors for specific shop elements to improve user navigation and conversion.
- Sale Bubble: Change the color of the “Sale” badge; the default is set to a success/green color.
- Review Stars: Set the color for product rating stars.
- Pricing: Individually set the color for the Regular Price and the Sale Price to make discounts more visible.
4. System Messages #
Customize the status colors for informational alerts on the shop page.
- Success Color: Sets the color for successful action messages.
- Info Color: Sets the color for general informational messages.
- Error Color: Sets the color for error alerts.
