[Resolved] Checkout Re-design Of Woo Add-On

[Dani]

Hello Tom & Leo,

I’ve been using GP for some time now and still very happy with your theme and the great support I see in this forum. In the past I had some problems with the woo add-on and caching, so I just styled my shop with child theme css and functions.

A couple of days ago I gave it another go and activate the woo add-on. It saves me a lot of extra child theme adjustment and I really like the overall style, but I’m having problems with the checkout. Without the add-on activated my checkout is the way it’s supposed to be, it looks like the cart page, with the add-on activated the alignment is not very customer friendly, especially the “cart total” block. I attach screen shots to hopefully make more clear what I’m trying to explain:

https://shop.adorablepaws.de/wp-content/uploads/2019/07/cart.png
https://shop.adorablepaws.de/wp-content/uploads/2019/07/Checkout.png

I need to have the checkout full width, because of the cart content being a lot. We are required in Germany to show all product attributes in the cart, which can make the cart content really long. So 100 % width is a must. If I now change the alignment of “cart total” via css to for example “align right”, of course the cart content aligns right, too. 🙁

Is there are way to completely “deactive” the way the add-on re-designs the checkout?

Kind regards

Dani

[Tom]

Hi there,

There isn’t a way to disable the checkout CSS easily, but we should be able to adjust that specific part to bring them closer together.

It looks like your checkout has steps – is that being done with a plugin? Is the area I’m looking for in the second step?

Let me know 🙂

[Dani]

Hi Tom,

yes, it’s a three step checkout coming fromthe GermanizedPro plugin. A plugin that is necessary to meet all the complicated German laws. With all this GDPR in Europe, now the attributes in checkout and much more it’s becoming very difficult to run an online store.

The part with the cart total is the third (last) step, but even if I disable the three step checkout and have a one page checkout (full width, too, due to the product attributes) the alignment looks the same.

The German plugin has a tick box to prevent a theme to redesign the checkout or upload my own style checkout as a file form-checkout.php to the child theme, but I believe, since your redesign comes from the GP pro plugin not your theme, the tick box doesn’t work. And I couldn’t find any file called form-checkout for me to maybe amend in your plugin.

[Tom]

I wonder if this would work:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_checkout' ) && is_checkout() ) {
        wp_dequeue_style( 'generate-woocommerce' );
        wp_dequeue_style( 'generate-woocommerce-mobile' );
    }
}, 150 );

Let me know 🙂

[Dani]

Good Morning,

yes! That did the trick. Now I can tweak the rest with some css 🙂

Thank you so much Tom!!!

Rgds

Dani

[Dani]

Sorry Tom, it’s not working like I want it to. 🙁

It’s perfect on dektop view, but not mobile. Dequeuing the GP style influences the cart in the sub menu. Instead of the little icon (basket) it shows the number of products. For example if I have 3 products in cart with a total of 30 Euro, it shows just the number 330.

I hide the submenu with
.woocommerce-checkout .secondary-navigation { display: none;}
and made a few other css changes like button colours, but all these changes are not showing on mobile view.

Is it possible to just have “my chechout” on desktop view and the GP Woo add-on checkout on mobile view? I tried by deleting the wp_dequeue_style( ‘generate-woocommerce-mobile’ ); of your code, but it’s not working. 🙁

[Dani]

Hello Tom,

I found another solution. I left the GP re-designed checkout active and just did some css changes like paddings and table colours. I think now my customers will see it all better on their desktop view now. I have to compromise somewhere 🙂

Thanks for your help.

[Tom]

Awesome, glad you found a solution 🙂

[Author]

Posts