Replace "Choose Options" Modal with Link to Product Page

[gsb]

Hi,

I'm building a store and want to change the "Choose Options" modal / popup on the featured product collection to a simple link to the product page... Hoping someone can help 🙂

[Guleria]

Hello @gsb ,

  It's simple but you have to find the template. Once found change it with anchor tag with href {{ product.url }}  

Thanks

[gsb]

Thank you. I am not sure where to look in the theme files… My javascript is below basic

[kirby561]

Hey Gsb. I wanted to make this change as well. Find the file "snippets/card-product.liquid" and replace this code:

<modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{{ 'products.product.choose_options' | t }}
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
</modal-opener>
<quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
<div role="dialog" aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}" aria-modal="true" class="quick-add-modal__content global-settings-popup" tabindex="-1">
<button id="ModalClose-{{ card_product.id }}" type="button" class="quick-add-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
<div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info">
</div>
</div>
</quick-add-modal>

With this:

<a href="{{ card_product.url }}">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{{ 'products.product.choose_options' | t }}
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
</a>

Your theme may be a little different but the important part was to remove the modal-opener and quick-add-modal tags and instead just have a link (<a href="{{ card_product.url }}">...</a>)

[Crewnies]

Hi, it works for me, but now, the text "choose option" is underlined. How can i fix it ? 

[camax]

Hello did you fix this problem ? i have the same

[rrugile]

Hey! I added a style just after the </a>:

<style>

a {

text-decoration: none !important;

}

a:hover {

text-decoration: none !important;

}

</style>

However! Bear in mind this is likely to remove underlines for all links since adding !important overrides any previous styling applied.