Re: How to add hover effect to "Add To Cart" becoming Cart icon

Solved

How to add hover effect to "Add To Cart" becoming Cart icon

RowabiCo
Excursionist
27 1 11

Howdy everyone, 

 

I'm trying to add the hover effect to my "Add To Cart" button to become the cart icon as we hover the mouse over. I would really appreciate it if anyone could help us! Will be a great add-on to the community!

 

Our website is https://www.rowabi.com/ or https://wabi-element.myshopify.com/

 

Thanks in advance fellas!

 

Before hover:

RowabiCo_0-1650316002433.png

 After hovering the mouse over:

RowabiCo_1-1650316015673.png

 

 

 

Accepted Solutions (3)
KetanKumar
Shopify Partner
37142 3648 12063

This is an accepted solution.

@RowabiCo 

oh sorry for that can you remove last one code and update this 

.paymentButtonsWrapper #AddToCart::before {position: absolute;font-family: 'fontello';width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;}
.paymentButtonsWrapper #AddToCart {position: relative;}
.paymentButtonsWrapper #AddToCart:hover::before {opacity: 1;transform: scale(1);}
.paymentButtonsWrapper #AddToCart.add-to-cart--secondary:not(.disabled):hover span {display: none;}

look at this code work

KetanKumar_0-1650317936253.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

RowabiCo
Excursionist
27 1 11

This is an accepted solution.

To help understand the solution, I just re-format it: 

.paymentButtonsWrapper #AddToCart::before {
    position: absolute;
    font-family: 'fontello';
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 12px;
    content: '\e802';
    opacity: 0;
    transform: scale(0);
    transition: all 0.9s;
}

.paymentButtonsWrapper #AddToCart {
    position: relative;
}

.paymentButtonsWrapper #AddToCart:hover::before {
    opacity: 1;
    transform: scale(1);
}

.paymentButtonsWrapper #AddToCart.add-to-cart--secondary:not(.disabled):hover span {
    display: none;
}

View solution in original post

KetanKumar
Shopify Partner
37142 3648 12063

This is an accepted solution.

@RowabiCo 

can you please try this code

button.quick-add-button::before {position: absolute;width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;font-family: 'fontello';color: #000;}
button.quick-add-button {position: relative;}
button.quick-add-button:hover::before {opacity: 1;transform: scale(1);}
button.quick-add-button:hover {color: #eeeeee !important;border-color: #000 !important;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 13 (13)

KetanKumar
Shopify Partner
37142 3648 12063

@RowabiCo 

sorry for that issue can you try this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.min.css ->paste below code at the bottom of the file.

.paymentButtonsWrapper #AddToCart::before {position: absolute;content: "";width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;}
.paymentButtonsWrapper #AddToCart {position: relative;}
.paymentButtonsWrapper #AddToCart:hover::before {}
.paymentButtonsWrapper #AddToCart:hover::before {opacity: 1;transform: scale(1);}
.paymentButtonsWrapper #AddToCart.add-to-cart--secondary:not(.disabled):hover span {display: none;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RowabiCo
Excursionist
27 1 11

@KetanKumar I just tried, somehow the Add To Cart is blackout after applying the codes.. I think now if we can add the Cart Icon in the middle of the empty blackout bar, it would be perfect!

RowabiCo_0-1650317354905.png

 

KetanKumar
Shopify Partner
37142 3648 12063

This is an accepted solution.

@RowabiCo 

oh sorry for that can you remove last one code and update this 

.paymentButtonsWrapper #AddToCart::before {position: absolute;font-family: 'fontello';width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;}
.paymentButtonsWrapper #AddToCart {position: relative;}
.paymentButtonsWrapper #AddToCart:hover::before {opacity: 1;transform: scale(1);}
.paymentButtonsWrapper #AddToCart.add-to-cart--secondary:not(.disabled):hover span {display: none;}

look at this code work

KetanKumar_0-1650317936253.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RowabiCo
Excursionist
27 1 11

@KetanKumar oh my God this is gorgeous, thank you so much!!!

RowabiCo
Excursionist
27 1 11

This is an accepted solution.

To help understand the solution, I just re-format it: 

.paymentButtonsWrapper #AddToCart::before {
    position: absolute;
    font-family: 'fontello';
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 12px;
    content: '\e802';
    opacity: 0;
    transform: scale(0);
    transition: all 0.9s;
}

.paymentButtonsWrapper #AddToCart {
    position: relative;
}

.paymentButtonsWrapper #AddToCart:hover::before {
    opacity: 1;
    transform: scale(1);
}

.paymentButtonsWrapper #AddToCart.add-to-cart--secondary:not(.disabled):hover span {
    display: none;
}
KetanKumar
Shopify Partner
37142 3648 12063

@RowabiCo 

yes, correct 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RowabiCo
Excursionist
27 1 11

@KetanKumar  Quick question upon that, do you know how I could change from the "Cart" to the "Bag" icon? 🙂 

KetanKumar
Shopify Partner
37142 3648 12063

@RowabiCo 

yes, please check your icon font family   font-family: 'fontello'; just change icon code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RowabiCo
Excursionist
27 1 11

@KetanKumar Perfect works! Appreciate it!!

 

I'm trying to apply the same logic, for different part ("Featured Products" - Our Best Sellers). However, the "Add To Cart" won't disappear when the cart shows up, do you know any clues why? Thanks a lot !!

 

RowabiCo_1-1650325738015.png

 

 

.grid-view-item .quick-add-button::before {
    position: absolute;
    font-family: 'fontello';
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 12px;
    content: '\e802';
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s;
}

.grid-view-item .quick-add-button {
    position: relative;
}

.grid-view-item .quick-add-button:hover::before {
    opacity: 1;
    transform: scale(1.3);
}

.grid-view-item .quick-add-button:hover {
  	display: inline;
  	background-color: white;
}

 

 

 

KetanKumar
Shopify Partner
37142 3648 12063

This is an accepted solution.

@RowabiCo 

can you please try this code

button.quick-add-button::before {position: absolute;width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;font-family: 'fontello';color: #000;}
button.quick-add-button {position: relative;}
button.quick-add-button:hover::before {opacity: 1;transform: scale(1);}
button.quick-add-button:hover {color: #eeeeee !important;border-color: #000 !important;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RowabiCo
Excursionist
27 1 11

@KetanKumar You are amazing!! Thank you so much!!

KetanKumar
Shopify Partner
37142 3648 12063

@RowabiCo 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
fabroli
Visitor
2 0 1

theme.min.css not available in dawn theme