Responsivness Wishlist Icon on Default Woocommerce Product Loop

  • Resolved sophie2e

    (@sophie2e)


    1 year, 1 month ago

    Hello Team YITH,

    I am reopening a ticket because I close the previous one by mistake.
    Your colleague helped me to modify the place of the icon on woocommerce product loops, however I am facing an issue on tablet and mobile with the code provided, please review the feed here: https://wordpress.org/support/topic/wishlist-icon-on-default-woocommerce-product-loop/

    Would that be possible to use a left/right alignment and a top/bottom alignment instead of using top/bottom pixels to align them, making it don’t looks good on all devices as the size of the loop is changing? :/

    Thanks a lot for your help,
    Kind regards,
    Sophie

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Juan Coronel

    (@juaancmendez)

    1 year, 1 month ago

    Hello Sophie,
    we hope you’re doing well!

    Unfortunately, due to the way the plugin is designed, it is not possible to make the style you suggest, although we can adapt it to each view.

    Try adding the following CSS please:

    @only screen and (min-width: 480px) {
  ul.products li.product .yith-wcwl-add-to-wishlist {
       position: inherit !important;
       top: inherit !important;
       left: inherit !important;
       bottom: 73% !important;
  }
}

@only screen and (min-width: 768px) {
  ul.products li.product .yith-wcwl-add-to-wishlist {
       position: inherit !important;
       top: inherit !important;
       left: inherit !important;
       bottom: -242px !important;
  }
}

@only screen and (min-width: 992px) {
   .dokan-store .yith-wcwl-add-to-wishlist {
      top: unset;
      bottom: 170px;
   }
}

    Check it out and let us know any news.

    Best regards.

    Thread Starter sophie2e

    (@sophie2e)

    1 year, 1 month ago

    Happy Monday Juan,

    By twisting your code I could achieve the wanted results. Thank you so much for your precious help because you help me understand how to align the icon on the right as I wanted with “unset” settings, while your colleague told me it was not possible 😅</img> So now I don’t need so much CSS, you’re really the best!

    I wish you a fantastic week,
    Best regards,
    Sophie

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsivness Wishlist Icon on Default Woocommerce Product Loop’ is closed to new replies.