[Resolved] Optimized WooCommerce Checkout

[David]

It needs to be the URL for the checkout page.
As i said though i am not sure it will work – and would require custom development if it fails to.

[Pedro]

Hello david! We have advanced quite a lot to this point.

Is there anything I can do to make the apply coupon button work?

It would really help a lot 🙁

[David]

We can try adding the actual Woocommerce template, so edit your Hook, remove the HTML PHP code, leave everything else the same, and add this:

<form class="checkout_coupon woocommerce-form-coupon" method="post" style="display:none">

	<p><?php esc_html_e( 'If you have a coupon code, please apply it below.', 'woocommerce' ); ?></p>

	<p class="form-row form-row-first">
		<input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" id="coupon_code" value="" />
	</p>

	<p class="form-row form-row-last">
		<button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_html_e( 'Apply coupon', 'woocommerce' ); ?></button>
	</p>

	<div class="clear"></div>
</form>

[Pedro]

David, I have done it but the same problem follows 🙁

Thank you very much for your help

[David]

I think the issue is because it is inside the checkout form, so one button triggers the main completion button. You may want to ask on one of the Woo forums on how to create a new checkout template to add the form inside it.

[Pedro]

Hello David! I think I found a better option and that we tried before.

Since the coupon field could not be placed as desired, we can do so:

1. Move the coupon field below the order notes field. (with a horizontal separation line)

2. Remove the default WooCommerce style (the blue block) and leave only the text: “Have a coupon? Click here to enter your code”

Here is a reference image: https://mega.nz/#!f50SRQDA!9ShMsAJQiJa_VgUpHqqrZ8doHLigBe6Y8kF9r9FpqgE

Another thing I want to do is show the login for customers with an account.

This one would show up at the top as it does by default, however I would also like to apply the same coupon field style.

No blue block and only text.

Here a reference image: https://mega.nz/#!WgsggapB!cAPvsS1GUpAVZWe78-jWXYav7vgu9S00Re9I6HDPML8

Note: The images I am showing are from the Shoptimizer theme, here the link: https://themedemo.commercegurus.com/shoptimizer/

Thank you!!

[Tom]

When it comes to moving the field, maybe this will help?: https://stackoverflow.com/a/37162146

Removing the blue background can be done with this CSS:

.woocommerce-form-coupon-toggle .woocommerce-info {
    background: #fff;
    color: #000;
    border-left: 0;
    padding: 0;
}

.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a:hover,
.woocommerce-form-coupon-toggle .woocommerce-info a:focus {
    background: #fff;
    color: #000;
}

[Pedro]

Hello Tom! It worked perfectly.

Is there any way that the link (Click here to enter your code) looks like a general link to my site?

I mean that it is not in bold and that the color is blue, that when clicking it turns black.

As a link on the site normally does.

[Pedro]

It would also be necessary to add the horizontal line that goes before the coupon field.

As I show in the screenshot.

[Pedro]

I just enabled the check-in field and I realized that the blue field is still showing for that field.

Can you make the same change for this field?

Thank you!

[Pedro]

Tom?

[Tom]

Try this instead:

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
    background: #fff;
    color: #000;
    border-left: 0;
    padding: 0;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.woocommerce-form-login-toggle .woocommerce-info {
    border-top: 0;
    padding-top: 0;
    text-align: center;
}

.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a:hover,
.woocommerce-form-coupon-toggle .woocommerce-info a:focus,
.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a:hover,
.woocommerce-form-login-toggle .woocommerce-info a:focus {
    color: #0066c0;
    font-weight: normal;
}

.woocommerce-form-coupon-toggle .woocommerce-info a:hover,
.woocommerce-form-coupon-toggle .woocommerce-info a:focus,
.woocommerce-form-login-toggle .woocommerce-info a:hover,
.woocommerce-form-login-toggle .woocommerce-info a:focus {
    color: #000;
}

[Pedro]

Hello Tom! It worked perfect, just a few last changes:

– Center the login field as in the checkout of the theme shoptimizer

– That the links are NOT bold, and that when you hover and click, change color to black (as links do)

Thank you!

[Tom]

Can you try this updated CSS?: https://generatepress.com/forums/topic/optimized-woocommerce-checkout/page/3/#post-991209

[Pedro]

Incredible!! You are a God Tom !!

Thank you very much for the INCREDIBLE SUPPORT of you and your team.

[Author]

Posts