Afterpay info not on single line

That’s a styling issue. Your category page have this style:

.woocommerce ul.products li.product strong {
    display: block;
}

If you turn it off, everything goes on one line, except the Afterpay logo, because there’s no room for it. However, if you want to override this style, make sure you don’t ruin anything else.

Alternatively (better, actually), edit the plugin settings in WooCommerce > Settings > Payments > Afterpay, and make the price not bold on category pages OR add a class to the strong tag so you can style it with display: inline;.

Hi @spva,

Thank you for your message, and thanks to @galbaras for taking the time to assist.

There are a number of ways that this could be solved. The first two being the methods that @galbaras has mentioned. Please only use one of these:

1. Override styles: Go to the WordPress Dashboard > appearance > customise > Additional CSS. In the text box enter the following css. This will only affect elements inside of the Afterpay message on the product listing pages.

.woocommerce ul.products li.product .afterpay-payment-info img {
    display: inline-block;
    max-width: 120px;
    margin-bottom: 0;
}

.woocommerce ul.products li.product .afterpay-payment-info strong {
    display: inline;
}

2. Remove bold text: Go to the WordPress Dashboard > WooCommerce > Settings > Payments > Afterpay. In the editor under the “Payment Info on Category Pages” section select [AMOUNT] and remove the bold styling.

3. Update the plugin: Version 3.3.0 uses the Afterpay Javascript library to display the message. The styles are scoped and therefore should not be affected by the theme styling. After updating, the settings will need to be saved for the plugin, by going to the WordPress Dashboard > WooCommerce > Settings > Payments > Afterpay and clicking save. The update also contains options that will shorten the message if this is desired. Options include: data-show-interest-free, data-payment-amount-is-bold, data-intro-text. As always whenever doing updates like this on a production website the Afterpay team recommend backing up site files and database.

Thank you.

• This reply was modified 3 years, 4 months ago by Afterpay.

Big thank you to both of you I have fixed this now.