X-Cart forums

[Whisperingtreenet]

The the 'add to wishlist' button is appearing on the front page and category pages product listings when I want that button to be 'add to cart' Does anyone know how to switch that out with custom css?

This is for the latest version of xcart 5


Thanks!

[razortw]

Originally Posted by Whisperingtreenet

The the 'add to wishlist' button is appearing on the front page and category pages product listings when I want that button to be 'add to cart' Does anyone know how to switch that out with custom css?

This is for the latest version of xcart 5


Thanks!

Hello.
Do you want to change the title of the button only? Or do you want the item to be added to the cart when that button is clicked?
To do the former, you should look for the 'Add to wishlist' language label and edit its content.
The latter is not possible to do with CSS.
Besides, you already have the 'Add to cart' button in the product listing in your site (see screenshot attached)

[Whisperingtreenet]

The add to cart button is way small and not intuitive. Most customers won't put together that clicking on the shopping bag will add it to the cart. I would like to have an actual add to cart button like we have on the product pages instead of the tiny bag.

[razortw]

Originally Posted by Whisperingtreenet

The add to cart button is way small and not intuitive. Most customers won't put together that clicking on the shopping bag will add it to the cart. I would like to have an actual add to cart button like we have on the product pages instead of the tiny bag.

Well, the cheapest way to do so is to replace the /skins/default/en/items_list/product/images/bag/small.png image with the 'Add to cart' button image (example attached) and add the following code to the 'Custom CSS'.

.items-list .products-grid .add-to-cart-button {
  right: 20px;
  bottom: 5px;
}
.products .product-add2cart {
  width: 120px;
  height: 35px;
}

Here's the result of that change: https://i.gyazo.com/5e00e84d93ae222c8256f00e2a9add5e.png
Please note that the image will be overwritten during an upgrade, so it is recommended to implement this change as a module.

[kevinrm]

I agree about the shopping bag not being all that intuitive, I will probably implement this myself as well. Thanks for the code!

[Whisperingtreenet]

Thank you very much! I will implement this.

[tstone]

Sorry for the bump, but has this code changed since the last post? I tried it, but I'm still getting the shopping bag instead of the Add to Cart button. I added the css, I uploaded the new small.png image (renamed the other one small-old) cleared both caches, but no change other than the bag is now a little bit more to the left. Any ideas?

[razortw]

Originally Posted by tstone

Sorry for the bump, but has this code changed since the last post? I tried it, but I'm still getting the shopping bag instead of the Add to Cart button. I added the css, I uploaded the new small.png image (renamed the other one small-old) cleared both caches, but no change other than the bag is now a little bit more to the left. Any ideas?

Maybe it is cached in your browser.
Did you clear the cache?
Also, could you please share a link to your site so that we can check?

[tstone]

I cleared both caches, and cleared browser cache, even went to a different computer for the first time. http://scoopmasters.com/buy-dogipot-products/pet-waste-stations. It looks like the css made room for the new button size as the bags are now a little to the left from where they were. I downloaded the small.png file just to make sure and it is the add to cart button. I'm sure it's something simple and stupid that I'm overlooking.

[tstone]

Semi update: The small.png file I replaced is an image of a gold colored bag, the bag on my products page is red. Which tells me there is another image file of a red shopping bag that needs to be replaced with the Add to Cart image. I'll be looking for it.