On PayWhirl, when you create a widget or payment form, you will be presented with two embed code options:
Traditional in-page embed code
Buy button embed code
The buy button embed code will display a button rather than a complete widget and popup checkout into a window above the page. Buy button embed codes make it easy to create seamless subscriptions on just about any site.
Customers just have to click on the buy button, and they can view the widget and complete their purchase in a popup window above the page:
Customizing PayWhirl Buy Buttons
You can customize the buy button and upload a custom image on paid plans from the plan-settings page. However, on Starter accounts, you must host your image and provide the URL path to the image in the embed code. You can do this by making a small change to your buy button embed code. If you look at your embed code closely, you will see a section that says, button_image: ' ' and has two apostrophes with nothing between them.
If you edit the button image section and add a complete URL to an image already hosted online like button_image:'http://www.image_path_here.com/mypic.jpeg' with a full URL it will use the custom image instead of the default PayWhirl Buy Button.
If you are on a monthly paid plan, we will host and update the image code automatically when you upload a new image.
Bypassing the plan selection screen
If you only have a single plan in a pricing table widget, you can bypass the widget checkout screen and go right to the cart. To enable click the chained widget settings and set the bypass to 'yes'.
Once enabled, immediately after clicking the buy button, the customer will enter the cart to complete checkout:
CSS adjustments
Depending on your theme, you may want to modify the size/placement of your buy button as well. We've provided some sample CSS below that can be used in product page descriptions or your theme if you'd like to apply it globally.
If your normal "add to cart" buttons are BELOW your product page description, you may need to but your buy button at the bottom of your page description HTML and add some additional CSS styling to your product page descriptions to move the button down into place.
For example...
<style>
.pw-buy-btn {
max-width: none !important;
position: absolute !important;
margin-top: 185px !important;
margin-left:0px !important;
}
</style>
However, if your normal "add to cart" buttons are ABOVE your product page description, you may need to but your buy button at the top of your page description HTML and add some additional CSS styling to your product page descriptions to move the button down into place.
For example...
<style>
.pw-buy-btn {
max-width: none !important;
margin-top: -55px !important;
margin-left:0px !important;
}
</style>
Note: You will most likely need to modify the pixel values in this sample CSS if you use it in your own theme.
Related Articles:
Please let us know if you have any questions.
Sincerely,
The PayWhirl Team