Preview Button Placement and Styling
The preview button is drawn by the free base plugin. Pro controls where it appears and how it looks from the Pro Settings tab, in the Preview Button card.
Position
Section titled “Position”Choose where the button shows on the single product page:
- Before Add to Cart button (
woocommerce_before_add_to_cart_button). - After Add to Cart button (
woocommerce_after_add_to_cart_button).
Pro passes your choice to the base plugin through its placement seam, so there is still one button in the position you pick.
Colors
Section titled “Colors”Four color options, each a WordPress color picker:
- Preview Button Text Color (default
#ffffff). - Preview Button Hover Text Color (default
#ffffff). - Preview Button Background Color.
- Preview Button Hover Background Color.
The activation defaults set the background to #E2725A and the hover background to
#4A6274; text and hover text default to white.
How colors are applied
Section titled “How colors are applied”The base plugin styles the button from CSS custom properties (--wcdp-accent and
--wcdp-on-accent). Pro overrides those variables from your saved colors so the resting
state changes without a specificity fight. The base plugin has no hover variable, so the
hover colors are applied with a targeted hover and focus rule instead.
If you leave a color empty, the button keeps the theme or base plugin default for that property rather than forcing a value.
Saving
Section titled “Saving”Click Save. Settings are stored in the wcdp_pro_admin_general_option option and take effect
on the next product page load.