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

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.

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;
}

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.

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

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;
}

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;
}

“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;
}
}