Return to previous page

Customize cart button on the homepage – Add label button

This topic has 5 replies, 2 voices, and was last updated 2 years, 8 months ago ago by Tuyen Van

Tuyen Van

Participant

June 7, 2022 at 03:44

Hi development team.
I feel great with the look of my current website.
There is one thing I want to edit on the “Add To Cart With Quantity” button I want it to look like this:

…
I found this [Appearance> Them file editor> Select theme to edit (Xstore)> Woocommerce> content-product.php] at lines 622 & 623

woocommerce_quantity_input( array(), $product, true );
woocommerce_template_loop_add_to_cart();

I #comment they disappear. and come back after #uncommenting
…
Can you suggest me to add a label to the button and align them in 2 rows?

#325250 Copied Theme version: 4.1.6 WooCommerce version: 6.5.1

4 Answers

Rose Tyler

Support staff

June 7, 2022 at 09:37

If you are not planning to make your site multilanguage then we have perfect solution for you with simple custom css
Code snippet:

.content-product .quantity-wrapper {
flex-wrap: wrap;
justify-content: center;
}
.content-product .quantity-wrapper .quantity {
flex-basis: 100%;
margin: 0 0 10px;
}
.content-product .quantity-wrapper .button {
padding: 9px;
}
.content-product .quantity-wrapper .button[aria-label]:after {
content: 'Add To Cart';
position: static;
background: transparent;
color: currentColor;
max-width: unset;
padding: 0;
font-size: inherit;
box-shadow: none;
overflow: visible;
margin-inline-start: 7px;
transform: none;
}
.content-product .quantity-wrapper .button[aria-label]:not(:hover):after {
opacity: 1;
visibility: visible;
transform: none;
}

Result: https://gyazo.com/d82e58dfc2e972a54c9b58a114754d24

You may add CSS in theme options -> Theme Custom CSS -> Global CSS or in your child-theme/style.css

Regards

#325271 Copied

Tuyen Van

Participant

June 7, 2022 at 10:15

Thanks very much. your code worked in shop.
However, still outside the home page is still not correct. Can you help me add a label to it?

#325275 Copied

Rose Tyler

Support staff

June 7, 2022 at 13:24

Hello,

Change the previous code to:

.products-loop .content-product .quantity-wrapper {
flex-wrap: wrap;
justify-content: center;
}
.products-loop .content-product .quantity-wrapper .quantity {
flex-basis: 100%;
margin: 0 0 10px;
}
.products-loop .content-product .quantity-wrapper .button {
font-size: 14px;
padding: 9px;
}
.products-loop .content-product .quantity-wrapper .button[aria-label]:after {
content: 'Add To Cart';
position: static;
background: transparent;
color: currentColor;
max-width: unset;
padding: 0;
font-size: inherit;
box-shadow: none;
overflow: visible;
margin-inline-start: 7px; transform: none;
}
.products-loop .content-product .quantity-wrapper .button[aria-label]:not(:hover):after {
opacity: 1;
visibility: visible;
transform: none;
}

Regards

#325288 Copied

Tuyen Van

Participant

June 7, 2022 at 15:59

Thanks a lot. I close my question.
I acknowledge active support

#325299 Copied

Tagged: button, cart, customize, homepage, label, themes, woocommerce, wordpress
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Customize cart button on the homepage – Add label button’' has been successfully resolved, and the topic is now closed for further responses

Customize cart button on the homepage – Add label button

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection