Return to previous page

Off-Canvas Login Overlap Issue on Quick Order Page

This topic has 7 replies, 2 voices, and was last updated 3 days, 17 hours ago ago by khurram virk

  • Avatar: khurram virk
    khurram virk
    Participant
    May 17, 2025 at 18:59

    Dear Sir,

    Good day to you!

    I’ve created a “Quick Order” page to make it easier for customers to add products from a single page. On this page, I’ve set a condition where the product prices are hidden unless the user is logged in. When a user clicks the “Login to view price” button, an off-canvas login form appears on the right side of the screen.

    However, the issue is that the product details pop-up (quick view or product info) overlaps the off-canvas login panel, which causes the login form to be hidden behind the product pop-up.

    Here’s a screenshot for reference:
    🔗 https://snipboard.io/hIH9mi.jpg

    Could you please assist me how to resolve this problem?

    Thank you.

    #444691 Copied Theme version: 9.4.13
    6 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    May 19, 2025 at 07:31

    Hi @khurram virk,

    Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
.et_element.et_b_header-account.flex.align-items-center.login-link.account-type1.et-content-right.et-off-canvas {
    z-index: 999999;
}

    Kind regards,
    The 8Theme Team

    #444735 Copied
    Avatar: khurram virk
    khurram virk
    Participant
    May 26, 2025 at 09:55

    Thank you for your quick response.

    I have added the custom CSS code you provided under XStore > Theme Options > Theme Custom CSS > Global CSS, but unfortunately, the off-canvas login panel is still being overlapped by the product detail pop-up.

    Here’s a screenshot for your reference:
    🔗 https://snipboard.io/2l65pM.jpg

    Could you please advise further on how to fix this issue?

    Thank you.

    #445533 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    May 26, 2025 at 15:51

    Dear @Khurram Virk,

    Thank you for reaching out.
    Could you kindly provide us with the URL shown in your screenshot?

    We appreciate your cooperation.

    Best regards,
    The 8Theme Team

    #445589 Copied
    Avatar: khurram virk
    khurram virk
    Participant
    May 26, 2025 at 18:44

    Here is the URL shown in the screenshot for your reference:
    🔗 https://safeandsecureksa.com/quick-order/

    Looking forward to your further assistance.

    Thank you.

    #445598 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    May 27, 2025 at 08:40

    Dear @Khurram Virk,

    We hope this message finds you well.

    We have observed that the z-index value of the product table modal is set too high(https://prnt.sc/uQEefvCMrgR8), and additionally, the modal is rendered outside the theme’s template container. As a result, simply adjusting the z-index does not resolve the issue effectively.

    As an alternative, we recommend implementing the following custom JavaScript code. Please add this code to the functions.php file located in your child theme:

    
add_action('wp_footer', 'n2t_wp_footer', 100);
function n2t_wp_footer(){
	?>
    <script>
        jQuery( function($){
            $(document).on('click touchend', 'a.login-to-buy-product', function(){
                $('.wcpt-close-modal').click();
            })
        });
    </script>
	<?php
}

    We hope this solution proves helpful. Should you have any further questions or require additional assistance, please do not hesitate to reach out.

    Best regards,
    The 8Theme Team

    #445636 Copied
    Avatar: khurram virk
    khurram virk
    Participant
    June 3, 2025 at 14:30

    Thanks for the support! My topic “Off-Canvas Login Overlap Issue on Quick Order Page” has been successfully resolved.

    #446325 Copied
  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Off-Canvas Login Overlap Issue on Quick Order Page’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Onepage Store – WooCommerce Theme
lazy-placeholder
Minimal Fashion 03 Store – WordPress WooCommerce Theme
lazy-placeholder
Digital Marketing – WordPress WooCommerce Theme
lazy-placeholder
Cocktails Store – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Hosting Store – WordPress WooCommerce Theme
lazy-placeholder
Engineer Store – WordPress WooCommerce Theme
lazy-placeholder
Bakery Store – WordPress WooCommerce Theme
lazy-placeholder
Jewelry Store – WordPress WooCommerce Theme

See All Templates

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