Center Product Title and Price Under Product Image in Collections

Solved
Highlighted

Update: I was able to center recommended products with this code:

 

.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

Still not sure how to remove underlines upon hover. Any thoughts?

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
0 Likes
Highlighted
Astronaut
838 74 99

This is an accepted solution.


@kailasachse wrote:

Update: I was able to center recommended products with this code:

 

.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

Still not sure how to remove underlines upon hover. Any thoughts?


To remove border, try this CSS

 

.product-card:hover .product-card__title, .product-card:focus-within .product-card__title {border-bottom: none !important;}
you are welcome to contact me.
My email - suyash.patankar@gmail.com
1 Like
Highlighted

That worked! Thank you!!

 

Final code to center-align product titles and prices in both collections and for product recommendations. Code also eliminates underlining upon hover. For Debut theme.

 

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}


.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title, 
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}

 

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
1 Like
Highlighted
New Member
2 0 0

Does anyone know how I can use this code, but also have the text of the product title change color upon hovering?

0 Likes
Highlighted
Astronaut
838 74 99

share your site URL

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Tourist
10 0 0

Hello.

Thank you so much for this! Worked perfectly on my computer but it's a bit skewed still on mobile. Is there a fix for that?

Thanks!

0 Likes
Highlighted
New Member
2 0 0

Hi, 

Thank you so much for this code, it's just what I was looking for. 

Only there is still one problem... My prices aren't fully centered. I mean, they seem to be centered, but when you look closer it doesn't correctly align with the product name. 
( -> See the attached screenshot please, don't mind the weird photos, I'm still practicing ;)) 

Anyone that can help me with this issue? I Would really appreciate it! 

Btw: I'm using Debut theme and if you need to be on my website, the password is: skufoh and this is my url: www.bonita-avenue.com 

Thanks in advance! 

 

Screenshot collectionpage.png

0 Likes
Highlighted
Shopify Partner
1083 221 285

Add this css too 

.price dd {
    margin: 0 -0.5em 0 0 !important;
}

 

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted
New Member
2 0 0

That worked! Thank you very much! 

0 Likes
Highlighted
New Member
4 0 0

Thanks for this code that 8 looking for a long time. However, I still have a problem with the price that I cannot center.

 

Capture d’écran 2020-09-20 à 07.16.04.png

 

Here is te chope that I put : 

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
align-items: center;
}

.h4.grid-view-item__title.product-card__title {
text-align: center;
width: 100%;
display: inline-block;
text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}


.product-recommendations__inner dl.price {
display: block!important;
text-align: center;
}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}

Can someone help me ?

Thank you so much !!

 

0 Likes