Shopping Cart Image on Add to Cart button

  • Posts: 301
  • Thank you received: 1
9 years 2 weeks ago #238354

-- HikaShop version -- : 2.6.2

I have searched the forum but couldn't find an answer

I am trying to find the view where I can add a Shopping Cart image next to the text "Add to Cart" on the Add to Cart Button.

I have a span code I can use which I want to use - <span class="zen-icon zen-icon-shopping-cart"></span>

My other question is - how do you know which elements are on which View. I can't work this out and it can take me a long time trying to find it in the Views.

Please Log in or Create an account to join the conversation.

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
9 years 2 weeks ago #238385

Hello,

I confirm that there isn't option like this, but you create override viewin order to custom this.
Note : Override aren't erased when you update your HikaShop Version.

To reach your override, and especially which process your add to cart button, follow this steps :
- Go to Components => HikaShop => Configuration
- On Display dropdown, select Views



- Use dropdown to find more easily your view, here quantity View like on screen below :



Note : For the red value, of course select your front end template, here on my example it's protostar

- Find show_quantity, and edit the view to insert your image directly in the html with an span and a src="url/path/image"

Note : Later, if you want erased your override, click on the little trash icon.

For your second point, maybe I had bring some part of your response, the other part will come with views time and experience thanks to view and override system.

Hope this will help you.

Regards.

Attachments:
Last edit: 9 years 2 weeks ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 96
  • Thank you received: 1
8 years 6 months ago #254810

Hi,

I need to do the same thing, but I don't understand where insert an image on 'add cart button' in the view product/show_quantity.

Could you help me, please ?

Here's the link of the concerned page : www.netweb3d.o2switch.net/mauritiusprodu...gory/25-thes-maurice

Thank's

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 83799
  • Thank you received: 13570
  • MODERATOR
8 years 6 months ago #254827

Hi,

You don't need to edit any PHP code.
You can add such image on the add to cart button with simple CSS.
For example, you could add:

a.hikashop_cart_button {
    background-image: url(/mauritiusproducts/images/User-green-icon.png);
    background-repeat: no-repeat;
    width: 180px !important;
    display: block;
    height: 35px;
}
And that would display like that:
take.ms/IP6cg
www.hikashop.com/support/documentation/1...ize-the-display.html

Please Log in or Create an account to join the conversation.

  • Posts: 96
  • Thank you received: 1
8 years 6 months ago #254844

I added the code you gave me in 'frontend_custom_css' for testing, but it doesn't work (see image linked).

What is the issue ?

Thank's

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 83799
  • Thank you received: 13570
  • MODERATOR
8 years 6 months ago #254847

Hi,

The CSS is overwritten by other CSS on your website. Do it like that instead:

a.hikashop_cart_button {
    background-image: url('/mauritiusproducts/images/User-green-icon.png') !important;
    background-repeat: no-repeat !important;
    width: 180px !important;
    display: block !important;
    height: 35px !important;
}

Please Log in or Create an account to join the conversation.

  • Posts: 96
  • Thank you received: 1
8 years 6 months ago #254913

Hi,

I'm sorry but it doesn't work !
I don't understand why.

None of the modifications I do is working (color for example).

Thank's for your help.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 83799
  • Thank you received: 13570
  • MODERATOR
8 years 6 months ago #254926

Hi,

That's because since then, you changed the "button style" setting of the HikaShop configuration from "CSS" to "input" and because of that, the CSS code I provided isn't applied to the buttons as they use different HTML code.
Switch back to CSS in that setting of the HikaShop configuration and it should work fine.

Please Log in or Create an account to join the conversation.

  • Posts: 96
  • Thank you received: 1
8 years 6 months ago #254964

It's ok now. Thank's

But the problem is that the image appears on others buttons that "Add to cart".

How can I do to prevent this.

Thank's

Please Log in or Create an account to join the conversation.

  • Posts: 83799
  • Thank you received: 13570
  • MODERATOR
8 years 6 months ago #254980

Hi,

Then prepend that CSS code with the class .hikashop_product_stock
and that way it will only apply to that button.

Please Log in or Create an account to join the conversation.

  • Posts: 96
  • Thank you received: 1
8 years 6 months ago #255061

Hi,

Thank you very much. It's working !

Best regards.

Please Log in or Create an account to join the conversation.

Time to create page: 0.087 seconds
Powered by Kunena Forum