CSS Tweaks for the Stripe Payments Plugin

This page has a collection of CSS tweaks for the Stripe Payments plugin.

You can add the CSS tweaks to the following interface of your site (without modifying the plugin’s code).

Appearance -> Customize -> Additional CSS

Customize the Stripe Payment Button

This tutorial has some tricks for customizing the Stripe payment button.

Bigger Thumbnail Image for the Fancy Product Display

Add the following CSS code to make the thumbnail size 150 x 150 px.

asp_product_item_thumbnail img {
    height: 150px;
    width: 150px;
}

You can use any value you want instead of 150px.

Make the Stripe Product Name Font Bigger in the Fancy Display

Add the following CSS code to make the download item title bigger

.asp_product_name {
    font-size: 32px;
}

You can use any value you want instead of 32px.

Add a Background Color for the Fancy Product Display

Add the following CSS code to use a lightgrey background color:

.asp_product_item {
    background-color: lightgrey;
}

Make the Thumbnail Image Smaller In the Individual Product Page

Add the following CSS code to use a smaller thumbnail image in the individual product page of the Stripe product:

.asp_post_item .asp_post_thumbnail {
    max-width: 200px;
}

Hide the Product Title Below the Image in the Product Page

Add the following CSS code to hide the title that shows up below the image in the individual product page.

.asp_post_item .asp_post_title {
    display: none;
}

Center Align the Stripe Buy Button

You could wrap the Stripe Buy button shortcode with a center align code. See example below (this needs to be added in the “HTML” view):

<div style="text-align: center;">
[asp_product id="1234" fancy="0"]
</div>

Customize the Thank You Message Font Size and Color

Use the following CSS code:

.asp-thank-you-page-msg-wrap {
    font-weight: bold;
    color: blue;
}