Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce Chase Paymentech Sample Pay Page Styles (works well with Storefront theme)
/*-------------------------------------------------------------
Add these styles to your child theme's stylesheet
or custom CSS plugin (*not* the pay form css)
-------------------------------------------------------------*/
.pay-page-checkout #payment .payment_methods li .payment_box.payment_method_chase_paymentech,
.pay-page-checkout #payment .payment_methods {
background: none;
border: none;
margin-top: 0;
padding-top: 0.5em;
font-size: 24px;
text-align:center;
font-weight: 700;
}
.payment_method_chase_paymentech .form-row {
font-size: 16px;
}
#wc-chase-paymentech-pay-form {
width: 95%;
border: 1px solid rgba(0,0,0,.1);
background: #dff0d8;
min-height: 575px;
}
/*-------------------------------------------------------------
All of the following CSS should be placed in its own stylesheet within your theme. For example:
chase-pay-form.css
This will be the stylesheet used for the pay form (and will only apply to the Chase iframed pay form).
You should use the path to this stylesheet in the Pay Form Style URL
-------------------------------------------------------------*/
tbody {
font-family: 'Helvetica Neue', sans-serif;
}
a {
font-size: 14px;
}
#theForm table {
margin: 20px auto;
}
tbody label {
display: block;
margin-top: 10px;
}
.creNameLabel label {
margin-top: 0;
}
input[type="text"] {
display: block;
padding: 0.7em;
font-family: 'Courier New', Monaco, monospace;
font-size: 14px;
background-color: #fff;
color: #333;
min-width: 300px;
border: 2px solid #e1e1e1;
border-radius: 3px;
line-height: 1;
}
input[type="text"]:focus {
background-color: #fafafa;
color: #484b51;
}
#amountDisplay {
background-color: #efefef;
}
select {
padding: 5px;
font-size: 14px;
font-family: inherit;
line-height: 1;
border: 2px solid #e1e1e1;
background: #fff;
border-radius: 2px;
height: 30px;
}
.creTypeRow select {
width: 100%;
}
.creExpirationRow select {
width: 40%;
font-size: 12px;
}
.creButtonRow {
display: block;
margin: 10px auto 0;
}
.creButtonLabel {
display: block;
width: 100%;
}
button,
input[type="button"],
input[type="submit"] {
background-color: #96588a;
border: 1px solid #96588a;
color: #ffffff;
font-size: 1.087em;
padding: .618em 1em;
width: 48%;
display: inline-block;
float: none;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1);
}
button:hover;
input[type="button"]:hover,
input[type="submit"]:hover {
background-color: #7d3f71;
border-color: #7d3f71;
color: #ffffff;
}
.cancelButton {
background-color: #60646c;
border-color: #60646c;
color: #ffffff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment