Moving the Shipping Rates in Woocommerce Checkout
We were initially tasked with a client’s request to have their Woocommerce checkout converted over to look like a Shopify style split checkout. As you may know, they are drastically different, and requires a bit of custom woocommerce development. There are many issues that need to be solved just on the functionality side. I won’t go into the full details of how I achieved the whole process, as it would take a long time. What I will go over in this post is what I considered to be one of the toughest parts of the process – moving the Shipping “selection” radio buttons to another location. During the process, I quickly discovered that Woocommerce does not like this, and you’ll also run into AJAX issues when the fragments refresh. I do know that the Woocommerce team is drastically changing their checkout process, so I should note that this was accomplished with the current latest versions of WordPress (4.5.3) and Woocommerce (2.6.4). Future versions may need modifications.
First, we’ll start by copying over review-order.php to our child theme. It can be found in the /plugins/woocommerce/templates/checkout folder. Copy that into your child theme at: childthemenamehere/woocommerce/checkout/review-order.php. This file contains code for the “Your Order” box. Since we’re moving the Shipping Options radio buttons, we need to remove them from here and add a simplified version that just shows a line for “Shipping” and the cost.
Now, we need to make a few changes to this file. For this, you’ll need to look around line 70 for:
if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) :
We’ll add the following code beneath that line:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <tr class="cart_review_totals_shipping"> | |
| <th><?php _e( 'Shipping', 'woocommerce' ); ?></th> | |
| <td><span class="shipping-amount"><?php echo WC()->cart->get_cart_shipping_total(); ?></span></td> | |
| </tr> |
A few lines below, you should see a line that needs to be commented out:
wc_cart_totals_shipping_html();
Next, we’ll be creating a new file in childthemenamehere/woocommerce/checkout/ named shipping-order-review.php. This file will serve as the replacement for the shipping functionality that we moved in the first step. This is also needed for the fragments to behave properly when AJAX is run. We’ll be hooking into this file shortly. Drop the contents below in there.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| if ( ! defined( 'ABSPATH' ) ) { | |
| exit; | |
| } | |
| ?> | |
| <table class="shop_table websites-depot-checkout-review-shipping-table"> | |
| <?php do_action( 'woocommerce_review_order_before_shipping' ); ?> | |
| <?php wc_cart_totals_shipping_html(); ?> | |
| <?php do_action( 'woocommerce_review_order_after_shipping' ); ?> | |
| </table> |
Lastly, we need to add some functions to our functions.php file in order to tie it all together. In my code, I have attached the new table for the Shipping Options above the customer information. This is strictly to show that it has been moved completely away from the “Your Order” box. Feel free to look at the code and drop it wherever it suits you best. I have purposely added the text “My Shipping Stuff Here”. This is as a placeholder until you get everything up and running. Once you’re good, feel free to remove that text.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // hook into the fragments in AJAX and add our new table to the group | |
| add_filter('woocommerce_update_order_review_fragments', 'websites_depot_order_fragments_split_shipping', 10, 1); | |
| function websites_depot_order_fragments_split_shipping($order_fragments) { | |
| ob_start(); | |
| websites_depot_woocommerce_order_review_shipping_split(); | |
| $websites_depot_woocommerce_order_review_shipping_split = ob_get_clean(); | |
| $order_fragments['.websites-depot-checkout-review-shipping-table'] = $websites_depot_woocommerce_order_review_shipping_split; | |
| return $order_fragments; | |
| } | |
| // We'll get the template that just has the shipping options that we need for the new table | |
| function websites_depot_woocommerce_order_review_shipping_split( $deprecated = false ) { | |
| wc_get_template( 'checkout/shipping-order-review.php', array( 'checkout' => WC()->checkout() ) ); | |
| } | |
| // Hook the new table in before the customer details - you can move this anywhere you'd like. Dropping the html into the checkout template files should work too. | |
| add_action('woocommerce_checkout_before_customer_details', 'websites_depot_move_new_shipping_table', 5); | |
| function websites_depot_move_new_shipping_table() { | |
| echo '<table class="shop_table websites-depot-checkout-review-shipping-table">My Shipping Stuff Here</table>'; | |
| } |
Below are some screenshots of what we accomplished for our client using this method, as well as a bit more custom modification on our part. Got some custom e-commerce development needs? We love all things E-commerce, so give us a call at (323) 912-1125.
