The Fresh Bundle Master plugin has been configured to attempt to utilize the built-in styles of the Currently Active WordPress Theme. Here is an example of how the plugin automatically picks up the styling of different themes:
While we have tested this against a number of themes, it is impossible to test against every theme available. So in order to make sure you can display your bundles properly, we have also added the ability for you to choose Custom CSS for plugin elements and to utilize Custom Button CSS (see below for more information).
Global CSS Options
Clicking the Bundle Master “Display Settings” menu will bring up all the CSS options that you can customize as shown in the screenshot below.
You can utilize the Color Pickers to select the color for any of the CSS options. The following options are Global Options, and will apply to ALL bundle Layouts.
- Bundle Title Color
- Individual Product Price Color
- Individual Product Title Color
- Original Price Color
- Bundle “Buy Together” Color
- Bundle “You Save” Color
- Prices Last Updated Message Color
- Buy Button Color
- Buy Button Text Color
- Buy Button Hover Color
- Buy Button Hover Text Color
- Buy Button Font Size
- Bundle Background Color
Custom Button CSS Classes to Match Your Theme
We have included an option field called “Button Custom CSS Class”. You can use this field to output additional CSS classes to the Buy Now Button, which will allow you to utilize built-in button styles from your WordPress theme.
A number of WordPress themes use standard button classes, and we have added these to the plugin by default. However, some themes use a custom button class and you might want to add this in order to perfectly match the buttons in your theme. Let’s look at an example to explain this feature…
The Avada theme (a popular theme on ThemeForest.net) uses special css classes to define their included buttons. By default, Fresh Bundle Master will not apply any styling to the button as shown in the left image below. By adding the classes to the “Button Custom CSS Class” field we can get the exact buttons as styled by Avada. We added “large green” to this field in the example on the right.
Layout-Specific Custom CSS Options
The “Display Settings” screen also contains Custom CSS options that apply to specific bundle layouts as follows:
- Horizontal Divider Color – applies to Info List layout
- Plus Sign Icon Color – applies to Auto Grid & Focused layouts
- Corner Ribbon Background Color – applies to Photo Tiles & Focused layouts
- Corner Ribbon Text Color – applies to Photo Tiles & Focused layouts
- Corner Ribbon Font Size – applies to Photo Tiles & Focused layouts