Styling Afterpay

  • Hi there

    I’m trying to style the afterpay logo (.afterpay-logo-link) in p.afterpay-paragraph where it appears after the price and before the ‘add to cart’ button on products links appearing in widgets, categories etc.

    I can see the whole afterpay element including its styling is inserted via js and consequently is resisting my attempts to style it either via a style sheet or ‘additional css’ regardless of specificity.

    How do I go about styling that?

    (I’m wanting to apply display: block in order to tidy the presentation as after a recent update to WC that line breaks or not depending on how many characters in the price.)

    Thanks!

Viewing 1 replies (of 1 total)
  • Chester from Afterpay

    (@chesterz4afterpay)

    Hi @bob33,

    Thank you for your message.

    In addition to the standard styling options using data attributes in the plugin’s settings page, users can also apply the following custom CSS properties to square-placement to scale the messaging elements:

    • –logo-badge-width: To change the size of the brand logo only (badge)
    • –messaging-font-size: To set the font-size of the textual part of the messaging to a custom value

    For example:

    square-placement {
  --messaging-font-size: 10px;
  --logo-badge-width: 70px; /* Must be >= 64px */
}

    Thank you.

Viewing 1 replies (of 1 total)
  • The topic ‘Styling Afterpay’ is closed to new replies.