Friday, November 17, 2017

WooCommerce Checkout Template without table breaks JS functionality

Leave a Comment

I changed the frontend templates (override by copying the file(s) into my custom theme folder) of the cart and checkout page by replacing some table-row-columns-constructs with div containers in order to create a (in my opinion) clearer layout, also for handling responsive layout changes.

It seems, the Wordpress hook/action woocommerce_checkout_order_review triggered from the template checkout/form-checkout.php template uses the code from cart/cart-shipping.php which is fine, because ist keeps the list containing the choosable shipping methods consistant on both pages.

A 'critical' change was: removing the td and th tags, and replacing <tr class="shipping"> with <div class="shipping"> in cart/cart-shipping.php.

This leads to the problem:

Clicking a list item of the shipping_methods ul triggers the events update_checkout and updated_checkout, which (i think) are responsible for updating the cart/chekout page. With my changed HTML templates things are not working as they should; with every click the whole ul gets replicated. I could not find any occurences of tr.shipping or .shipping in the woocommerce js code.

Why is changing the template structure breaking the jQuery code? And how can I achieve that change without breaking?

1 Answers

Answers 1

without more code it's very hard to say. Perhaps if you could provide a link I can assist more?

Going blind, it sounds like this is an issue tied to clicking...

I can confirm that in assets/js/admin/meta-boxes-order.js there are several references to tr.shipping from line 250-251 and lines 541, 786 and 874. It will likely be these lines that are causing the issue.

It's kind of hackish what you are trying to do...and without being able to test it's hard to say or confirm, but try duplicating those concerned functions but only call it on your div.shipping

See where that nets you out.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment