Button Animation On Cart Page - by TFS - on WordPress WooCommerce support

This topic has 7 replies, 2 voices, and was last updated 1 years, 7 months ago ago by Tony Rodriguez

  • Avatar: TFS
    TFS
    Participant
    November 26, 2022 at 04:22

    Hello,

    On the cart page, I have chosen the “classic layout”

    When I choose the “multi step layout”, the “PROCEED TO CHECKOUT” button has an arrow and an animation. The arrow is already there automatically.

    Once the proceed to button is hovered over it shows a cool animation.

    Is it possible to provide the code for this so I can use this animation on the classic layout aswell?

    Thanks!

    Please, contact administrator
    for this information.
    6 Answers
    Avatar: TFS
    TFS
    Participant
    November 26, 2022 at 04:32

    I see this code when I view the source and think this can be it (or something close/similar);

    checkout-button button alt wc-forward wp-element-button
    Proceed to checkout
    et-icon et_b-icon et-right-arrow-2
    return-shop button btn bordered full-width

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 26, 2022 at 06:36

    Hello, @TFS,

    Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache,

    .woocommerce-cart a.checkout-button.button.alt.wc-forward.wp-element-button:after {
        content: "\e948" !important;
        font-family: xstore-icons !important;
        padding-left: 5px !important;
    }
    
    .woocommerce-cart a.checkout-button.button.alt.wc-forward.wp-element-button:hover:after {
        -webkit-animation: cart-checkout-steps-icon .4s forwards;
        animation: cart-checkout-steps-icon .4s forwards;
    }

    Please note that this animation will be a bit different than the MultiStep Layout as because in Multistep layout we have the icon set under div and that animation has been set on that div, but in your case (Classic Layout) there is no such div and classes so I have added that icon as after and that does not inherit that animation by default: https://postimg.cc/ftBWyJgV

    Thanks for your understanding.

    Regards 8Themes Team.

    Avatar: TFS
    TFS
    Participant
    November 26, 2022 at 07:15

    Hello Tony,

    Oh okay no problem, I understand that the multi step checkout will have different functions.

    The code works perfectly! Great animation and icon I appreciate your help on this!

    Just one more question, Can I also add something similar (animation) on the “continue shopping” button but would have an icon of a shopping cart instead of an arrow?

    Thanks once again for the amazing support!

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 26, 2022 at 07:32

    Hello, @TFS,

    1. You’re Most Welcome!!

    2. Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache,

    .woocommerce-cart a.return-shop.button.btn.bordered.full-width:after {
        content: "\e90c" !important;
        font-family: xstore-icons !important;
        padding-left: 5px !important;
    }
    .woocommerce-cart a.return-shop.button.btn.bordered.full-width:hover::after {
        margin-left: 5px !important;
    }

    Regards 8Themes Team.

    Avatar: TFS
    TFS
    Participant
    November 26, 2022 at 07:51

    Hello Tony,

    Thanks for both these codes.
    The animations looks very professional and make the page standout!

    Thanks! x100

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 26, 2022 at 07:57

    Hello, @TFS,

    Sounds Great! that your issue has been solved.

    Thanks for contacting us.
    Have a great day πŸ™‚

    Topic Closed!
    Regards 8Themes Team.

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

The issue related to '‘Button Animation On Cart Page’' has been successfully resolved, and the topic is now closed for further responses

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