PayWhirl comes with several different types of payment widgets that can be embedded into your website to allow your customers to subscribe to payment plans, make one-time purchases, log in to manage their customer information, update credit cards on file, see upcoming payments, reset passwords, etc.
All PayWhirl widgets and forms are responsive (designed to work on any mobile device, tablet, etc.) and will expand to fill the space that you paste them into. If your page is too narrow, it will force the widget to break down into a vertical/mobile layout. However, you can use custom CSS to override widget layout changes if you need it.
If the space you're pasting your widget is at least 997px wide, your widget will display the number of columns you specify in your widget settings (2, 3, or 4 columns).
In our example below, we've set our widget to display 3 columns in our widget settings, and our page is wide enough to display horizontally in its full-width layout:
However, when the space for the widget is not wide enough (under 997px) the widget will break down into it's vertical/mobile layout like this:
If you need, you can override or force the widget to maintain it's column layout in smaller spaces or on smaller screens by using a few lines of custom CSS in your widget, under advanced settings:
If you want to force a 2 column layout:
Set the widget to use 2 columns in the widget settings
Add the following custom css to your widget settings under advanced:
.col-sm-6 {width: 48%; float: left; margin-left: 2% !important; }
If you want to force a 3 column layout:
Set the widget to use 3 columns in the widget settings
Add the following custom CSS to your widget settings under advanced:
.col-sm-4 {width: 30%; float: left; margin-left: 2% !important; }
If you want to force a 4 column layout:
Set the widget to use 4 columns in the widget settings
Add the following custom CSS to your widget settings under advanced:
.col-sm-3 {width: 22%; float: left; margin-left: 2% !important; }
You can also make changes to the rest of the widget flow by going to the Account Settings > Portal Settings
If you want to disable the ability for your customers to change quantities in their shopping cart, you can add a couple of lines of CSS to your portal CSS.
Paste in this code and click "Save" to hide the quantity selectors.
.cart_item_price i.fa-minus-square,
.cart_item_price i.fa-plus-square{ display:none; }
If you want to only disable one of the options and leave the other, you can use the following:
Disable only the "-" option
.cart_item_price i.fa-minus-square{ display:none; }Disable only the "+" option
.cart_item_price i.fa-plus-square{ display:none; }
NOTE: These are just examples of a few BASIC solutions to alter widget layouts with CSS...They are not perfect solutions and should be altered/added to depending on your needs. Please note we do not officially support custom CSS overrides, but we're always happy to help if we can, so please feel free to reach out with any CSS questions, and we'll do our best to find you a custom solution.
Finally, it should be noted that you can also edit the layout of widgets or ANY page in the customer portal using the PayWhirl Custom Scripts App with either Javascript and/or jQuery.
Related Articles:
Please let us know if you have any questions.
Sincerely,
The PayWhirl Team