Customize cart button on the homepage – Add label button

This topic has 5 replies, 2 voices, and was last updated 1 year, 9 months ago ago by Tuyen Van

  • Avatar: 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:
    Screenshot-from-2022-06-07-09-46-55.png

    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?

    Please, contact administrator
    for this information.
    4 Answers
    Avatar: Rose Tyler
    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

    Avatar: Tuyen Van
    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?
    demo-min.png

    Avatar: Rose Tyler
    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

    Avatar: Tuyen Van
    Tuyen Van
    Participant
    June 7, 2022 at 15:59

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

  • 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

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.