Return to previous page

Assistance Needed for Adjusting Cart and Checkout Section Sizes

This topic has 4 replies, 2 voices, and was last updated 10 months ago ago by Tony Rodriguez

TronShop

Participant

February 19, 2024 at 12:39

8Theme Team,

Greetings! We hope this message finds you well. We are reaching out to request your assistance with resolving the size of our shopping cart and checkout section. Currently, we’ve encountered an issue where the buttons and checkout information appear excessively large by default, and despite our efforts, we have been unable to resolve it satisfactorily.

In the attached video, you can see how promotions are displayed at 100% of their default size for users. However, our goal is to reduce this default size to 85% or even 75%, as shown in the video. We aim for this reduction to be implemented universally across the template, although we understand that sizes may vary depending on the section we’re working on.

https://www.loom.com/share/8d3ab7b3935a40a391f3a2cc1f218ff1?sid=28fd3b57-e056-4db4-99b8-ccbe0d4f2315

Therefore, we kindly request your support specifically for the cart and checkout sections. We would like the arrangement of buttons and information to be clear and have an appropriate size for our users. Thus far, we have struggled to achieve this on our own.

Could you please assist us in achieving this goal?

We eagerly await your prompt response.

Best regards,

#383829 Copied Theme version: 9.2.8

3 Answers
Tony Rodriguez

Support staff

February 20, 2024 at 10:00
Hello, @TronShop,

We hope this message finds you well. To address the issue you are experiencing, we kindly ask that you implement the following solution:

Please navigate to the Xstore >> Theme Options >> Theme Custom CSS section of your website’s admin panel. Once there, copy and paste the CSS code provided below. After applying the code, ensure that you clear your web browser’s cache before revisiting your site to see the changes take effect.
```
.woocommerce-cart .coupon input[type=submit] {
    font-size: var(--content-zoom) !important;
    width: 65px !important;
}
.woocommerce-cart a.clear-cart.btn.bordered {
    font-size: var(--content-zoom) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    font-size: var(--content-zoom) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.return-shop {
    font-size: var(--content-zoom) !important;
}
.etheme-cart-checkout-accordion.active .accordion-title {
    font-size: var(--content-zoom) !important;
}
.etheme-checkout-multistep-footer-links a.etheme-checkout-footer-step {
    font-size: var(--content-zoom) !important;
}
.etheme-cart-checkout-accordion .accordion-title {
    font-size: var(--content-zoom) !important;
}
.woocommerce-checkout .template-content .et-advanced-label label[for] {
    font-size: 10px !important;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 10px !important;
}
```
We appreciate your cooperation and patience in this matter. Should you require any further assistance, please do not hesitate to reach out.

Warm regards,
The 8Theme Team
#383998 Copied
TronShop

Participant

February 21, 2024 at 18:18

Hi Tony,

I hope you’re doing well. It seems that the improvements we’ve made have given our shopping cart a better appearance. However, we’re encountering an issue with the cart button where coupons are applied.

We’ve noticed that the button is too short to display the complete content of the discount coupons, making it difficult for users to confirm each coupon. I’ve attached a screenshot for your reference. We would greatly appreciate it if you could take a look and assist us in resolving this issue.

Sending warm regards from our team, and looking forward to your prompt response!

Best regards,

Files is visible for topic creator and
support staff only.

#384264 Copied
Tony Rodriguez

Support staff

February 22, 2024 at 06:28
Hello, @TronShop,

Thank you for your response.

To address the concern you’ve raised, we kindly ask that you follow the steps outlined below to implement the necessary CSS code:

1. Navigate to the “XStore” section of your dashboard.
2. Proceed to “Theme Options”.
3. Locate and select “Theme Custom CSS”.
4. Within the “Global CSS” area, please copy and paste the following code:
```
.woocommerce-cart .coupon input[type=submit] {
    width: unset !important;
}
```
After applying the code, you should notice changes that reflect the example provided here: https://ibb.co/p0WMNyM

Should you require any further assistance or have additional questions, please do not hesitate to reach out.

Best Regards,
The 8Theme Team
#384293 Copied
Tagged: cart adjustment, checkout section, professional help, size adjustment, theme assistance, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)