Archived topic
Change a button in the product overview
1 reply · Started by Frank on December 5, 2021
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
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.
