Move WooCommerce icons

  • Resolved Matija

    (@matijars)


    5 years, 1 month ago

    Greetings to the forum members,

    This post is regarding two icons: an Add to cart icon and a Heart like icon.

    These two icons are currently located at the bottom corner of each product.

    The goal is to move them to the position shown in the attached screenshot (Screenshot WeTransfer URL: https://we.tl/t-l2YKmlRPsS).

    What custom code would make it possible to do this? I would greatly appreciate any pointers.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    5 years, 1 month ago

    Hi there 👋

    This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
     

    /* Set likes at the top of the image */
.wcpl-product-likes-product {
    position: absolute !important;
    top: -10px;
    left: 10px;
}

/*Align basket and price*/
span.price, a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    display: inline-block !important;
}

    Here is a preview:

    https://www.screencast.com/t/PiumN5VU

    Please kindly note that it is not possible to align the basket on the right side because the words “Add to Cart” that display when hovering the cart icon will collide with the price of the product that is next to it.
     
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    I hope that helps 🙂

    Thread Starter Matija

    (@matijars)

    5 years, 1 month ago

    gabrielfuentes, that was very helpful and easy to follow. There are still things being tested and moved around, but the original question has been resolved. Thank you.

    Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    5 years, 1 month ago

    Happy to help 😃

    Great! If you have any further questions, you can start a new thread.

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Move WooCommerce icons’ is closed to new replies.