Changing all Add to cart buttons to View more

[swishlatvija]

Hello,

Could someone please tell us how to change all Add to cart buttons to View more? So after clicking the button, opens a product page.

Link: www.swishtiles.com

We will certainly not forget to mark your answers as solutions!

Kind regards,

Swish

[shreyhweb]

change the text by some custom code.

so you need a developer for done that

if you want to further discuss about it then you can contact us

[Ninthony · Accepted solution]

Those buttons are specifically functioning to add to cart. You'd probably be better off unchecking the quick add setting in the section settings and adding in a new section setting. Open up your featured-collection.liquid file and Ctrl + F and look for card-product. You'll see a render for the snippet:

You're gonna add a new option in there. Copy the "show_quick_add" line and make a space underneath and add a new option called "link_to_pdp". Should look like this:

{% render 'card-product',
  card_product: product,
  media_aspect_ratio: section.settings.image_ratio,
  show_secondary_image: section.settings.show_secondary_image,
  show_vendor: section.settings.show_vendor,
  show_rating: section.settings.show_rating,
  show_quick_add: section.settings.enable_quick_add,
  link_to_pdp: section.settings.link_to_pdp,
  section_id: section.id
%}

Then scroll down into the schema where the "enable_quick_add" setting was:

I want you to copy that whole highlighted section there, including the comma at the end of the bracket. Make a space directly below it and paste it. Change the id to "link_to_pdp" and change the label to "Link to pdp", that long string is just a translation file reference and I don't feel like explaining all that to you. It should look like this:

    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.featured-collection.settings.enable_quick_buy.label"
    },
    {
      "type": "checkbox",
      "id": "link_to_pdp",
      "default": false,
      "label": "Link to PDP"
    },

And a picture for reference:

Save the file. You've just added a new setting into your featured collection file. Open up your customizer and go to your featured collection on the homepage and look at the section settings. There should be a new checkbox underneath the quick add option called "Link to PDP"

Uncheck the quick add button and check the "Link to PDP" option and save. Now we're going to make it output a button. Go into your code editor again and open up card-product.liquid in your snippets folder. Scroll all the way to about line 199, you should see a render for price. I want you to put this code directly under it:

{% if link_to_pdp %}
  <a class="card__view-more button button--full-width button--secondary" href="{{ card_product.url }}">
    View more
  </a>
{% endif %}

Should look like this, I just didnt add all the additional classes before I took the screenshot:

At this point you should see a link now under your product cards. Greying out product info here cause it's from a former employer:

There you go, those should all link to your PDP now.

[swishlatvija]

Hi @Ninthony ,

Your explanation worked and was simply perfect! Thank you very much, and have a great day!

[swishlatvija]

Hi @Ninthony 

Sorry for bothering you, but maybe you know how to align these buttons in one line? Please see the image below:

Your assistance is highly appreciated! 

[Ninthony]

Problem with that is it's going to depend on your product titles, as you can see your one only breaks to two lines while the other two break to three, and this is going to vary on different screen sizes as well. I get that it can look visually unappealing, and there are things that you can do to solve this, but is it worth it? I don't think so, I highly doubt it will have any kind of effect on your conversion. Paste the page here, if I get some free time I'll write you a script that will check the height of all of those titles in the section and set them all to the tallest title, that way all the buttons will match up.

[javierestebanx]

Hi @Ninthony I did everything as you said here, but the "link to pdp" check is not showing on my customizer (I'm not doing this in the home but in the collection page, maybe is this what is wrong??) 

I would like to have both buttons active, quick add and view more. I'm using dawn theme.

Shop is: https://euroinnova-edu.myshopify.com/collections/educacion

password: shiepe

Thank you so much in advance

[stussieberg]

Thanks! This helped me a lot. 

I have a similar request. All the products I've imported to my store have this "View Product" pop up, which is the thing I want as the standard. The last product I added shows this "Add To Bag" instead of that button that triggers the product page preview pop-up, what should I do to have it beneath this product? 

Best regards
Dario