Woocommerce subscriptions “switch subscription” button styling wrong

Hey team,

We use WooCommerce Subscriptions, and it’s popular for our users to use the “switch subscription” feature. On a dark-themed WoodMart site, the “switch subscription” button isn’t styled consistently with the rest of the subscription buttons (cancel, change payment, renew), and the white text on a white background makes it hard for users to understand.

Here’s an example: https://static.funkypenguin.co.nz/2024/My_account__ElfHosted_2024-11-27_22-41-03.png

Update moderator details because I hit enter too soon!

Hello,

Please provide us with your admin access so we can log in and check this on your end.

Thank you in advance.

Private info attached

To fix this issue, try to add the following code snippet to the Custom CSS area in Theme Settings.

td.product-name .wcs-switch-link {
	display: inline-flex;
	margin-inline-start: 10px;

}

.subscription_details .button,
.ps-my-account-upgrade-table .button,
td.product-name .wcs-switch-link {
    padding: 5px 14px;
    min-height: 36px;
    font-size: 12px;
    border-radius: var(--btn-accented-brd-radius);
    color: var(--btn-accented-color);
    box-shadow: var(--btn-accented-box-shadow);
    background-color: var(--btn-accented-bgcolor);
    text-transform: var(--btn-accented-transform, var(--btn-transform, uppercase));
    font-weight: var(--btn-accented-font-weight, var(--btn-font-weight, 600));
    font-family: var(--btn-accented-font-family, var(--btn-font-family, inherit));
    font-style: var(--btn-accented-font-style, var(--btn-font-style, unset))
}

.subscription_details .button:hover,
.ps-my-account-upgrade-table .button:hover,
td.product-name .wcs-switch-link:hover {
    color: var(--btn-accented-color-hover);
    box-shadow: var(--btn-accented-box-shadow-hover);
    background-color: var(--btn-accented-bgcolor-hover)
}

.subscription_details .button:active,
.ps-my-account-upgrade-table .button:active,
td.product-name .wcs-switch-link:active {
    box-shadow: var(--btn-accented-box-shadow-active);
    bottom: var(--btn-accented-bottom-active, 0)
}

Thank you, that worked great!

You are welcome. Feel free to contact us if you have any further questions.

[Author]

Posts