Mobile vs. Desktop Shop View

[kananu]

Hi,
Hope you’re well. This theme is fantastic.
We have a few questions:
1) the site zleatherco.com is also using the Neighborhood theme. They have done a really good job on their shop page. They have managed to do the following:
a) Desktop: You can add items to the cart on the shop page via the hover ‘add to cart’ link
b) mobile: Ignores the hover (doesn’t show up) and so you cannot add to cart via the shop page, instead the customer is required to go into the individual product page and then can add to the cart.
Please can you let us know how we can achieve the same (the only difference for what we want is an ‘add to cart’ button as an image that is displayed directly beneath the product pictures on the shop / archive page (similar looking to the ‘add to shopping bag’ button within the individual product pages)?

2) On mobile view of the website, is there a way that the cart at the top can show the running total of the cart (including the number of items within)?
3) We want to replace the image of the cart (at the top of the page) altogether, could you let me know where this cart image is located please?
4) for desktop the cart shows the amount, however, similar to zleatherco.com how do we update the cart amount at the top to also include the number of items in the cart please?
Thanks

[David Martin – Support]

They will have invested their money to use a developer to build out extra required modifications.

1)
a) This is default, as per our demo:

b)

To hide the add to cart for mobile devices on the shop page, you can use this:

@media only screen and (max-width: 767px) {
li.product figcaption .shop-actions {
      display: none;
}
}

To add a custom add to cart button in a different position for mobile would require you to work with a developer for this modification.

2) This would require you to work with a developer for this modification.

3) To change the cart icon for mobile, please install and activate the supplied child theme, inside the child theme functions.php file paste this code: https://gist.github.com/webadelic/6d8eceb08f3d00671ed9a380471969e0

Locate the icon code: <i class="sf-cart"></i> and replace with the icon of your desire.

4) You enable the option: Theme Options => Header Options => Cart aux item count