Add to Wishlist button help

  • Hello, how to place the TI Add to Wishlist button and the add to cart button side by side on a single product page. How do I make Add to Wishlist a button of the same style as add to cart? Please help.

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

  • Hello,

    Try to add the below code to the Customize > Custom CSS section and check it works or not – 

    form.cart {
    display: -webkit-box;
}
a.tinvwl_add_to_wishlist_button.tinvwl-icon-heart.tinvwl-position-after {
    margin-top: 0;
    vertical-align: -webkit-baseline-middle;
    margin-left: 10px;
    padding: 8px 20px;
    line-height: 1;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #f10101;
    color: #fff;
}

@media only screen and (max-width: 959px) {
form.cart {
    display: block;
}

a.tinvwl_add_to_wishlist_button.tinvwl-icon-heart.tinvwl-position-after {
    margin-top: 10px;
    margin-left: 0;
}
}
    Thread Starter arvoss

    (@arvoss)

    Hello there! thanks for your help! I filled in the code and the button layout error and confusion occurred. The following link is a typographical screenshot.

    I want the add to cart button and the add to wishlist button on the same line and evenly distributed

    error screenshot.jpg

    Can you link to the page after adding the code so that I can check it?

    Thread Starter arvoss

    (@arvoss)

    This is the link and the code above has been added. Check, please. And help.

    https://arvoss.com/product/eaf-sneakers/

    Okay, try this code instead of the previous one. It will work – 

    .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
    display: inline-flex;
}
a.tinvwl_add_to_wishlist_button.tinvwl-icon-heart.tinvwl-position-after {
    margin-top: 0;
    vertical-align: -webkit-baseline-middle;
    margin-left: 10px;
    padding: 8px 20px;
    line-height: 1;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #f10101;
    color: #fff;
}

@media only screen and (max-width: 767px) {
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
    display: block;
}

a.tinvwl_add_to_wishlist_button.tinvwl-icon-heart.tinvwl-position-after {
    margin-top: 10px;
    margin-left: 0;
}
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add to Wishlist button help’ is closed to new replies.