Docs

[muckymonsterclub]

Hi there, I hope you can help.

I have recently gone live with my site http://www.Muckymonsterclub.com everything is going great and I am just in the process of checking out your new plugin uber menu.

The only thing that i’ve had abit of negative feedback is from the checkout page and how un user friendly it is. dont get me wrong it is functional and has all the fields i need but it seems alittle less friendly on the eye than the rest of the site. I have searched google for checkout pages and this one looks nice and neat and easy to navigate:

http://www.socialambush.com/sa-files/uploads/2015/12/distraction-free-checkout-650×879.jpg

My question is it possible to use another themes checkout page within the renew template that im using on my site? or at least make it look like the above example?

many thanks as always
tom

[Rupok]

Hi Tom,

Thanks for your feedback. We have four different stacks with different layouts in a single theme that you can choose from. All of them are designed by top class UX expert to have better user-friendly design. You can also use some custom CSS to tweak some design or Child Theme to change the layout completely.

Hope this makes sense.

[muckymonsterclub]

Hi,

Thanks for getting back to me.

I have tried all four stacks and I think renew is best suited to our one page design for the home page but would it be possible to use a different stack on another page for example, renew stack for the home page and icon for the checkout page?

I would still like to try to get all the form fields on one page but split into 2 columns (billing details in one and your order in another) as this would probably create more leads, would this be achievable with CSS or is it possible to use a child theme for just the checkout page?

Many thanks
tom

[muckymonsterclub]

After using your awesome forum i found this CSS:

@media (min-width: 980px) {
form.checkout.woocommerce-checkout #customer_details {
width: 45%;
float: left;
margin: 0 2.5%;
}

form.checkout.woocommerce-checkout #customer_details #order_review_heading, form.checkout.woocommerce-checkout #order_review {
width: 45%;
float: right;
margin: 0 2.5%;
}
}

which worked a treat,(probs, should of done alittle more digging before posting) but there are some alinement issues with the “your order” heading and the “how did you hear about us” I would also like to put a 2.5 dashed line around the second column could you point me in the right direction?

cheers
tom

[Rupok]

Hi Tom,

Let’s add this as well :

.woocommerce-checkout-review-order {
  border: 2px dotted #7a7a7a;
  padding: 15px;
}

Cheers!

[muckymonsterclub]

Thanks for the CSS,

There is still the issue of the alinement on “how did you hear about us” I think it has something to do with woo commerce and how it processes a returning customer, because when I test the site with adding a product to the checkout an “Existing Customer” option appears that isn’t in the customiser when applying the CSS, hope that makes sense,it did in my head;-)
Thanks
Tom

[Lely]

Hi Tom,

Are you referring to the asterisk after the text How did you hear about us going down on a new line? I did check and it happens because the font is too large to display all that text in one line. We can adjust the font by adding the following CSS:

.woocommerce-checkout label {
    font-size: 90%;
}

Hope this helps.

[muckymonsterclub]

thanks again for the code. Your knowledge is invaluable. I have moved the custom form fields to the bottom of the page to rectify the alinement in the billing section. But i would prefer the “your order” heading to be inline with the “billing details” and then the dashed box to be alined underneath the “you order” heading. Is there also a way i can make the book now button fullwidth of the dashed box?

many thanks
tom

[Christopher]

Hi there,

Please add this:

h3#order_review_heading {
    margin-top: 0;
    margin-bottom: 22px;
}
input#place_order {
    display: block;
    width: 100%;
}

Hope it helps.

[muckymonsterclub]

hi chris, worked a treat thanks,

ive just tried to aline the ‘Your Order” to the dashed box beneath it by editing your css, but it hasnt worked, could you steer me in the right direction please:

h3#order_review_heading {
margin-top: 0;
margin-right: 22px;
margin-bottom: 22px;
}

Would it be the padding i need to adjust and not the margin?
cheers
tom

[Christopher]

Hi there,

Please update your code to :

h3#order_review_heading {
    margin-top: 0;
    margin-bottom: 22px;
    overflow: hidden;
    padding-left: 22px;
}

Hope it helps.

[Author]

Posts