Return to previous page

Payment Getaway conflict with checkout page

This topic has 14 replies, 2 voices, and was last updated 1 years, 1 months ago ago by Rose Tyler

jimmy

Participant

August 31, 2023 at 14:42

Hi,

we are switching to a different payment processor called airwallex, however the plugin doesn’t seem to not compatible with your theme.

Once the proceed to checkout button is clicked, you will notice the whole layout is broken, here is the screenshot. https://ibb.co/ZXNbdxn

please take a look.

Thanks,
Jimmy

Please, contact administrator
for this information.

#366266 Copied Theme version: 9.1.13 WooCommerce version: 8.02

13 Answers

Rose Tyler

Support staff

August 31, 2023 at 14:56

Hello, Jimmy,

Thank you for contacting us and for using XStore.

Please record a video of what should we do to be able to see the problem on your site.

Note that we do not give a guarantee for full theme compatibility with all existing 3rd party plugins. Sometimes, not always, you need additionally customize the theme or plugin to make them work together. Unfortunately, it’s not possible for the author to make the theme compatible with all the existing plugins and additional customization is outside the scope of our basic support.

Also, provide FTP access, we will check what can be done to help you.
To create FTP access (FTP host, FTP username, FTP password, FTP port, FTP encryption) , please contact your hosting provider for assistance.

Kind Regards,
8theme team

#366269 Copied

jimmy

Participant

August 31, 2023 at 15:25

Hi, Here is the link for screen recording: https://www.awesomescreenshot.com/video/20389022?key=1b6c9ab73b54a559e9b956f0504fc36f

Please contact administrator
for this information.

#366274 Copied

Rose Tyler

Support staff

August 31, 2023 at 15:55

Hello, Jimmy,

We appreciate your prompt response.

Could you please check how it works when Advanced Layout is disabled in Theme Options > WooCommerce > Cart/Checkout Layout?

Kind Regards,
8theme team

#366281 Copied

jimmy

Participant

September 1, 2023 at 01:42

Hi Rose,

Same result, the layout issue only occurs after clicking “proceed to checkout” before that everything is fine.

Best,
Jimmy

#366309 Copied
Rose Tyler

Support staff

September 1, 2023 at 15:12
Hello, Jimmy,

1/ This page is broken because this one is not related to the theme and is styled directly from the Airwallex Online Payments Gateway plugin that is installed on your website.

2/ You have activated – the XStore Advanced Sticky Header plugin & activated the Header overlap option -> https://prnt.sc/-JFEYv9ONtKR that creates such broken design on the after-checkout page -> https://prnt.sc/JyJ7G7TXFylC

3/ We added the next custom CSS to your child-theme/style.css
```
@media only screen and (min-width: 993px) {
    .et_b_dt_header-overlap .airwallex-content  {
        padding-top: 12em;
    }
}
.airwallex-content {
    margin-bottom: 5vw;
}
```
4/ About the broken footer it seems that on plugin “checkout” pages Elementor styles/scripts are not loaded correctly so they should check it from their side.

We hope this information is helpful.

Kind Regards,
8theme team
#366366 Copied
jimmy

Participant

September 1, 2023 at 15:31

Thanks for your reply, I have disabled the header overlap, it looks better now.

However the mega menu is also not loading correctly, is it also because elementor styles/scripts are not loaded correctly?

#366369 Copied

Rose Tyler

Support staff

September 1, 2023 at 15:32

Hello, Jimmy,

“However the mega menu is also not loading correctly, is it also because elementor styles/scripts are not loaded correctly?” – yes.

Kind Regards,
8theme team

#366370 Copied

jimmy

Participant

October 12, 2023 at 07:28

Hi Rose,

The Airwallex team has updated their plugin, they now use a short code to resolve the issue.

However, the new payment page looks different than the other checkout page, is it possible to use the checkout page template for the payment page “header and footer” , and not a regular page template? Here is the payment page link: https://wordpress-1095720-3837730.cloudwaysapps.com/airwallex_payment_method_all/

Best,
Jimmy

#369960 Copied

Rose Tyler

Support staff

October 12, 2023 at 10:06

Hello, Jimmy,

Thank you for your response.

Sorry, but your request is a bit unclear to us. Please describe it and the desired result in more detail with screenshots or video.

Kind Regards,
8theme team

#369975 Copied

jimmy

Participant

October 12, 2023 at 13:44

Hi Rose,

Please choose “Pay with cards and more” payment method at checkout: https://ibb.co/x2swMLd. It will take you to a separate payment page: https://wordpress-1095720-3837730.cloudwaysapps.com/airwallex_payment_method_all/.

The payment page uses a regular page template: https://ibb.co/0Y2ngzD , instead of the checkout page template (with payment steps as header and payment method in the footer): https://wordpress-1095720-3837730.cloudwaysapps.com/checkout/

Is it possible to use the checkout page template (with payment steps as header and payment method in the footer) for the payment page also? Because the payment page should also belong to the checkout page.

Hope you understand what I mean.

Best,
Jimmy

#370001 Copied
Rose Tyler

Support staff

October 12, 2023 at 18:24
Hello, Jimmy,

Could you please, check the possible result → https://prnt.sc/wmFusOqz6WFi

We added for you next code to child-theme/functions.php
```
add_action('wp', function() {
    if ( class_exists('WooCommerce') ) {
    if ( get_the_ID() == get_option('airwallex_payment_method_all_page_id') || wc_post_content_has_shortcode( 'airwallex_payment_method_all' ) ) {
            set_query_var('et_is-checkout', true);
                set_query_var('et_is-cart-checkout-advanced', get_theme_mod('cart_checkout_advanced_layout', false));
            set_query_var( 'et_cart-checkout-layout', get_theme_mod( 'cart_checkout_layout_type', 'default' ) );
                set_query_var( 'et_cart-checkout-header-builder', get_theme_mod( 'cart_checkout_header_builder', false ) );
                set_query_var( 'et_cart-checkout-default-footer', get_theme_mod( 'cart_checkout_default_footer', false ) );
        }
    }
}, 50);
```
Kind Regards,
8theme team
#370024 Copied
jimmy

Participant

October 13, 2023 at 04:28

Thank you, is it possible to change the payment steps to “payment” too? https://ibb.co/nQjytsk

#370030 Copied
Rose Tyler

Support staff

October 16, 2023 at 07:16
Hello, Jimmy,

We have modified your previous code with the implementation few lines with custom script → https://prnt.sc/cx7-2NrsESm3
```
add_action('wp_footer', function() {
    echo '<script>
            jQuery(document).ready(function($) {
                $(document).find(".cart-checkout-nav-simple").find(".active").removeClass("active");
                $(document).find(".cart-checkout-nav-simple [data-step=payment]").addClass("active");
            })</script>';
    });
}
```
Result → https://prnt.sc/hD-1jeuxgRlw
Please be informed that this only changes after the page has been loaded.

Kind Regards,
8theme team
#370246 Copied
Tagged: checkout page conflict solution, payment gateway issue, woocommerce checkout conflict, woocommerce checkout troubleshooting, woocommerce payment fix, wordpress payment gateway errors, wordpress templates payment problem
Viewing 14 results - 1 through 14 (of 14 total)