Return to previous page

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

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

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.

#339683 Copied Theme version: 8.3.7

6 Answers

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

#339684 Copied
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.
#339693 Copied
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!

#339700 Copied
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.
#339706 Copied
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

#339711 Copied

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.

#339715 Copied
Tagged: animation, button, cart, page, templates, woocommerce, wordpress
Viewing 7 results - 1 through 7 (of 7 total)