[Support request] Change a button in the product overview

[Frank]

Please excuse my bad English in advance (And – I’m “not” a programmer …).
I have a problem with the buttons.

There are two buttons in the product overview:
1x “in the shopping cart” (letter B) and
1x “read on” (letter A).

There is a button in the product
1x “in the shopping cart” (letter C)

How and where can I “only” “read on” the second button (B) in color + change the text, “without!” to change the other button (A + C)?

Thank you for your (always good so far!) Help

Greetings
Frank

[Elvin]

Hi Frank,

For the color change on add to cart buttons specifically, you can try this CSS:

/* add to cart base bg color */
a.button.product_type_simple.add_to_cart_button {
    background-color: blue;
}
/* add to cart bg color if already added to cart */
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.added {
    background-color: darkblue;
}

For the text, I’m not fully sure what you mean.

To clarify: If you mean to change the text of “B” on archive pages only, you can try this PHP snippet:

// To change add to cart text on product archives 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' );
}

Change 'Buy Now' to your preferred text.

[Author]

Posts