BoxBuilder is designed to look great with any WordPress theme out of the box. For further customization, use the Appearance settings tab.
Appearance Settings
Navigate to BoxBuilder → Settings → Appearance to customize:
Brand Colors
| Setting | Description | Default |
|---|
| Primary Color | Main accent color for buttons, progress bars, selected states, and links | #5c6ac4 |
| Success Color | Color for success states (item added badges, confirmations) | #28a745 |
Choose a primary color that matches your store’s branding. The color picker supports hex values — click “Default” to reset to the original color.
Card Styling
| Setting | Options | Default |
|---|
| Corner Style | Square (0px), Slightly Rounded (4px), Rounded (8px), More Rounded (12px), Very Rounded (16px) | Rounded (8px) |
| Card Shadow | None (Flat), Light (Subtle), Medium (Prominent) | Light (Subtle) |
Advanced Pro
| Setting | Description | Default |
|---|
| Enable logging | Write debug information to WooCommerce logs for troubleshooting | Enabled |
Leave logging enabled during setup and testing. You can disable it on production sites to avoid unnecessary log file growth. Logs are accessible at WooCommerce → Status → Logs.
CSS Namespacing
All BoxBuilder CSS is namespaced under .boxbuilder-wrap to prevent conflicts with your theme. Every element uses a .boxbuilder- prefix:
.boxbuilder-wrap { }
.boxbuilder-grid { }
.boxbuilder-product-card { }
.boxbuilder-summary { }
.boxbuilder-progress { }
Custom CSS
If you need custom styles beyond the settings, you can add CSS in Appearance → Customize → Additional CSS or your theme’s custom CSS area.
Common customizations:
/* Change product card background */
.boxbuilder-wrap .boxbuilder-product-card {
background-color: #f9f9f9;
}
/* Change the Add to Box button style */
.boxbuilder-wrap .boxbuilder-add-btn {
border-radius: 20px;
text-transform: uppercase;
}
/* Adjust grid gap */
.boxbuilder-wrap .boxbuilder-grid {
gap: 20px;
}
Avoid using !important in custom CSS. BoxBuilder styles use low specificity intentionally — your theme or custom CSS should be able to override them naturally. If you need !important, the selector specificity may need adjusting.
Theme Compatibility
BoxBuilder uses WordPress-native styles as a foundation and minimal custom CSS on top. It’s tested and compatible with:
- Storefront
- Astra
- GeneratePress
- Flatsome
- OceanWP
- Divi
- Avada
If you experience styling issues with your theme, please contact support. 
