Add To Wishlist position settings

1. Try with this

.yith-wcwl-add-to-wishlist a.button {
    padding-left: 0;
}

2. Try with this

ul.products li.product .yith-wcwl-add-to-wishlist a:after{
    display: none;
}

3. There is no specific option to show button on the same line of the Add to Cart button
Besides, I can see that Add to Cart is located in a pretty custom position on your loops, so it may be difficult to find a solution to this problem

Could you please place ATW after Add to Cart, so I can check if there is something that I could do in CSS to help you get what you want?

Hi there,

The first 2 codes worked. Thanks!

3. I have added ATW after ATC, please check if there is something that can be done.

4. On the archives pages also I want the wishlist icon without the current green border. The icon border to be #4f4f4f color.

5. In Archive pages, Already wishlisted is going to pose a problem. How do i remove “Already wishlisted” followed by heart on archive pages only? I just want the 1st pink heart.

• This reply was modified 4 years ago by brandmadeconsult.

**UPDATED:

3. I have added ATW after ATC, please advice how to get ATW placed just beside ATC.

4. On the archives, I want the wishlist icon without the current green border. The icon border to be #4f4f4f color and transparent fill.

5. Archives page: I want to get rig of “Already Wishlisted ” text. When I have added a product to wishlist, the wishlist heart to be replaced by pink heart without any text appended.

6. I want to get rid of Add To Wishlist text on the 3 product sliders on the homepage.

3/4/5. This is the best that I can do just with CSS; please, try to add this code to your custom rules

ul.products li.product .yith-wcwl-add-to-wishlist {
    display: inline-block;
    float: right;
    margin-top: -30px;
    position: relative;
    z-index: 1;
    margin-right: 20px;
}

ul.products li.product .yith-wcwl-add-to-wishlist a {
    border-width: 0px!important;
}

ul.products li.product .yith-wcwl-add-to-wishlist a:hover {
    background: none!important;
}

ul.products li.product .yith-wcwl-add-to-wishlist a i {
    color: #4f4f4f;
    font-size: 13px
}

ul.products li.product .yith-wcwl-add-to-wishlist a:hover i {
    color: #E79597;
}

ul.products li.product .yith-wcwl-add-to-wishlist .feedback {
    font-size: 0;
    margin-right: 35px;
}

ul.products li.product .yith-wcwl-add-to-wishlist .feedback i {
    font-size: 13px;
    color: #E79597;
}

6. I cannot see any Add to Wishlist text on the Home page’s sliders
Could you send us a screenshot?

3/4/5: I have tweaked it a little to this:

ul.products li.product .yith-wcwl-add-to-wishlist {
    display: inline-block;
    float: right;
    margin-top: -30px;
    position: relative;
    z-index: 1;
    margin-right: 20px;
}

ul.products li.product .yith-wcwl-add-to-wishlist a {
    border-width: 0px!important;
	background: none!important;
}

ul.products li.product .yith-wcwl-add-to-wishlist a:hover {
    background: none!important;
}

ul.products li.product .yith-wcwl-add-to-wishlist a i {
    color: #4f4f4f;
    font-size: 15px;
}

ul.products li.product .yith-wcwl-add-to-wishlist a:hover i {
    color: #E79597;
}

ul.products li.product .yith-wcwl-add-to-wishlist .feedback {
    font-size: 0;
    margin-right: 35px;
}

ul.products li.product .yith-wcwl-add-to-wishlist .feedback i {
    font-size: 13px;
    color: #E79597;
}

Only that Added to wishlist appears like this: https://prnt.sc/10c4ofl

BUT, the button is overlapping on mobile & tablet.

6. Homescreen slider, Can you notice the A under the Heart: https://prnt.sc/10c4l0d

Here you’ll find a rule to fix Added to wishlist state

.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a {
    display: none;
}

Regarding overlapping on mobile, because of the strange way I had to position the button, there is little that I can do, apart try to fix that with a couple of media queries

@media(max-width: 960px) {
    ul.products li.product .yith-wcwl-add-to-wishlist {
        margin-right: 20px;
    }
}

@media(max-width: 768px) {
    ul.products li.product .yith-wcwl-add-to-wishlist {
        margin-right: -20px;
    }
}

@media(max-width: 480px) {
    ul.products li.product .yith-wcwl-add-to-wishlist {
        margin-right: -40px;
    }
}

6. Here a rule that should fix the problem

.wpsp-slider-section .wpsp-product .yith-wcwl-add-to-wishlist a:after{
    display: none;
}

HI guys,

Thanks a lot for resolving my queries so patiently!

1st and 3rd worked well.

2nd code: in tablet view the number of columns were set to 3 that alignment got changed, does it have anything to do with the code?

I added below css for small mobiles, since there is still some overlap:

@media(max-width: 320px) {
 ? ?ul.products li.product .yith-wcwl-add-to-wishlist {
 ? ? ? ?margin-right: -80px;
    }
}

@media(max-width: 320px) {
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .product-inner .added_to_cart {
	position: relative;
	right: 10px;
}
}

But the wishlist icon is not changing position with right-margin after -40px. What could be the reason?

in tablet view the number of columns were set to 3 that alignment got changed, does it have anything to do with the code?

I don’t think so TBH; you could try to remove the provided CSS and see if this brings back your previous layout, but I’m sure enough this hasn’t to do with previouc code

I added below css for small mobiles, since there is still some overlap:

I’d suggest you to go with this code for smaller devices

@media(max-width: 320px) {
    ul.products li.product .add_to_cart_button {
        font-size: 10px!important;
        float: left!important;
    }
    ul.products li.product .yith-wcwl-add-to-wishlist {
        margin-right: -35px;
        margin-top: -25px;
    }
}

This is my final result @320px

But the wishlist icon is not changing position with right-margin after -40px. What could be the reason?

Not sure what you mean with this

This is the result I am getting with the code:

https://prnt.sc/10dpkzg

Could you please specify with which devices are you using for tests?
I emulated iphone 5 on my browser and I can see that indeed appearance is not like what I expected (anyway is still different from your screen)

Given my latest test, I’d suggest you this rules

@media(max-width: 320px) {
    ul.products li.product .add_to_cart_button {
        font-size: 10px!important;
        float: left!important;
        margin-left: 20px;
    }
    ul.products li.product .yith-wcwl-add-to-wishlist {
        margin-right: 10px;
        margin-top: -25px;
    }
}

HI, the result is better, still not perfect but will probably make do.

For testing I use Inspector on chrome->Toggle device toolbar->Select the size of device

Ok, then; this is my result when testing with Chrome dev tools, after applying the last set of rules that I shared

When you do not select the phone model and leave it at responsive and then change the views with graded bar below, responsive breakpoints are mentioned and when you select Mobile(S) you will get the result as I have discussed.

https://prnt.sc/10ixnic

I did the test as you described, but nothing changes: applying the rules that I suggested before, will fix that appearance

@media(max-width: 320px) {
    ul.products li.product .add_to_cart_button {
        font-size: 10px!important;
        float: left!important;
        margin-left: 20px;
    }
    ul.products li.product .yith-wcwl-add-to-wishlist {
        margin-right: 10px;
        margin-top: -25px;
    }
}

Do you maybe have the same problem with corrupted CSS? Because I cannot see these rules applied to your site

Thanks! that worked.