Help - Removing product title and price from collection pages

Solved
Tourist
15 0 1

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
Highlighted
Shopify Partner
552 108 130

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.
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

Success.

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
15 0 1

thank you @oscprofessional. Worked a charm.

0 Likes