Back to Docs

Customizing Tip Button Appearance and Colors

You can personalize the tip button styles to better match your store’s branding using the built-in styling options.

Steps to Customize Appearance

Navigate to Settings:
Go to WooCommerce → Checkout Tipping → General.

Choose Button Style:

  • Rounded: Buttons will have curved corners for a softer look.
  • Square: Buttons will have sharp edges for a more minimal style.

Set Active and Hover Colors:
Use the color picker to define how the buttons look when selected or hovered.
Example: #7b7bf8 for hover background.

Define Button Text Color:
Choose the color of the text displayed on each tip button.
Example: #ffffff for white text.

These visual customizations help ensure that the tipping UI is consistent with your site’s theme.

Related Articles