How can I align product title, prices and buttons on a wishlist page?

[Alliance]

Hi guys,

I would like to align product title, prices and buttons in wishlist page. And remove the hyperlink line but not the link.

Thank you

https://allianceautoproducts.com/pages/vertex

[MandasaTech]

Hello @Alliance
I would like to give you a solution to support you:

1. Go to Online Store-> Theme-> Edit code
2. Open your theme.liquid theme file
3. Paste the below code before :

<style>
.vertex-card-content {
text-align: center !important;
}
.vertex-product-title-section p {
text-align: center !important;
}
.vertex-product-title-section a {
text-decoration: none !important;
border-bottom: 0px !important;
}
.vertex-product-add-to-cart-section button {
text-align: center !important;
margin: auto !important;
}
</style>

Was my reply helpful? Please Like and Accept Solution. This means alot to me.

[shubhamSharma]

@Alliance

step 01:

1. Go to your Store > Theme > click to edit code.
2. find this file "theme.scss.css " and open.

step 02:

1. Paste the code at the end of the file.

.vertex-product-title-section a:hover {
    text-decoration: none;
}
.vertex-product-title-section p {
    min-height: 37px;
    height: 37px;
    overflow: hidden;
}

this idea helps you

[niraj_patel]

Hello @Alliance

You can add code by following these steps to align products title and buttons on whishlist page

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.wishlist-master-container .vertex-product-title-section{ min-height:80px !important; } .wishlist-master-container .vertex-product-title-section p{ display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

[amanbatra]

Hello @Alliance

Add this css to your CSS file and use !important if necessary

.vertex-card-content {
text-align: center;
}
.vertex-product-title-section * {
text-align: center;
}

[Alliance]

I am not sure about this app. It takes a lot of time to show the wishlist page and I get this Shopify message underneath. Any advice on that guys!

[amanbatra]

You can consider using some other wishlist if you are having issues with this one. There are much more better apps available on the shopify app store.

[Alliance]

Name few please

[amanbatra]

You can choose any whishlist app from here :

https://apps.shopify.com/search?q=whislist%20apps

[Shruti-SC]

Hi there,

If you are still looking for a solution, I recommend using Javascript.

• Find all empty href anchor tag () - document.querySelectorAll(‘[href=“”]‘)
• And then fill them with # - document.querySelectorAll(‘[href=“”]‘).href = ‘#’

I hope this was helpful! My team is happy to assist you further.

All the best,

Shruti