Jump to content

How to change the function of the "Add to Cart" button to go to the product page?


Théo Oliveira
 Share

Recommended Posts

Hello guys!

I have been researching for a long time about how I can change the function of the Add to Cart button on the homepage of my store, I would like to instead of adding to the cart, redirect to the product page, as all products are personalized.

My Prestashop version is 1.7.6.8

Thanks!!

Share this post


Link to post
Share on other sites

24 minutes ago, Guest said:

Change URL from your theme product-list.tpl or add-to-cart-product-list.tpl ......

Each template has it differently.

So you can't advise exactly.


href="{$product.url}"

 

Hey, @GuestThanks! Below is the code "product-add-to-cart.tpl", could you tell me where to change according to your suggestion?

 

{if Group::getCurrent()->id != 4}
    <div class="product-add-to-cart">
        {if !$configuration.is_catalog}
            <span class="control-label">{l s='Quantity' d='Shop.Theme.Catalog'}</span>

            {block name='product_quantity'}
                <div class="product-quantity clearfix">
                    <div class="qty">
                        <input
                            type="number"
                            name="qty"
                            id="quantity_wanted"
                            value="{$product.quantity_wanted}"
                            class="input-group"
                            min="{$product.minimal_quantity}"
                            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
                            >
                    </div>

                    <div class="add">
                        <button
                            class="btn btn-primary add-to-cart"
                            data-button-action="add-to-cart"
                            type="submit"
                            {if !$product.add_to_cart_url}
                                disabled
                            {/if}
                            >
                            {l s='Add to cart' d='Shop.Theme.Actions'}
                        </button>
                    </div>
                </div>
            {/block}

            {block name='product_availability'}
                <span id="product-availability">
                    {if $product.show_availability && $product.availability_message}
                        {if $product.availability == 'available'}
                            <i class="material-icons product-available">&#xE5CA;</i>
                        {elseif $product.availability == 'last_remaining_items'}
                            <i class="material-icons product-last-items">&#xE002;</i>
                        {else}
                            <i class="material-icons product-unavailable">&#xE14B;</i>
                        {/if}
                        {$product.availability_message}
                    {/if}
                </span>
            {/block}

            {block name='product_minimal_quantity'}
                <p class="product-minimal-quantity">
                    {if $product.minimal_quantity > 1}
                        {l
          s='The minimum purchase order quantity for the product is %quantity%.'
          d='Shop.Theme.Checkout'
          sprintf=['%quantity%' => $product.minimal_quantity]
                        }
                    {/if}
                </p>
            {/block}
        {/if}
    </div>
{/if}


or in the code "product-list.tpl":

{block name='content'}
  <section id="main">

    {block name='product_list_header'}
      <h2 class="h2">{$listing.label}</h2>
    {/block}

    <section id="products">
      {if $listing.products|count}

        <div id="">
          {block name='product_list_top'}
            {include file='catalog/_partials/products-top.tpl' listing=$listing}
          {/block}
        </div>

        {block name='product_list_active_filters'}
          <div id="" class="hidden-sm-down">
            {$listing.rendered_active_filters nofilter}
          </div>
        {/block}

        <div id="">
          {block name='product_list'}
            {include file='catalog/_partials/products.tpl' listing=$listing}
          {/block}
        </div>

        <div id="js-product-list-bottom">
          {block name='product_list_bottom'}
            {include file='catalog/_partials/products-bottom.tpl' listing=$listing}
          {/block}
        </div>

      {else}

        {include file='errors/not-found.tpl'}

      {/if}
            {hook h="displayCategoryBottom"}
    </section>

  </section>
{/block}

 

Edited by Théo Oliveira (see edit history)

Share this post


Link to post
Share on other sites

4 minutes ago, Guest said:

1. Take a screenshot of the page where you see the "Add to cart" button.

2. Write if it is a classic template

3. write if you have a module installed that displays the "Add to cart" button in the list of products

are the buttons on that store homepage. I'm using a different theme than the default

http://retratodado.com.br/

I'm not using module to display "Add to cart" button 

- The "Add To Cart" button is translated into Portuguese "Adicionar"

Captura de Tela 2021-03-28 às 13.51.41.png

Edited by Théo Oliveira (see edit history)

Share this post


Link to post
Share on other sites

7 hours ago, Guest said:

Ok.

product-add-to-cart.tpl

original:

