[Resolved] quantity buttons added and add to cart button in one line

Home Forums Support [Resolved] quantity buttons added and add to cart button in one line

Home Forums Support quantity buttons added and add to cart button in one line

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1535222
    Heinrich

    hi team,

    there are few tasks for me regarding “add to cart” button:

    – how to get the quantity selector and the add to cart button in one line?
    – how to replace the text with an svg-icon. but only in archive and category pages?
    – how to add a svg icon right to the add to cart button text on the single product page?
    – how to inject the quantity selector into woo blocks. on archive and categorie it works fine

    tks al lot in advance

    #1535387
    Elvin
    Staff
    Customer Support

    Hi,

    – how to get the quantity selector and the add to cart button in one line?

    We can achieve this by adding CSS:

    form.cart {
        display: flex;
        align-items: center;
    }
    
    form.cart button.button.alt {
        margin-top: 0px !important;
        margin-left: 10px !important;
        padding: 0;
        flex-grow: 1;
        height: 30px !important;
    }
    
    .woocommerce .quantity a.minus, .woocommerce .quantity a.plus, .woocommerce .quantity input.qty {
        height: 30px !important;
        min-height: 30px !important;
        width: 30px !important;
    }

    how to replace the text with an svg-icon. but only in archive and category pages?

    Can you specify with ones to replace?

    – how to add a svg icon right to the add to cart button text on the single product page?

    Add this CSS:

    body.single-product button.single_add_to_cart_button.button.alt:after {
        content: "";
        background: url(your svg url here);
    }

    – how to inject the quantity selector into woo blocks. on archive and categorie it works fine

    Woo blocks are added by WooCommerce which is a third party plugin outside of GeneratePress’ scope.

    You’ll need a plugin that extends its functionality to add quantity selectors or ask the plugin developer on how to extend its functionality.

    Note: As these are mostly WooCommerce issues, it may be best to ask their support for recommendations on most of these things.

    A wise man once said:
    "Have you cleared your cache?"

    #1535402
    Heinrich

    hi elvin,

    topic one is working fine with your code
    topic four, i understand and will aks there

    topic two, i mean to complete replace the add to cart button text with an icon (only on product-archive and product category pages)

    topic three: the code is not working…?

    #1535425
    Elvin
    Staff
    Customer Support

    topic two, i mean to complete replace the add to cart button text with an icon (only on product-archive and product category pages)

    As per WooCommerce’s official docs, they’re recommending this plugin:
    https://wordpress.org/plugins/wc-custom-add-to-cart-labels/

    Documentation found here.
    https://docs.woocommerce.com/document/change-add-to-cart-button-text/

    Alternatively, you can use PHP snippets to change it:

    // To change add to cart text on single product page
    add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_custom_single_add_to_cart_text' ); 
    function woocommerce_custom_single_add_to_cart_text() {
        return __( 'Buy Now', 'woocommerce' ); 
    }
    
    // To change add to cart text on product archives(Collection) page
    add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_custom_product_add_to_cart_text' );  
    function woocommerce_custom_product_add_to_cart_text() {
        return __( 'Buy Now', 'woocommerce' );
    }

    You can change the return __( 'Buy Now', 'woocommerce' ); values to your icon mark up.

    topic three: the code is not working…?

    Ah right. That was just a gist. My bad.

    This one should work fine:

    body.single-product button.single_add_to_cart_button.button.alt:after {
        content: "";
        display: inline-block;
        background: url(http://haaslm.temp513.kinsta.cloud/wp-content/uploads/tragetasche.png) no-repeat top right;
        background-size: contain;
        width: 20px;
        height: 16px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1535438
    Heinrich

    hi elvin, tks, is working fine. which class i have to adress when i want the same in add to cart button in archive? instead of:

    body.single-product button.single_add_to_cart_button.button.alt:after

    tks in advance.

    #1535441
    Elvin
    Staff
    Customer Support

    To clarify: did you mean the “shoppen” button?

    If so, you can use this CSS selector: body.tax-product_cat form.cart button.button.alt:after

    But you may have to play around with the sizing of the buttons as it will probably look cramped.

    A wise man once said:
    "Have you cleared your cache?"

    #1535644
    Heinrich

    hi elvin,
    yes its the "shoppen" button in shop loop. i tried your selector but didnt work.
    wondering how and where you have grabbed this one. which tool are you using?
    can’t find it with inspector and css inspector?

    #1536626
    Elvin
    Staff
    Customer Support

    wondering how and where you have grabbed this one. which tool are you using?
    can’t find it with inspector and css inspector?

    We simply check the webpage by viewing its page source or using Google Chrome’s developer tools by pressing CTRL + SHIFT + I which is basically the same as right-clicking on the page and pressing “Inspect”.

    yes its the “shoppen” button in shop loop. i tried your selector but didnt work.

    Try this selector instead.
    body.archive form.cart button.button.alt:after

    A wise man once said:
    "Have you cleared your cache?"

    #1536650
    Heinrich

    hello elvin,

    tks, this selector is working. one more thing.
    in product single (bottom) in related products, the quantity selector and the add to cart button are not aligned. following code is in place:

    /* formats add to cart and quantity in one line */

    form.cart {
    display: flex;
    align-items: center;
    }

    form.cart button.button.alt {
    margin-top: 0px !important;
    margin-left: 10px !important;
    padding: 0;
    flex-grow: 1;
    height: 40px !important;
    }

    .woocommerce .quantity a.minus, .woocommerce .quantity a.plus, .woocommerce .quantity input.qty {
    height: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    }

    and please also the selector for adding the icon.

    tks in advance.

    #1536661
    Elvin
    Staff
    Customer Support

    in product single (bottom) in related products, the quantity selector and the add to cart button are not aligned. following code is in place:

    Add this:

    div.product form.cart>:not(.quantity):not(.single_add_to_cart_button) {
        width: auto;
    }

    and please also the selector for adding the icon.

    Use this:

    div.product form.cart>:not(.quantity):not(.single_add_to_cart_button):after {
        content: "";
        display: inline-block;
        background: url(http://haaslm.temp513.kinsta.cloud/wp-content/uploads/tragetasche.png) no-repeat top right;
        background-size: contain;
        width: 20px;
        height: 16px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1536679
    Heinrich

    image is in the button, but the alignment didn`t work

    #1536687
    Elvin
    Staff
    Customer Support

    image is in the button, but the alignment didn`t work</blockquote>

    Let’s try using !important;

    Try this:

    div.product form.cart>:not(.quantity):not(.single_add_to_cart_button) {
        width: auto !important;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1536759
    Heinrich

    next thing is working 🙂 tks.

    missing is the alignment in related products in mobile.

    #1536798
    Elvin
    Staff
    Customer Support

    “in die Einkaufstasche is pretty long. Consider resizing its font on mobile so it can fit within the same row.

    /* Change add to cart font size on mobile */
    @media (max-width:768px){
    body.single-product button.single_add_to_cart_button.button.alt {
       font-size: 12px !important;
    }
    }
    

    A wise man once said:
    "Have you cleared your cache?"

    #1536849
    Heinrich

    perfekt elvin..rockstar 🙂

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.