Change format of product quick add for craft theme

[caleo2024]

Hi, I'd like to amend the product quick add from the 'add to cart' button below the price to a '+' on the corner of the image (I'd like a square white box with a black cross)
Can anyone please help me with the code for this change?

Image to explain:

[PageFly-Noah · Accepted solution]

This is Noah from PageFly - Shopify Page Builder App

Thank you , please add code here in file theme.liquid and above tag </body>:

<style>
.card__content .quick-add{
position: absolute !important;
    right: 0 !important;
    top: 190px !important;
    z-index: 99 !important;
}
.card__content .quick-add .button::before {
  content: "+" !important;
  font-size: 20px !important;
  font-weight: bold !important;
}
.card__content .quick-add .button span {
  display: none !important;
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[caleo2024]

https://d47853-4.myshopify.com/
pw thauts

[PageFly-Noah · Accepted solution]

This is Noah from PageFly - Shopify Page Builder App

Thank you , please add code here in file theme.liquid and above tag </body>:

<style>
.card__content .quick-add{
position: absolute !important;
    right: 0 !important;
    top: 190px !important;
    z-index: 99 !important;
}
.card__content .quick-add .button::before {
  content: "+" !important;
  font-size: 20px !important;
  font-weight: bold !important;
}
.card__content .quick-add .button span {
  display: none !important;
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[caleo2024]

Thank you much! Works perfectly!

[PageFly-Noah]

Thank you , Have a nice day 😉!

[Arif_Shopidevs]

Hello, Will you please share your store URL. also provide the password if it was password protected.

Thank you from ShopiDevs

[Arif_Shopidevs · Accepted solution]

Hi @caleo2024 
If you want to show the icon all time use this css

.card__content .quick-add .button::before {
    content: "+" !important;
    font-size: 20px !important;
    font-weight: bold !important;
    transform: translateY(0) !important;
    z-index: 999 !important;
}

Hope this helps you

[caleo2024]

Amazing thank you, that was my next question!! 🙂

[Arif_Shopidevs]

Glad your next question is solved early 😀. Do not forget to like the answer 🙂

[caleo2024]

Hi again,

I've just noticed on mobile view the quick add cross seems to be too low - is there a way to make that position higher on mobile only (desktop is fine)

Also is there a way to make the words 'choose options' just say 'options' and make this font smaller on both desktop and mobile?

Thanks so much!!