Have 2 problems

Support
#1

Good morning,

1.- Im trying to change the css of this page. I need to change it to 2 columns. Also the left field width must to be the same that the label field width (email)

(I put the url in secure note)

2.- In the same url, quantity is under the product…i need to put it al the left of the price.

3.- A new one, sorry, how can i change background colour of the “producto and price” line

Thanks

#2

Hi @Almusan,

Thanks for writing in.

Little confuse of your concerns.

The URL you shared does not show what you have said. Would you mind sharing us a screenshot of what you want to achieve.

Thanks.

#3

Good morning Nico,

True, sorry is a checkout page, so you must to entry to this page and then click on the orange button i put the web down in a security note

#4

Hello There,

Thanks for providing the url.

1.) You can make use of this css code:

.woocommerce-checkout .woocommerce-billing-fields h3 {
    float: left;
    width: 45%;
    margin-right: 2%;
    margin-top: 26px !important;
}

2.) You can make use of this code:

.woocommerce-checkout .woocommerce .cart_item .quantity {
    float: right;
}

3.) And lastly, you can make use of this code:

table th, 
table td {
    border-top: 1px solid #e5e;
}

Feel free to change the color to the one the would fit for your design.

#5

2 is ok, but 1 and 3 no.

1.- I put an image with the columns like i would like.

3.- the area that i wanna change the color (grey paint)

#6

Hi there,

  • Please kindly keep the previously suggested code and add the CSS code below to X > Launch > Options > CSS:
.woocommerce-checkout #order_review_heading {
	float: right;
    width: 50%;
    margin-top: 0;
    padding: 14px 0;
}

.woocommerce-checkout #order_review {
	float: right;
    width: 50%;
}
  • Please kindly add the code below to X > Launch > Options > CSS, to change the background of the product and price sections:
.woocommerce-checkout .woocommerce-checkout-review-order-table thead tr,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
	background-color: #f2f2f2;
}

Please kindly consider that customizations like this are outside of our support policy and we gave you these tweaks to be extra helpful. For more customizations like this one, I suggest that you learn how you can find proper CSS selectors using the Google Chrome Developer Toolbar so that you can easily find the places you want to add changes.

Thank you.

#7

Thanks it works

#8

Glad to hear!