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

  • Avatar: jimmy
    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.
    13 Answers
    Avatar: Rose Tyler
    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

    Avatar: jimmy
    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.
    Avatar: Rose Tyler
    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

    Avatar: jimmy
    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

    Avatar: Rose Tyler
    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

    Avatar: jimmy
    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?

    Avatar: Rose Tyler
    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

    Avatar: jimmy
    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

    Avatar: Rose Tyler
    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

    Avatar: jimmy
    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

    Avatar: Rose Tyler
    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

    Avatar: jimmy
    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

    Avatar: Rose Tyler
    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

  • Viewing 14 results - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.