CSS Tweaks for the Stripe Payments Plugin - Payments Plugin for Stripe

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

This tutorial has some tips and tricks for customizing the Stripe payment 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>

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.

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 the following CSS code to use a lightgrey background color:

.asp_product_item {
    background-color: lightgrey;
}

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;
}

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;
}

Use the following CSS code:

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

Use the following CSS to hide the quantity row:

.asp-order-details-quantity-row{
    display: none;
}

Table of Contents