Wishlist below add to cart

Hello there,
we hope you’re doing well!

Yes, of course. Probably applying some CSS rules we can achieve what you need. Could you share the link to your site, please?

We will be attentive to your response.

Best regards.

Hey @juaancmendez

Here you go : https://www.themonoline.com

Hello there,

In order to achieve what you need, add the following code in the functions.php file of your active child theme:

if ( ! function_exists( 'yith_wcwl_custom_styles' ) ) {
    function yith_wcwl_custom_styles() {
        $jquery = 'jQuery( function($) {
            let wishlistContainer = $( "body.single-product .summary .yith-wcwl-add-to-wishlist" );
            wishlistContainer.insertAfter( ".summary button.single_add_to_cart_button" );
            $( "body.single-product .summary .yith-wcwl-add-to-wishlist a" ).css({"padding":"10px 20px","margin-left":"15px",})
        });';
        wp_add_inline_script( 'jquery-yith-wcwl', $jquery );
        wp_add_inline_script( 'jquery-yith-wcwl-user', $jquery );
    }
    add_action( 'wp_enqueue_scripts', 'yith_wcwl_custom_styles', 99 );
}

Check it out and tell us if it works well for you, please.

Best regards.

Hey, it seems like the css code you gave came up with some red texts. Not sure if it is supposed to be like that.

Oops, I read wrongly and had it placed in the css section instead. It seems to work now after placing it in the functions.php file, but only on a specific browser, on my current device. It still appears below the add to cart button when I launch the website on a different browser or use a different device. Also, I noticed that the button enlarges and sticks to the add to cart button right after the page is fully loaded.

Is it possible to keep the size of the button the same as the add to cart button and create a little space between them too?

Hello there,

Try also adding the following CSS in Appearance > Customize > Additional CSS:

.yith-wcwl-add-button a {
    padding: 10px !important;
    margin-left: 15px !important;
  }
@media only screen and (max-width: 768px) {
  .yith-wcwl-add-button a {
    padding: 9px !important;
    margin-left: 10px !important;
  }
}

Check it out and tell us any news.

Have a nice day!

Hey, it worked! Thanks alot @juaancmendez for the advice!

Is it possible to fix one last thing? It looks like the popup message for the wishlist button is white-out. Is there any code to make the texts black?

Looking forward to your reply.

Hello there,

In order to fix that, try adding the following CSS in Appearance > Customize > Additional CSS:

#yith-wcwl-message {
   color: black !important;
}

Check it out and tell us any news.

Have a nice day!

Thank you, it worked!