Checkout Settings with Elelemntor

Public Ticket #26614

Checkout Settings with Elelemntor

Conversation thread

LillaGreen replied

2 years ago

Customer Reply

Thank you :) Have a good day

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

Please add this CSS code to your site:

#wcj-currency-select {
    background: #fff;
    border: 0;
    padding: 15px 30px;
}

Regards,
PenciDesign.

LillaGreen replied

2 years ago

Customer Reply

Thank you for the code, but the thing that changes is the distance between "Coupon" and the "Snaptcha". Is there a way i can put more "white" space under the total / above the Euro switcher? Thank you in advance!

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

Please navigate to Appearance → Customize → Custom CSS, and then insert the following custom CSS code:

.e-checkout__order_review-2 {
  margin-top: 30px;
}

Regards,
PenciDesign.

LillaGreen replied

2 years ago

Customer Reply

it worked out, Thank you so much!

and is there a way to increase the free space after the Total?

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

Please navigate to Appearance → Customize → Custom CSS, and then insert the following custom CSS code:

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #000 transparent transparent transparent !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-checkout-review-order-inner {
  padding: 0;
}

Regards,
PenciDesign.

LillaGreen started the conversation

2 years ago

Conversation Start

How can I do this in the checkout built with Elelementor? It seems that this widget is broke - when I edit in elementor "Your Order" section, the only thing that changes is the section for Coupon Codes, which is under it..

1) restore the arrow for countries in Elementor?

2) Reduce the empty space/margin - Make the text in the "Your order" section wider or reduce the empty space on the both sides - now it is still very squished - especially on mobile! How can I change it for desktop and mobile so that the content in this section of the checkout appears wider on desktop and mobile? The same for Payment section (everything on the left side)

3) the first image is from a desktop, second is from a mobile:

Thank you!

Want to join this conversation or access attachments? Sign in first.