<div class="add">
          <button
            class="btn btn-primary add-to-cart"
            data-button-action="add-to-cart"
            type="submit"
            {if !$product.add_to_cart_url}
              disabled
            {/if}
          >
            <i class="material-icons shopping-cart">&#xE547;</i>
            {l s='Add to cart' d='Shop.Theme.Actions'}
          </button>
        </div>

new:

<div class="add">
			{if $page.page_name == 'index' || if $page.page_name == 'category'} 
				<a href="{$product.url}" class="btn btn-primary add-to-cart">
				<i class="material-icons remove_red_eye">remove_red_eye</i>
				{l s='View' d='Shop.Theme.Actions'}
				</a>
			{else}
				<button
					class="btn btn-primary add-to-cart"
					data-button-action="add-to-cart"
					type="submit"
					{if !$product.add_to_cart_url}
						disabled
					{/if}
				>
				<i class="material-icons shopping-cart">&#xE547;</i>
				{l s='Add to cart' d='Shop.Theme.Actions'}
				</button>
			{/if}
        </div>

 

Thanks for the attention @Guest, but I changed the codes as suggested and nothing changed when clicking on the "Add to Cart" button

but it changed when clicking on the product image, it just broke, when clicking on the product image I was going to an error page

I returned to the original code and the error stopped happening.

Share this post


Link to post
Share on other sites

are the catches on that store landing page. I'm utilizing an unexpected topic in comparison to the default 

I'm not utilizing module to show "Add to truck" button 

- The "Add To Cart" button is converted into Portuguese "Adicionar"

Share this post


Link to post
Share on other sites

12 hours ago, Guest said:

So you wrongly put the modified part of the code.
Because the button should have been renamed from Add to cart to View.
When editing a TPL file, the Cache must be cleaned up.

 

Script updated.

Please test now.

nothing works, even clearing all caches nothing changes T.T

Share this post


Link to post
Share on other sites

  • 3 months later...
On 3/29/2021 at 5:50 PM, Guest said:

I gladly helped

Hello guys

How is going ? I hope you are good! 😀

 

I have the same issue that in the past THEO gets.  I would like to instead of adding to the cart, redirect to the product page, as all products are personalized

My theme is different to the classic one. I purchased one called MODEZ DIGGO from ROY THEMES

Thats our web

 

THANKS

 

 

Share this post


Link to post
Share on other sites

  • 1 month later...
En 29/3/2021 a las 10:48 AM, Théo Oliveira dijo:

SOLVED! @Guest solved the problem for me in private, if you want to comment on the solution here for other people who are going through this they can also do it .. haha

Amazing!

 

Hello, you know that it was modified since I have the same problem when adding the code the design breaks.

I remain attentive to your comments.

  • Like 1

Share this post


Link to post
Share on other sites

  • 1 month later...

What is the version of Prestashop ?
Is a classic theme used ?

Upload here:

./themes/classic/templates/catalog/_partials/product-add-to-cart.tpl

or

./themes/your theme/templates/catalog/_partials/product-add-to-cart.tpl

or if exists

./themes/your theme/templates/catalog/_partials/custom/add-to-cart-product-list.tpl

 

If you use the Warehouse theme, then I can't help it, the theme is complex and is controlled by a lot of JavaScript.

  • Like 1

Share this post


Link to post
Share on other sites

3 hours ago, WebSoft said:

What is the version of Prestashop ?
Is a classic theme used ?

Upload here:

./themes/classic/templates/catalog/_partials/product-add-to-cart.tpl

or

./themes/your theme/templates/catalog/_partials/product-add-to-cart.tpl

or if exists

./themes/your theme/templates/catalog/_partials/custom/add-to-cart-product-list.tpl

 

If you use the Warehouse theme, then I can't help it, the theme is complex and is controlled by a lot of JavaScript.

Hi there, really appreciate your answer, i use etrend template.web site is this one, https://www.azerted.com

i was playing last night with ad to cart tpl, but seem controls add to cart button in product page..... what i need is in main page when client clicks on buy open product page and not add to cart, as potucts are clothes with attributes..

Share this post


Link to post
Share on other sites

7 hours ago, WebSoft said:

What is the version of Prestashop ?
Is a classic theme used ?

Upload here:

./themes/classic/templates/catalog/_partials/product-add-to-cart.tpl

or

./themes/your theme/templates/catalog/_partials/product-add-to-cart.tpl

or if exists

./themes/your theme/templates/catalog/_partials/custom/add-to-cart-product-list.tpl

 

If you use the Warehouse theme, then I can't help it, the theme is complex and is controlled by a lot of JavaScript.

prestashop version 1.7.6.2, i tried pasting code that was provided further up in  product-add-to-cart.tpl but no changes.....

