Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #2550514
1. Fly-Cart Icon Z-Index value 2. Overlay delay
Closed

Comments

  • Brian started the conversation

    Hi there. 

    I have two short requests:


    1. Please can you provide the option for us to be able to control the z-index of the cart icon? 

    This is very important for me as I have certain side menus on my site blocked by the icon in the position I currently have it in. 

    Being able to control the z-index gives me much more flexibility. I understand the cart icon should always be present but I would like to have control over this element.

    2. When clicking on the cart icon, please can we have a way to control the the start of the overlay in milliseconds?

    At the moment it is immediate and not visually appealing. I would like to be able to smoothly fade in the overlay. (The current fade-out is actually fine, I would just like to control the fade-in time). 

    Thank you very much for an otherwise EXCELLENT plugin :-)



  •  767
    Janilyn replied

    Hi Brian,

    Thank you for contacting WPClever Support Forum. 

    We’ve received your ticket and assigned one of our developers to help you with that. 

    He’ll be looking into your question and responding with specific instructions as soon as possible. 

    Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.

    Best regards.

    Janilyn T. - WPClever Support Agent

  •  1,222
    Dustin replied

    Hi Brian,

    Sorry for the late reply!

    #1. To change the z-index of any element, please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS. Example for the cart bubble.

    .woofc-count {
        z-index: 123 !important;
    }

    #2. To change the fade-in time, please add below CSS code:

    .woofc-area {
        -webkit-transition: all 3s !important;
        -moz-transition: all 3s !important;
        -ms-transition: all 3s !important;
        -o-transition: all 3s !important;
        transition: all 3s !important;
    }

    Best regards,
    Dustin

  • Brian replied

    Hi Frankie.

    Thanks for the z-index CSS code. That worked perfectly!! Really appreciate that ;)

    Only problem is with the 2nd code for the fade in. Let me explain.

    When you click on your WPClever icon there are two actions that happen:

    1. The entire viewport fades to a dark transparent overlay

    2. The Cart Contents section slides in from the left or right hand side

    I would like to specifically control action no.1 i.e. to be able to control in milliseconds, how long it takes for the  transparent background overlay to fade in.

    The code you sent seems to control both actions simultaneously (1 & 2). Or do I need to independently adjust one of the 4 settings provided? If so, which one controls the overlay fade in?

    Thank you!

  •  1,222
    Dustin replied

    For the dark overlay layer, please use below CSS code:

    .woofc-overlay {
        -webkit-transition: opacity 0.1s !important;
        -moz-transition: opacity 0.1s !important;
        -ms-transition: opacity 0.1s !important;
        -o-transition: all 0.1s !important;
        transition: all 0.1s !important;
    }

    If you are satisfied with our plugin and support, please reward it with a full five-star ★★★★★ rating.
    https://wordpress.org/support/plugin/woo-fly-cart/reviews/?filter=5
    Thank you in advance! <3

    Best regards,
    Dustin

  • Brian replied

    Ok We're getting closer!! ;-)

    So that code changes the timing of the overlay Fade-Out transition

    I need to control the overlay Fade-in transition

    Any ideas?

    Thank you!

  •  1,222
    Dustin replied

    Please use below code:

    /* fade-in */
    body.woofc-body-show .woofc-overlay {
        -webkit-transition: opacity 0.1s !important;
        -moz-transition: opacity 0.1s !important;
        -ms-transition: opacity 0.1s !important;
        -o-transition: all 0.1s !important;
        transition: all 0.1s !important;
    }
    /* fade-out */
    .woofc-overlay {
        -webkit-transition: opacity 1s !important;
        -moz-transition: opacity 1s !important;
        -ms-transition: opacity 1s !important;
        -o-transition: all 1s !important;
        transition: all 1s !important;
    }

    Best regards,
    Dustin

  • Brian replied

    Hi Frankie.

    Thanks for that. For some reason I cannot get the fade-in to work. No matter what I do the fade-in time does not change. (Though I can control the fade-out times with no problems).

    Anyway, I want to say thank you so much for trying to help me. Don't worry about this any further. 

    Have a good day.

  •  1,222
    Dustin replied

    It works on our demo page, please watch the screen record video https://www.dropbox.com/s/c22lwlum4x4nwik/Screen%20Recording%202020-10-02%20at%2008.59.02.mov?dl=0

    Please send me your website link then I can check and fix it for you.

    -----

    If you are satisfied with our plugin and support, please reward it with a full five-star ★★★★★ rating.
    https://wordpress.org/support/plugin/woo-fly-cart/reviews/?filter=5
    Thank you in advance! <3

    Best regards,
    Dustin