• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP Express Checkout

Express Checkout Plugin for WordPress

  • Home
  • Documentation
  • Extensions
  • Login
    • Sign In
    • Edit Profile
    • Terms & Condtions
    • My Downloads
  • Support
    • Tutorials
  • Contact
  • Show Search
Hide Search
You are here: Home / CSS Tweaks for the WP Express Checkout Plugin

CSS Tweaks for the WP Express Checkout Plugin

This page has a collection of CSS tweaks for the WP Express Checkout plugin.

The CSS tweaks can be added to the following interface of your site (without modifying the plugin’s code).

Appearance -> Customize -> Additional CSS

Table of Contents

  • Customize the Buy Now Button
  • Center Align the Buy Now Button
  • Customize the Apply Coupon/Discount Button
  • Template 1 Product Display
    • Template 1 – Bigger Thumbnail Image
    • Template 1 – Larger Font for the Product Name
    • Template 1 – Larger Font for the Product Description
    • Template 1 – Adding a Background Color

Customize the Buy Now Button

This tutorial has some tips for customizing the Buy Now button of the WP Express Checkout plugin.

Center Align the Buy Now Button

If you are just using the Buy Now button (without any template), then you can use the following technique to center align the button.

Add a standard Custom HTML block, then add the following code (including the shortcode) in the HTML block. Replace “1234” with your actual product ID.

<div style="text-align: center;">
[wp_express_checkout product_id="1234"]
</div>

The following screenshot shows an example of how this tweak is used to center align the buy now button on my site.

Customize the Apply Coupon/Discount Button

The example below illustrates how CSS modifications can be applied to personalize the apply coupon button’s appearance. You are free to use any color of your preference.

Add the following CSS code to customize the apply coupon button with a transparent background, black border color, black text, and a “grey background on hover” effect:

.wpec_coupon_apply_btn{
    background-color: #FFF;
    background-image: none;
    border-color: #000;
    color: #000;
}
.wpec_coupon_apply_btn:hover{
    background-color: #DDD;
    background-image: none;
    border-color: #000;
    color: #000;
}

Add the following CSS code to set the button’s font size to 20px.

.wpec_coupon_apply_btn{
    font-size: 20px;
}

Template 1 Product Display

The following CSS tweaks are for the template 1 product display shortcode.

Template 1 – Bigger Thumbnail Image

Add the following CSS code to set the thumbnail image width to 100px and the height to auto adjust.

.wpec-product-item-thumbnail img {
    width: 100px;
    height: auto;
}

Template 1 – Larger Font for the Product Name

Add the following CSS code to set the font-size of product name to 36px

.wpec-product-name a {
    font-size: 36px;
}

Template 1 – Larger Font for the Product Description

Add the following CSS code to set the font-size of product description to 20px

.wpec-product-description{
    font-size: 20px;
}

Template 1 – Adding a Background Color

Add the following CSS code to use a lightgrey background color to the template 1 product display:

.wpec-product-item{
    background-color: lightgrey;
}

Primary Sidebar

Featured Addons/Extensions

Subscription Payments Addon

Custom Fields Addon

A Simple & Lightweight Plugin

Our Approach with the Plugin

Support Link

  • Contact Us

Search

Copyright © 2025 | WP Express Checkout Plugin | A member of the Tips and Tricks HQ family.