Button Styles

Button Style sets the corner shape of the buttons in the account portal and on the login page: round pills, slightly rounded corners, square corners or a radius you choose. Match it to the buttons on the rest of your site so the portal feels like part of your store.

Set the button style#

1. Go to WooCommerce > Account Portal > Appearance.
2. In section 7. Buttons, click one of the four cards under Button Style.
3. If you chose Custom, enter the corner size in Radius: (in px).
4. Click Save Settings.

The options#

Option	Corner radius	Hint in the plugin
Rounded (default)	999px	Pill shape (default)
Slight	8px	Small corner radius
Square	0px	Sharp corners
Custom	Your value, 0 to 100 px (default 8)	No hint: a Radius: field appears instead

What it changes#

• Buttons on account pages: WooCommerce buttons (View, Pay, Cancel, Save changes and so on), dashboard buttons and other portal buttons.
• The submit buttons on the login, register and lost password forms.
• The shape of the highlight behind menu items in the account menu (hover and the current page).

How it works#

The setting is printed as the CSS variable --wap-btn-radius on .wap-portal-body. Two other places can change it:

• Brand theme with AI: the template has --wap-btn-radius commented out. If you (or the AI) uncomment it, the brand theme value replaces Button Style, because the brand theme is printed later.
• Advanced CSS: printed last, so it wins over both.

For example, to give buttons a different radius from the menu items, set it in Advanced CSS:

.wap-portal-body .woocommerce .button,
.wap-portal-body button[type="submit"] {
    border-radius: 6px;
}

Cards, inputs and panels use their own radius variables (--wap-radius-sm 8px, --wap-radius-md 12px, --wap-radius-lg 16px), which Button Style does not change. You can set those in Brand theme with AI or Advanced CSS.

Related#

• Creating a Brand Theme with AI
• Adding Custom CSS
• Setting Your Brand Colours