Change style for custom button

  • Resolved mangoviche

    (@mangoviche)


    4 years, 5 months ago

    Hi,

    I added a “Continue Shopping” button on my Cart page:

    add_action( 'woocommerce_after_cart_totals', 'cart_continue_shopping_button' );
 
function cart_continue_shopping_button() {

 echo '<div class="">';
 echo ' <a href="'.home_url().'" class="button">Seguir comprando →</a>';
 echo '</div>';
 }

    I want to change the style of the button using CSS:

    add_action( 'wp_head', function () { ?>
<style>

	.button {
		width: 553px;
		text-align: center;
		background: orange;
	}

</style>
<?php } );

    My question is how to I set a name to that button so that I can reference it in the CSS code? Right now by using .button I’m changing the style of all the buttons on my page.

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Matias Benedetto

    (@mmaattiiaass)

    4 years, 5 months ago

    Hi @mangoviche,
    I think you can add a custom class name to the button you are creating.
    Following your code, you can try something like this:

    echo ' <a href="'.home_url().'" class="button custom-button-class">Seguir comprando →</a>';

    And reference the class like this:

    <style>

	.custom-button-class {
		width: 553px;
		text-align: center;
		background: orange;
	}

</style>

    custom-button-class is just an arbitrary name. You can use whatever you want, for example: “seguir-comprando”, “special-button”, etc.

    Let me know if this solution works for you.

    Best regards!

    Thread Starter mangoviche

    (@mangoviche)

    4 years, 5 months ago

    @mmaattiiaass

    Thanks! Exactly what I needed.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Change style for custom button’ is closed to new replies.

Tags