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

Okay
  Public Ticket #3613110
Move position of the Bubble in Fly Cart
Open

Comments

  •  1
    Sourav started the conversation

    Hi, In my website I have currently set the Fly Cart Bubble to Top Right. But I want to move it a bit more to the right place where I want. How can I do that?

  •  1,222
    Dustin replied

    Hi Sourav,

    Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    .woofc-count.woofc-count-bottom-right {
        right: 100px;
    }

    You can change 100px to another number as you want.

    Best regards,
    Dustin

  •  1
    Sourav replied

    Thank you Dustin,

    I am also looking to style it in a way which is closer to the other button on the website. I am majorly looking to adjust the size of the button, and the box shadow during the default state and in the hover state. How can I achieve that?

    Best,

    Sourav

  •  1,222
    Dustin replied

    It needs the knowledge about CSS code. Each element on Fly Cart has a different selector, which you can use to write CSS code. For example, the Checkout button here:

    9170814042.png

    You can write CSS code:

    .woofc-action-checkout {
        background-color: green !important;
        border-color: green !important;
        color: #fff !important;
    }

    And the result:

    1205877948.png

    Best regards,
    Dustin

  •  1
    Sourav replied

    Thank you, Dustin,

    That helped. I am also looking to reduce the size of the bubble uniformly. Is there a particular target that will target both the count and the button parts? Or do I need to handle them separately?

    Best,

    Sourav

  •  1,222
    Dustin replied

    For the bubble, please use the CSS structure below:

    .woofc-count {
        /* bubble */
        width: 48px;
        height: 48px;
        line-height: 48px;
    }
    .woofc-count i {
        /* icon */
        line-height: 48px;
    }
    .woofc-count span {
        /* counter */
        width: 20px;
        height: 20px;
        line-height: 20px;
    }

    Best regards,
    Dustin