Move wishlist button up, and heart to the right

[Luxurymrkt]

Hi,

I need to move the wishlist button up to below the add to cart, also the heart in header to the right and get rid of the # symbols showing how many in wishlist.

my site is

https://vazluxe.com/collections/sale-up-to-70-off/products/dsquared2-suede-new-jersey-sneakers-in-le...

 

[LizHoang]

Hi @Luxurymrkt 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

a.wk-button.wk-align-center.wk-align-content-center {
    margin-left: 20px !important;
}

Result 

Best,

Liz

[LizHoang]

Hi @Luxurymrkt 

Regarding the relocation of the "Add to Wishlist" button, it requires modifications in the Liquid file. You should contact the theme developer to resolve this issue.

[Dan-From-Ryviu]

Hi @Luxurymrkt 

You can try to add this code to your theme.liquid file, above </body> tag and check again.

<script>
// Wait for the DOM to load
document.addEventListener('DOMContentLoaded', function () {
    // Select the element to be moved
    const wishlistBlock = document.getElementById('shopify-block-AdHRvRTUyQktETkZlZ__swish_formerly_wishlist_king_wishlist_button_block_bDAGxW');
    // Select the button element
    const cartSubmitButton = document.querySelector('.product-form__cart-submit.javascript');

    // Ensure both elements exist
    if (wishlistBlock && cartSubmitButton) {
        // Move the wishlist block below the button
        cartSubmitButton.parentNode.insertBefore(wishlistBlock, cartSubmitButton.nextSibling);
    }
});
</script>
<style>

@media (max-width: 400px) {
    html wishlist-link .wk-button {
        left: -240px;
    }
}
</style>

[DaisyVo]

Hi @Luxurymrkt 

Moving the wishlist button requires modifying the theme code, not just adjusting the CSS. You'll need a developer to properly reposition it.

@media screen and (max-width: 768px) {
  a.header__icon-touch wishlist-link wk-button.notranslate > a.wk-button {
    margin-left: 15px !important;
  }
}

 You can add the code above to CSS. This will shift the wishlist heart icon slightly to the right on mobile devices

I hope this helps

Best,

Daisy