Make choose options button go to product page instead of pop up in taste theme

Solved

Make choose options button go to product page instead of pop up in taste theme

jkjcreative
New Member
6 0 0

I have the Taste theme and in all my collections sections through the site, I want the 'choose options' button to link and go directly to the product page instead of the pop up coming up.

1000007324.jpg

 

1000007325.jpg

 

I'd like to know what code to add/change to make this happen in the Taste theme.

Thanks!

 

 

Accepted Solution (1)

Guleria
Shopify Partner
3486 697 981

This is an accepted solution.

Hello @jkjcreative ,

 

Follow these steps:
1) Edit Snippet -> card-product.liquid
2) Search for 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{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  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 }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
              </modal-opener>

 

Replace it with 

<modal-opener {% comment %}data-modal="#QuickAdd-{{ card_product.id }}" {% endcomment %}>
                <a href="{{ card_product.url }}" style=" text-decoration: none; ">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  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 }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
                </a>
              </modal-opener>

 

Thanks

 

 

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL

View solution in original post

Replies 3 (3)

Guleria
Shopify Partner
3486 697 981

This is an accepted solution.

Hello @jkjcreative ,

 

Follow these steps:
1) Edit Snippet -> card-product.liquid
2) Search for 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{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  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 }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
              </modal-opener>

 

Replace it with 

<modal-opener {% comment %}data-modal="#QuickAdd-{{ card_product.id }}" {% endcomment %}>
                <a href="{{ card_product.url }}" style=" text-decoration: none; ">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  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 }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
                </a>
              </modal-opener>

 

Thanks

 

 

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
jkjcreative
New Member
6 0 0

Hi Guleria, thank you for responding. I replaced the code, however this error pops up on the choose options button, but the button does go to the product page, just button doesn't say 'choose options' anymore - here's the test site I'm working in https://xca2y0g7wnbbdsij-64232325354.shopifypreview.com :

Screenshot 2024-07-25 at 8.37.51 AM.png

 

Here's where I replaced with the new code:

Screenshot 2024-07-25 at 8.46.23 AM.png

 

This was the orignal code:

Screenshot 2024-07-25 at 8.36.58 AM.png

 

The live site is Maxxherb.com

jkjcreative
New Member
6 0 0

Hi Guleria, Fixed it! I just took out this line of the new code:  {%- render 'loading-spinner' -%} 

And it works now! Thank you so much!