How do I edit the style of the checkout form

I need to edit the style of the checkout form. I mean the table holding the payment and alternate payment methods. I would like to change the width of the table, the style of the text box of the following labels: Cardholder Name, Card Number, and Card Security Code. I would also like to change the display of the Expiration Date dropdown menu and the style of the subscribe button. I dont mind editing the prosite plugin files if thats what it takes as I am a programmer, all I need in that case are the names of the files to edit and their location in the prosite plugin folder

  • Dimitris

    Hey there opeyemi,

    I trust you're doing good today and thanks for reaching us! :slight_smile:

    All of these changes may be possible through CSS rules that can also prevent you from changing plugin files. If you need any more help with selectors, I'd be more than happy to assist you! :slight_smile:

    About files now, pricing tables are set here /wp-content/plugins/pro-sites/pro-sites-files/lib/psts_pricing_table.php, while the registration, checkout and gateways markup are being built in three coresponding files in /wp-content/plugins/pro-sites/pro-sites-files/lib/ProSites/View/Front/ folder.

    Hope that was some help,
    Dimitris

  • opeyemi

    Thank you for the prompt response dimitris. I would appreciate it if you could help me with the selectors and how to make CSS styling without editing plugin files. I need selectors for the table holding the payment and alternate payment, and not the pricing table. I also need selectors to the cardholder text box, card number textbox and card security code text box. I also need selectors to the expiration date dropdown menu and the subscribe submit button

    Thank you

  • Dimitris

    Hey there opeyemi,

    the table holding the payment and alternate payment

    This depends on how many gateways have you enabled. If you use all three, then it's

    #gateways-1 { }
    #gateways-2 { }
    #gateways-3 { }

    cardholder text box

    #psts-cc-table tbody > tr:nth-child(1) td.pypl_label { }

    card number textbox

    #psts-cc-table tbody > tr:nth-child(2) td.pypl_label { }

    card expiration text box

    #psts-cc-table tbody > tr:nth-child(3) td.pypl_label { }

    card security code text box

    #psts-cc-table tbody > tr:nth-child(4) td.pypl_label { }

    expiration date dropdown menu

    Two selectors, for month and year

    #cc_month { }
    #cc_year { }

    subscribe submit button

    Two selectors, while on Stripe or Manual

    #cc_stripe_checkout { }
    #psts-manual-submit { }

    Hope that was some help, if you still need assistance on this, please share with me your registration page URL to better inspect it! :slight_smile:

    Warm regards,
    Dimitris

  • opeyemi

    I really appreciate your support Dimitris. I can conclude from your reply that this payment and alternate payment checkout form is located in some file within the pro site plugin folder. I would prefer to add custom classes to the form elements as I have styled them already. May I have the location to the file holding the payment and alternate payment form? I'll bare the responsibility of an upgrade, except if there's a way to add custom classes without editing the plugin file

  • Dimitris

    Hey there opeyemi,

    hope you're having a beautiful day! :slight_smile:

    Each table for every payment method is being built in the following files:
    1. Manual payments
    /wp-content/plugins/pro-sites/pro-sites-files/gateways/gateway-manual.php
    2. PayPal
    /wp-content/plugins/pro-sites/pro-sites-files/gateways/gateway-paypal-express-pro.php
    3. Stripe
    /wp-content/plugins/pro-sites/pro-sites-files/gateways/gateway-stripe.php

    All these three alternatives are being "bundled" in
    /wp-content/plugins/pro-sites/pro-sites-files/lib/ProSites/View/Front/Gateway.php

    Hope that's some help, just keep in mind to backup your changes before any future updates of Pro Sites plugin, as all of your changes will be lost after an update procedure and you should re-insert those.

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.