Return to previous page

Designing Add to cart icon to a button on Main page, Last viewed products and on Mobile view

This topic has 5 replies, 3 voices, and was last updated 8 months ago ago by Luca Rossi

creativesite

Participant

October 16, 2024 at 19:15

Hi again,

Sorry, one more thing, on the Main page, Shop archive, Last viewed products and on Mobile view, the button that we created (with the help of Rose) looks a bit weird.
Can you please add a code to look it like on the Shop page? 🙂
Thank you very much!

(Please see image attached)

Also on Last viewed products, the Add to cart button needs some styling:)
Help me please 🙂

Please, contact administrator
for this information.

#419024 Copied

4 Answers

Rose Tyler

Support staff

October 17, 2024 at 10:50

Hello,

Thank you for reaching out to us again.

We’ve added “!important;” in custom CSS code https://prnt.sc/Ip0cifcO2f6Z . Please check cache and check the result.

Best regards,
8Theme’s Team

#419130 Copied

creativesite

Participant

October 17, 2024 at 19:40

Thank you, Rose!

Just one thing, when I search for a product, on the Result page the button becomes an icon again. Can you please help me with a code to make it a text-button?

And on the main page, the products’ Add to cart buttons text are a bit bigger than on the rest of the pages’ Add to cart button.
Can the text be made to 14px please?
The buttons size on the Shop page is ca. 220px x 48px
And on the main page ca. 200px x 44px

Thank you in advance!
Barbara

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#419260 Copied

creativesite

Participant

October 17, 2024 at 19:59

And on My account page the “These might interest you” products and buttons look also a bit squeezed, I attached image. Can you please check it?
Thank you a bunch!

Files is visible for topic creator and
support staff only.

#419262 Copied
Luca Rossi

Support staff

October 18, 2024 at 11:10
Hi @creativesite,

Can you please add this custom CSS also?

.etheme-product-grid-item .quantity-wrapper { min-width: 100%; flex-direction: column; height: auto; gap: 10px; } .etheme-product-grid-item .quantity-wrapper .etheme-product-grid-button { width: 100% !important; } .etheme-product-grid-item .quantity-wrapper .etheme-product-grid-button svg { display: none; } .etheme-product-grid-item .quantity-wrapper .etheme-product-grid-button::after { content: "KOSÁRBA TESZEM"; font-size: 14px !important; } .content-product .quantity-wrapper .button:before { font-size: 14px !important; }

https://prnt.sc/DRqfOn1ClRxM

Hope it helps!
#419367 Copied
Viewing 5 results - 1 through 5 (of 5 total)