How to replace default "add to cart" with an image

[yaletowner]

I'm trying to find how to replace the default "add to cart" on the product page that's currently a text with background color. Instead I'd like to change it to my own button that is an image.

Also can someone suggest how to completely remove "add to wishlist", from the product page - including name of files that need editing.

[s_ismail]

I'm trying to find how to replace the default "add to cart" on the product page that's currently a text with background color. Instead I'd like to change it to my own button that is an image.

Also can someone suggest how to completely remove "add to wishlist", from the product page - including name of files that need editing.

Go to App_Themes/Your_Theme/style.skin and locate the following line

Code: Select all

<asp:Image runat="server" SkinId="BuyNowButton" ImageUrl="images/cart_btn2.gif" />

and replace its 'cart_btn2.gif' with your own image Like this

Code: Select all

<asp:Image runat="server" SkinId="BuyNowButton" ImageUrl="images/Your_New_Image.gif" />

[yaletowner]

Thank you for this... So far this made a change in two places > The category display grid & Product search result page.

The Product Page still has the default "add to cart" text on a background. Can you point out how to change it to my own image in here.
And once on that page, how can I disable "add to wishlist" link completely.

[s_ismail]

The Product Page still has the default "add to cart" text on a background. Can you point out how to change it to my own image in here.

Go to ConLib/BuyProductDialog.ascx and locate the following code

Code: Select all

<asp:LinkButton ID="AddToBasketButton" runat="server" SkinID="Button" Visible="true" OnClick="AddToBasketButton_Click" Text="Add to Cart" EnableViewState="false" ValidationGroup="AddToBasket"></asp:LinkButton>

Replace with this code

Code: Select all

<asp:ImageButton ID="AddToBasketButton" runat="server" SkinID="BuyNowButton" Visible="true" OnClick="AddToBasketButton_Click" EnableViewState="false" ValidationGroup="AddToBasket"></asp:ImageButton>

how can I disable "add to wishlist" link completely.

Go to ConLib/BuyProductDialog.ascx.cs and locate the following code

Code: Select all

AddToWishlistButton.Visible = true

and comment out this line. like

Code: Select all

//AddToWishlistButton.Visible = true

[yaletowner]

That did it - Thank You!

[cierra]

How would this work with this type of code:

<asp:Button ID="MultipleAddToBasketButton" runat="server" Text="Add to Cart" OnClick="MultipleAddToBasketButton_Click" ToolTip="Fill in the quantity and Click this to add multiple products to baskt." UseSubmitBehavior="false" />

I've tried what you have above, but it errors out

[s_ismail]

How would this work with this type of code:

<asp:Button ID="MultipleAddToBasketButton" runat="server" Text="Add to Cart" OnClick="MultipleAddToBasketButton_Click" ToolTip="Fill in the quantity and Click this to add multiple products to baskt." UseSubmitBehavior="false" />

I've tried what you have above, but it errors out

Hello,
Above code will not work for you. Make Use of this code by replacing 'MultipleAddToBasketButton' button code

Code: Select all

 <script language="javascript" type="text/javascript">
                function AddToCartImageClicked()
                {
                  document.getElementById('<%=MultipleAddToBasketButton.ClientID%>').onclick();
                } 
            </script>
                <asp:Button ID="MultipleAddToBasketButton" runat="server" Text="Add to Cart" style="display:none;" OnClick="MultipleAddToBasketButton_Click" ToolTip="Fill in the quantity and Click this to add multiple products to baskt." UseSubmitBehavior="false" />       
                <asp:Image ID="AddToCartImage" runat="server" SkinID="BuyNowButton"  AlternateText="Add To Cart" onclick="return AddToCartImageClicked();" /> 

[cierra]

No, I am sorry, this does not work. Does not change out button, still the same one.

[s_ismail]

Are you using this code in 'CategoryGridPage3.ascx' Control or somewhere else?

[cierra]

Yes, this is from vs 7.07, page: CategoryGridPage3.ascx and the code is:

<div align="center">
<asp:Button ID="MultipleAddToBasketButton" runat="server" Text="Add to Cart" OnClick="MultipleAddToBasketButton_Click" ToolTip="Fill in the quantity and Click this to add multiple products to baskt." UseSubmitBehavior="false" />
</div>

But these buttons -- <asp:Button type commands are throughout the site and we'd like to replace them with actual images. Our customers are generally older and not very computer literate. These text based buttons are too small and very easy to miss.

[s_ismail]

It is working properly on my side. I have uploaded this control. Give a try using this.

[cierra]

So, with this code you are seeing an image for a button? The image set in your style skin page here: <asp:ImageButton runat="server" SkinId="BuyNowButton" ImageUrl="images/add_to_cart.png" ImageAlign="AbsMiddle" />?

I do not, I see the same button I had before that is generated from CSS with the text, not the image button I have set up in my style.skin page.

[Richard47]

I have figured out how to change the add to cart to an image button from above but I am having problems changing the add to wish list to an image button also anyone have any clues as to how I can do this.

Thanks
Richard