Text & Coupon box showing under Prosite table

Hello,

1) I’d like to collapse the coupon box showing under the PRO site table!

Basically, I want to make it look exactly the same as on edublogs (the screenshots).

The coupon box doesn’t look good anyway that’s why I only want to show the text “Have a coupon code?” and show the coupon box with the apply button when someone clicks on it.

2) I’d like to know how can I add “text and/or links” under the table.

For example “All prices are shown in US Dollars” or something like that!

Thanks in advance.

  • Dimitris
    • Support Star

    Hello GeekMaster,

    hope you’re doing good today! :slight_smile:

    1) You can use a little jQuery snippet for making this change. In my next example, I hide the coupon wrapper and add a new button before it’s HTML markup. In second command, the coupon wrapper is being toggled by clicking on the newly created button.

    You can insert this into your custom child theme (or via a MU plugin), or (as I also tested it) via a simple plugin like this.

    (function($) {
    $(".coupon-wrapper").hide().before("<button id='coupon-toggle'>Have a coupon?</button>");
    $("#coupon-toggle").click( function() {
    $('.coupon-wrapper').toggle();
    });
    })(jQuery);

    2) You can use the same workaround to insert some additional text below pricing tables.

    For example:

    (function($) {
    $(".coupon-wrapper").after("<p>All prices are shown in US Dollars</p>");
    })(jQuery);

    https://www.w3schools.com/jquery/html_after.asp

    https://www.w3schools.com/jquery/html_before.asp

    or use some of the filters that can be found in plugin’s code, for example

    psts_checkout_grid_after_free (/pro-sites-files/lib/psts_pricing_table.php#L249)

    Hope that was some help!

    Take care,

    Dimitris

  • GeekMaster
    • Site Builder, Child of Zeus

    Hello Dimitris,

    Thank you for your reply.

    Are you sure you’ve tried these codes!

    I have tried adding both jQuery snippets one time in the functions.php of my child theme and another time as CSS using a plugin. None of them applied any change to the page!

  • Dimitris
    • Support Star

    Hello there GeekMaster,

    hope you’re doing good today! :slight_smile:

    Of course I tested that before sharing with you!

    Please keep in mind that this was a JS snippet, so if you install this plugin

    https://wordpress.org/plugins/custom-css-js/

    you should insert it in a Custom JS code, not a Custom CSS :wink:

    Also, if you’re trying this via your child theme, you should use the wp_enqueue_script() function https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    and use this snippet in a .js file (the one that you will enqueue with above function)

    Ref: https://developer.wordpress.org/themes/basics/including-css-javascript/#scripts

    I hope that clarifies things a bit better! If it still troubles you, please let us know about the exact steps that you’ve made. :slight_smile:

    Warm regards,

    Dimitris

  • GeekMaster
    • Site Builder, Child of Zeus

    Hello Dimitris,

    Thank you for taking time to look into this.

    I'm using microthemer which is supposed to do the same thing as the custom css plugin you've mentioned. I have attached a screenshot of the code after adding it to the custom JS.

    Although I have the code added and saved correctly via the plugin, I see no changes being made to the pricing table page!

    I've enabled support access for you if you'd like to take alook.

    I appreciate your help.

    Thanks

  • GeekMaster
    • Site Builder, Child of Zeus

    Hello,

    Just making sure this has not slipped through the cracks!

    I have added the code to custom JS in microthemer but I still don’t see any changes. If you login into my network dashbaord and click on microthemer you should be able to see the code which has been added under the(Javascript) tab. I have granted you support access (which says 2 days left on my dashboard)

    Please check and let me know.

    FYI, I don’t mind adding the code to my child theme functions or style sheet. I’m not restricted to using microthemer for making changes. I’ve tried both methods though and don’t see any changes!

    Hope to hear from you soon. Thanks

  • Dimitris
    • Support Star

    Hello there GeekMaster,

    hope you're doing good and please excuse my late response here.

    I can see that this isn't working in your end, as the actual JS snippet is being loaded before the actual HTML markup. In order to surpass this, you can either use the Simple Custom CSS & JS plugin as mentioned above and select to enqueue your custom JS code in footer, instead of header

    Or still use Microtheme and just set a little timeout to the JS snippet, so it waits for 100ms and then run. I've already did that for you, some styling is needed to be done now :wink:

    (function($) {
    setTimeout(function(){
    $(".psts-signup-another").remove();

    $(".coupon-wrapper").hide().before("<div id='coupon-toggle-wrapper'><button id='coupon-toggle'>Have a coupon?</button></div>");
    $("#coupon-toggle").click( function() {
    $('.coupon-wrapper').toggle();
    });

    $(".coupon-wrapper").after("<p>All prices are shown in US Dollars</p>");
    }, 100);
    })( jQuery );

    Reference: https://www.w3schools.com/jsref/met_win_settimeout.asp

    Warm regards,

    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.