Share this post


Link to post
Share on other sites

There is an error in the code.
Here is a working solution.

<div class="add">
			{if $page.page_name == 'index' || $page.page_name == 'category'} 
				<a href="{$product.url}" class="btn btn-primary add-to-cart">
				<i class="material-icons remove_red_eye">remove_red_eye</i>
				{l s='View' d='Shop.Theme.Actions'}
				</a>
			{else}
				<button
					class="btn btn-primary add-to-cart"
					data-button-action="add-to-cart"
					type="submit"
					{if !$product.add_to_cart_url}
						disabled
					{/if}
				>
				<i class="material-icons shopping-cart">&#xE547;</i>
				{l s='Add to cart' d='Shop.Theme.Actions'}
				</button>
			{/if}
        </div>

 

  • Like 1

Share this post


Link to post
Share on other sites

18 minutes ago, WebSoft said:

There is an error in the code.
Here is a working solution.

<div class="add">
			{if $page.page_name == 'index' || $page.page_name == 'category'} 
				<a href="{$product.url}" class="btn btn-primary add-to-cart">
				<i class="material-icons remove_red_eye">remove_red_eye</i>
				{l s='View' d='Shop.Theme.Actions'}
				</a>
			{else}
				<button
					class="btn btn-primary add-to-cart"
					data-button-action="add-to-cart"
					type="submit"
					{if !$product.add_to_cart_url}
						disabled
					{/if}
				>
				<i class="material-icons shopping-cart">&#xE547;</i>
				{l s='Add to cart' d='Shop.Theme.Actions'}
				</button>
			{/if}
        </div>

 

thank you very much will try!

this is my original code, could you tell me were to change.

{if Group::getCurrent()->id != 4}
    <div class="product-add-to-cart">
        {if !$configuration.is_catalog}
            <span class="control-label">{l s='Quantity' d='Shop.Theme.Catalog'}</span>

            {block name='product_quantity'}
                <div class="product-quantity clearfix">
                    <div class="qty">
                        <input
                            type="number"
                            name="qty"
                            id="quantity_wanted"
                            value="{$product.quantity_wanted}"
                            class="input-group"
                            min="{$product.minimal_quantity}"
                            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
                            >
                    </div>

                    <div class="add">
                        <button
                            class="btn btn-primary add-to-cart"
                            data-button-action="display-product"
                            type="submit"
                            {if !$}
                                disabled
                            {/if}
                            >
                            {l s='Add to cart' d='Shop.Theme.Actions'}
                        </button>
                    </div>
                </div>
            {/block}

            {block name='product_availability'}
                <span id="product-availability">
                    {if $product.show_availability && $product.availability_message}
                        {if $product.availability == 'available'}
                            <i class="material-icons product-available">&#xE5CA;</i>
                        {elseif $product.availability == 'last_remaining_items'}
                            <i class="material-icons product-last-items">&#xE002;</i>
                        {else}
                            <i class="material-icons product-unavailable">&#xE14B;</i>
                        {/if}
                        {$product.availability_message}
                    {/if}
                </span>
            {/block}

            {block name='product_minimal_quantity'}
                <p class="product-minimal-quantity">
                    {if $product.minimal_quantity > 1}
                        {l
          s='The minimum purchase order quantity for the product is %quantity%.'
          d='Shop.Theme.Checkout'
          sprintf=['%quantity%' => $product.minimal_quantity]
                        }
                    {/if}
                </p>
            {/block}
        {/if}
    </div>
{/if}

Share this post


Link to post
Share on other sites

14 minutes ago, WebSoft said:

You can like my posts by clicking on the gray heart below the posts 😉

 

thankyou soo much! you are ace! any other way i caan thank you? if you like any product in our catalog and you can have it!!!

just one question, any problems if i translate button?

  • Like 1

Share this post


Link to post
Share on other sites

Hello all,

I have small problem with combinations. What I mean. I have two of them It's BEZ and GRAWER. When I click GRAWER it should open additional options without changing anything else. Problem is when I clik GRAWER picture is changed to last item which I add to shop. I'm new on Presta and I don't know where to search this problem. If you could help me i appreciate.

example of product you can find here:

https://srebropol.pl/zlota-pozytywka-kon-na-biegunach-z-krysztalkami-swarovskiego-12320

 

Try to click Grawer below price and watch what happed.

In attached is product-customization.tpl

Regards

Andrzej

product-customization.tpl

Edited by Andrzej1234 (see edit history)

Share this post


Link to post
Share on other sites

  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More