[Resolved] Optimized WooCommerce Checkout

[Tom]

Is the CSS live right now? I’m not seeing it.

[Pedro]

Hello Tom! Currently not because it was not visualizing well.

If you tell me to activate it now I will.

Is that the site is in production and I am having enough traffic.

[Pedro]

I have enabled it so you can see.

Please don’t delay haha

[Pedro]

Please, how can I disable the main menu icons in the mobile version?

[Tom]

It may be best to do these changes on a staging site if this one has traffic.

I just updated the CSS here: https://generatepress.com/forums/topic/optimized-woocommerce-checkout/#post-988372

[Pedro]

Hello Tom! Thank you very much for answering.

It worked perfectly, however is there any possibility that the title “Checkout” is aligned with the edge of the coupon field?

It seems to be very aligned to the right.

Thank you!!

[David]

Try this CSS:

.checkout-title {
    padding-right: 40px;
}
@media (max-width: 768px) {
    .checkout-title {
        padding-right: 20px;
    }
}

[Pedro]

Hello david! Thanks for answering.

I am not an expert in CSS, that code you gave me I added to the one Tom had given me and it looks like this:

.checkout-title {
    order: 10;
    line-height: 60px;
    color: #fff;
    font-size: 17px;
		padding-right: 40px;
}
@media (max-width: 768px) {
    .checkout-title {
        padding-right: 20px;
    }
}

It’s okay? Thank you!

[David]

Looks correct

[Pedro]

Hello david! Thank you very much, and the title was aligned. Now I just need to change the coupon field as I instructed Tom. Thank you!

[David]

So you want to move the coupon notice / toggle form from the top? If so try this filter:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form' );

Change: add_action( 'woocommerce_after_checkout_form' for the hook you want to place it in – which you can find here:

https://businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

[Pedro]

Hello david! What I want is to move the coupon field and make it look like in this image:

https://mega.nz/#!GtNWzCiA!ZEg2rpp9FVTpJ9s4bvEhxcsuy_xQWTg-iwaKpkhhUaQ

[David]

This really is custom development – not sure if this method will still work but you can try:

1. First off use the remove_action i provided earlier to remove the current form.

2. Create a new Hook Element and add this:

<?php if ( wc_coupons_enabled() ) { ?>
 <div class="custom-coupon">
  <form action="http://example.com/cart/" method="post">
   <label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label> 
   <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> 
   <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
   </form>
  <?php do_action( 'woocommerce_cart_coupon' ); ?>
 </div>
<?php } ?>

2.1 Select the: woocommerce_review_order_before_payment Hook.
2.2 Check execute PHP
2.3 Set your Display Rules to Pages > Checkout
2.4 Note – in the above code you will need to change the form action URL

3. Add some CSS to hide the label and make them into a row.

.custom-coupon {
    display: flex;
    margin: 20px 0;
}

.custom-coupon label {
    display: none;
}

I am not sure if this method will work. If it doesn’t then only workaround is to edit child theme copies of woo – but as i said this is custom development and out of our scope.

[Pedro]

Hello david!

I have added all the codes and apparently it works.

However, when you click on the “Apply coupon” button, what you do is pay the order.

[Pedro]

2.4 Note – in the above code you will need to change the form action URL

I think it may be because of this, what URL should I place?

[Author]

Posts