Help - Removing product title and price from collection pages

Solved
LuxuryJewellery
Excursionist
34 0 3

Hi Everyone,

 

I recently just added a quick view feature to my collection pages that allow for customers to hover over the product and product title and price and more details pops up.

 

I would like to remove the product and price under the product thumbnail and for it only to become visible once the quick view is hovered over. 

 

My website is - https://luxurybrandjewellery.com/collections/rings

Password is - Storageplus

 

I would like it to look like this - Screen Shot 2020-01-18 at 12.46.31 pm.png

Here is my product-card-grid.liquid

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{% unless grid_image_width %}
  {%- assign grid_image_width = '300x300' -%}
{% endunless %}
{%- assign grid_image_scale = '2' -%}

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <div class="reveal">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="hidden">
  <div class="caption">
    <div class="centered">
      {% comment %}
      <p>{{ product.title }}</p>
      <p>{{ product.price | money }}</p>
    </div><!-- end of .centered -->
  </div><!-- end of .caption -->
</div><!-- end of .hidden -->
      <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price', variant: product %}
      {% endcomment %}
    </div>
  </a>
  {% render 'banana-stand-product-list-container', product: product %}
</div>
  

Thanks in Advance 

0 Likes
Guleria
Shopify Partner
1254 263 344

Hello 

Code you share doesn't belongs to the page you share
Try to search for this code ( <div class="tb-product-card-details">  ) in related templates once you find, comment or remove it.

Thanks

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

This is an accepted solution.

Hello
Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.tb-content-hover .tb-product-card-details {
    display: block!important;
}
.tb-product-card-details {
    display: none;
}

 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
LuxuryJewellery
Excursionist
34 0 3

thank you @oscprofessional. Worked a charm.

0 Likes
gwagent1990
New Member
4 0 0

Can you please let me know if this is also applicable for this theme?

https://torontopopcorncompany.com/collections/all

0 Likes

Hello gwagent1990,
Please share the screenshot of which product title and price from collection pages you want to remove.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
gwagent1990
New Member
4 0 0

popcorn price.JPG

By the default, I want to achieve the price to remove and it will only appear once a mouse hover on the photos.

0 Likes
gwagent1990
New Member
4 0 0

As you can see in this video, it works with one of the styles at the left side but the title and price stays within the photo when a mouse hovers. I am trying to achieve to show beneath of each photos. I hope I have explain it well.

0 Likes