Appearance Settings
Customize the visual appearance of the service order interface by setting custom colors and milestone images.
Color Settings
Section titled “Color Settings”Color settings are available in WP Admin > Woo Sell Services > General Settings under the color section.
| Setting | Key | Default |
|---|---|---|
| Content Background Color | wss_content_bg_color |
Theme default |
| Secondary Background Color | wss_content_sec_bg_color |
Theme default |
| Border Color | wss_content_border_color |
Theme default |
| Conversation Background | wss_conversation_bg_color |
Theme default |
| Conversation Text Color | wss_conversation_text_color |
Theme default |
| Status Badge Background | wss_conversation_status_bg_color |
Theme default |
| Status Badge Text Color | wss_conversation_status_text_color |
Theme default |
| Border Radius | wss_content_border_radius |
Theme default |
Enter standard hex color codes (e.g., #1a73e8, #333333). Invalid hex values are rejected by the sanitization callback to prevent CSS injection.
These colors are applied to:
- Service order detail page containers
- Conversation message bubbles and area
- Requirement form sections
- Order status badges
- Delivery and review areas
Milestone Images
Section titled “Milestone Images”Navigate to WP Admin > Woo Sell Services > Images to configure milestone images.
Milestone images are displayed on the service order page to visually indicate the current order status. Each step in the workflow can have a custom image:
| Key | Status Step |
|---|---|
order_started |
Order has been placed |
order_rqrmnt |
Requirements submission phase |
order_conversation |
Conversation/work in progress |
final_dlvry_sent |
Final delivery submitted by vendor |
final_dlvry_accpt |
Final delivery accepted by customer |
final_dlvry_deny |
Final delivery rejected by customer |
order_review |
Review phase |
order_comp |
Order completed |
Setting Milestone Images
Section titled “Setting Milestone Images”- Click Upload Image next to the status you want to customize
- Select or upload an image from the WordPress media library
- Click Save
Recommended image size is 200x200 pixels. Use PNG or SVG for best quality.
CSS Customization
Section titled “CSS Customization”For advanced styling beyond the built-in color options, add custom CSS through WP Admin > Appearance > Customize > Additional CSS or your theme’s stylesheet.
Key CSS classes for targeting:
| Element | CSS Class |
|---|---|
| Service order wrapper | .wss-service-order |
| Conversation area | .wss-conversation-wrapper |
| Message bubble | .wss-message |
| Requirement form | .wss-requirement-form |
| Delivery section | .wss-delivery-section |
| Status badge | .wss-status-badge |