WooCommerce shopping cart button alignment

[GeorgiaG]

I have been trying to make this change but am unable to find the right class to update. Do you have any tips? Details in the screenshot. Thank you.

[jade]

Hey Georgia,

Please try this code:

.woocommerce .wc-proceed-to-checkout {
    text-align: right;
}

.woocommerce .cart .actions .coupon {
    display: inline-block;
}

.woocommerce .cart .actions>input, 
.woocommerce .cart .actions>button {
    float: none;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

[GeorgiaG]

Jade, Thank you very much. The coupon is perfect!

The line below does not have an effect. I will add a link to the staging site. I have had so many successes in the browser window inspecting it but no success when adding it to the style sheet.
.woocommerce .wc-proceed-to-checkout {
text-align: right;
}

[jade]

Hi Georgia,

You have this code on the site which override the code I previously provided:

.woocommerce .wc-proceed-to-checkout {
    margin: 50px 0 0;
    text-align: center;
    width: 100%!important;
}

Please find that code in the Global CSS then change the text align to right.

Hope this helps.

[GeorgiaG]

Thank you. That is perfect!

[GeorgiaG]

@Jade is there a way to have the “add coupon code” button and the “update” button in the reverse order?

[ruenel]

Hey Georgia,

You can swap the button by modifying the buttons. Since the child theme is already set up, please add the following code in your child theme’s functions.php file

// Swap the Add To Cart and Apply Coupon buttons in the cart page
// =============================================================================
function swap_cart_coupon_buttons(){
 remove_action( 'woocommerce_cart_actions', 'x_woocommerce_cart_actions' );
 add_action( 'woocommerce_cart_coupon', 'x_woocommerce_cart_actions' );
}
add_action( 'after_setup_theme', 'swap_cart_coupon_buttons' );
// =============================================================================

We would love to know if this has worked for you. Thank you.

[GeorgiaG]

@RueNel

// Swap the Add To Cart and Apply Coupon buttons in the cart page
// =============================================================================
function swap_cart_coupon_buttons(){
remove_action( ‘woocommerce_cart_actions’, ‘x_woocommerce_cart_actions’ );
add_action( ‘woocommerce_cart_coupon’, ‘x_woocommerce_cart_actions’ );
}
add_action( ‘after_setup_theme’, ‘swap_cart_coupon_buttons’ );
// =============================================================================

Thank you. I think I mis-stated the issue. The coupon code entry, the coupon code submit, and the update button are now successfully showing as an inline block. But by making the buttons float to the left (by default they are at the right) they have flip-flopped. Now the coupon button is not next to the coupon entry field. I would like to maintain the current alignment but flip the buttons if possible to be coupon entry / coupon code submit / update submit. Is that possible? Perhaps the image will make it clearer.

[lely]

Hello @GeorgiaG,

Thank you for the clarification. What you are trying to achieve cannot be done with custom CSS only. This is because of the limitation of table structure of the cart page and also, of customization above resetting the float property. This can be achieve with some changes on cart template. You might need to create woocommerce folder inside your x-child folder. Then inside this woocommerce, create cart folder.

Open this file folder on your installation:
\wp-content\plugins\woocommerce\templates\cart

From that folder copy cart.php and paste this file on your child theme folder here:
\wp-content\themes\x-child\woocommerce\cart

Open the copied file. Around line 141 you can see this part:

					<button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>

					<?php do_action( 'woocommerce_cart_actions' ); ?>

Switch that line to this:

					<?php do_action( 'woocommerce_cart_actions' ); ?>

					<button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>

We just switch two lines to make sure the other button goes first. Note that any customization or issues from here would be outside the scope of our support. Thank you for understanding.

[GeorgiaG]

@Lely

<?php do_action( ‘woocommerce_cart_actions’ ); ?>

				<button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>

A byproduct of the great support you provide is that we always get an education here and I for one am so grateful. That worked perfectly. Thank you very much for your assistance. Warm regards, Georgia

[ruenel]

You are very much welcome Georgia!
We’re glad we were able to help you out.