Return to previous page

Small design issue with WooCommerce Onepage-Checkout plugin?

This topic has 11 replies, 2 voices, and was last updated 9 years, 6 months ago ago by Eva Kemp

groubee

Participant

August 24, 2015 at 00:52

Hi

I hope you can help with a small design issue with the WooCommerce OnePage-Checkout plugin.

Its installed on our testserver and we found a little issue with the right box, second line… its not aligned, see image: https://www.dropbox.com/s/5m6uofjvay9blri/onepage-checkout.jpg?dl=0 and see the site here: http://dev-smooff.serv10.powerhosting.dk/shop/smoof/

Can you help me fix this?

Best regards
Tonny

#81805 Copied Theme version: newest version WooCommerce version: newest version

10 Answers
Eva Kemp

Participant

August 24, 2015 at 09:03
Hello,

Try to use this code in custom.css:

.opc_order_review .product-details { min-width: 60%; }

Regards,
Eva Kemp.
#81834 Copied
groubee

Participant

August 24, 2015 at 12:57

Maybe 40% works in Chrome? but not 60%… still it looks like something is really wrong here with the design… its not align, it does not look good. See my images..

This is with 20% – https://www.dropbox.com/s/lft3dz53ewjhmkv/onepage-checkout-v1.jpg?dl=0
This is made in Photoshop 😉 and would be ok: https://www.dropbox.com/s/h4jt95nwuvoiy9m/onepage-checkout-v2.jpg?dl=0

this is how it should be: https://www.dropbox.com/s/gk5kkqwwp3c1nii/onepage-checkout-v3.jpg?dl=0

Regards
Tonny

#81919 Copied

groubee

Participant

August 24, 2015 at 14:01

Hi again 🙂

In the english version there is not space enough to show “QUANTITY” so why not just show “Qty”
See: https://www.dropbox.com/s/5tohguce6egubvw/onepage-checkout-english.jpg?dl=0

Is it normal that there is a line inside the green box? would it not look better without the line?
See: https://www.dropbox.com/s/oab22mosdkzqgao/onepage-checkout-remove-line.jpg?dl=0

Regards
Tonny

#81927 Copied

Eva Kemp

Participant

August 25, 2015 at 12:49

Hello,

Did you deactivated the plugin? I don’t see the content that had been before:
http://storage1.static.itmages.com/i/15/0825/h_1440503325_3084685_b0e00a8cc5.png

Regards,
Eva Kemp.

#82168 Copied

groubee

Participant

August 25, 2015 at 14:52

Hi

Its on the dev site here: http://dev-smooff.serv10.powerhosting.dk/shop/smoof/

regards
Tonny

#82217 Copied
Eva Kemp

Participant

August 26, 2015 at 10:37
Hello,

Try to use this css code:

.opc_order_review .product-quantity { margin-right: 40px; } .opc_order_review .product-details, #order_review .product-remove { padding-top: 10px; } .opc_order_review td.product-total { padding-top: 30px; }

Regards,
Eva Kemp.
#82357 Copied
groubee

Participant

August 26, 2015 at 11:11

This works ok Eva:

.opc_order_review .product-details {
min-width: 40%;
}
.opc_order_review .product-quantity {
margin-right: 0px;
}
.opc_order_review .product-details, #order_review .product-remove {
padding-top: 10px;
}
.opc_order_review td.product-total {
padding-top: 30px;
}

http://dev-smooff.serv10.powerhosting.dk/shop/smoof/

But I think there need to be more space between the product name and the countbox? see https://www.dropbox.com/s/yta945a95abtnbl/more%20space%20between%20product%20and%20box.png?dl=0

in the mobile version is still looks bad, see https://www.dropbox.com/s/f1qzmdzvh79cxj3/not%20align%20on%20mobile.png?dl=0

______________________________________

Is it normal that there is a line inside the green box? would it not look better without the line?
See: https://www.dropbox.com/s/oab22mosdkzqgao/onepage-checkout-remove-line.jpg?dl=0

I love your support Eva!! 🙂

Tonny

#82377 Copied
Eva Kemp

Participant

August 26, 2015 at 12:43
Hello,

To remove the line use this code in custom.css:

.step-title::after { background: transparent none repeat scroll 0% 0%; }

As I see the space is normal:
http://storage2.static.itmages.com/i/15/0826/h_1440589316_1980516_07316f72a4.png
The same is on mobile devices.
What browser are you checking in?

Regards,
Eva Kemp.
#82403 Copied
groubee

Participant

August 26, 2015 at 12:52

Google Chrome Version 44.0.2403.157 (64-bit) what browser do you see that in?

#82415 Copied
Eva Kemp

Participant

August 26, 2015 at 14:03
Hello,

I checked the site in Firefox browser.
Try to use this code in custom.css to align the form:

#order_review .opc_cart_item td.product-name { width: 55%; } @media (max-width: 480px) { #order_review .opc_cart_item td.product-name { width: 60%; }}

Regards,
Eva Kemp.
#82441 Copied
Tagged: issue, onepage-checkout, plugin, small design, templates, woocommerce, wordpress
Viewing 11 results - 1 through 11 (of 11 total)