Okay
  Public Ticket #3719021
Options for Coupon Code Field on Checkout Page
Closed

Comments

  •  48
    Ben started the conversation

    First, I wanted to say how much I love the new checkout page template you guys created! Looks awesome and the flow is much better! 

    I'm working on a project and we are wondering if there's a way (with a snippet or something) that would allow the coupon code field to default to open instead of collapsed. Right now the coupon defaults to collapsed when people come to the page. We're hoping to make it a little more prominent by defaulting to open. 

    I'm attaching a photo of the extended/open coupon box. I wasn't sure if there's a way to do that with code easily or if I'd need to look for a plugin for something like that. 

    p.s. I was also wondering if it's easy to modify the size of the button so it matches the height of the field box. Thanks in advance! 

    Attached files:  Screenshot 2024-09-05 at 10.42.25 PM.png

  •  8,837
    Tahir replied

    Hey Again,

    This would likely require a JS snippet. Please provide the page url so we can write up the code.

    Thanks.


    ThemeNectar Support Team 

  •   Ben replied privately
  •  1,875
    Judith replied

    Hi there,

    Thanks for writing back.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    .wc-block-components-totals-coupon .wc-block-components-panel__button {
        display: none;
    }

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 


  •  8,837
    Tahir replied

    Hey Again,

    Add this into the Custom JS box in your Salient Theme Options panel 

    <script>
    jQuery(document).ready(function($) {
        // Ensure the page is fully loaded
        $(window).on('load', function() {
            // Trigger click on the button
            $('.wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper button').trigger('click');
        });
    });
    </script>

    Thanks



    ThemeNectar Support Team