Return to previous page

How to Change Coupon Code Section and Displaying Available Coupons

This topic has 3 replies, 3 voices, and was last updated 1 months, 1 weeks ago ago by Andrew Mitchell

Drishti

Participant

September 16, 2024 at 10:30

1. Formatting the Coupon Code Section:

I would like to change the formatting of the coupon input field and the button in the cart page.
Specifically, I want to:
Add rounded corners (border-radius: 12px) to the coupon input field and button.
Change the font family to Roboto, size 18px for the input field.
Set the width of the coupon input field to 200px.
Modify the button text to say “Apply Coupon” instead of “OK”.
Set the button width to 150px and give it rounded corners (border-radius: 12px).

2. Displaying All Available Coupon Codes:

I would like to add a button or section below the coupon input field that, when clicked, shows all available coupon codes (if any) to the customer.
How can I display the available coupon codes that customers can use on the cart page?
Ideally, the customer should be able to see available coupons and select one of them, which would automatically apply the code in the coupon field.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#414500 Copied

2 Answers
Luca Rossi

Support staff

September 17, 2024 at 05:19
Hi @Drishti,

1. Please add the following CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.coupon input#coupon_code {
    border-radius: 12px 0 0 12px;
    font-family: "Roboto";
    font-size: 18px;
    max-width: 200px;
    border-right: 0;
}
.coupon input[type="submit"][name="apply_coupon"] {
    border-radius: 0 12px 12px 0 !important;
    min-width: 120px;
    font-family: "Roboto";
    font-size: 18px;
    position: static !important;
    height: 37px;
}

.coupon {
    justify-content: start;
}
```
To change the button text, please follow this article: https://aovup.com/woocommerce/change-apply-coupon-button-text/.

2. It requires many customization codes and fall out of scope our support standard we provide. Should you require further assistance with customizations, we invite you to submit a request through our customization panel at: https://www.8theme.com/account/#etheme_customization_panel.

Thank you for your attention to these matters.

Best Regards,
The 8Theme Team
#414624 Copied
Andrew Mitchell

Support staff

September 17, 2024 at 19:47

Dear Drishti,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#414782 Copied
Tagged: best selling themes, change coupon code, customize woocommerce, display available coupons, ecommerce tips, online store enhancement, woocommerce themes
Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘How to Change Coupon Code Section and Displaying Available Coupons’' has been successfully resolved, and the topic is now closed for further responses

How to Change Coupon Code Section and Displaying Available Coupons

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection