How to make a WooCommerce button

[steve]

Hello,

I’ve been having a conversation in another thread about how to make a button work like a woocommerce add to cart button. I have created this css and html code and I want to know if I can simply add the '.add_to_cart_button {/* Add your styling here */} and ‘id’ somewhere within this code and have this button work to add my item(s) to my cart. Is that possible?

.buttonCTCT{
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 15px;
}

.buttonCTCT1{
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.buttonCTCT1:hover {
background-color: #4CAF50;
color: white;

}

0-500 contacts

[paul.r]

Hi,

Yo can make use of woocommerce Add to Cart Shortcode

Shortcodes included with WooCommerce - WooCommerce Docs

To style it, you can add a class

[add_to_cart class="my-button" id="99"]

Then add this in Custom CSS

.my-button{
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      -webkit-transition-duration: 0.4s;
      transition-duration: 0.4s;
      cursor: pointer;
      border-radius: 15px;
}

.my-button{
     background-color: white; 
     color: black; 
     border: 2px solid #4CAF50;
}
.my-button:hover {
     background-color: #4CAF50;
     color: white;
}

Hope that helps.

[steve]

Is it possible to change the size of the woocommerce button? I am under the impression that there are four sizes that can be assigned to a button.

Go to my email marketing page down and to the right there is an orange button, click that, it is an off area content button. I’d like to make those buttons smaller. Can it be done?

[Joao]

Hi There,

Please provide your URL so we can take a closer look.

Thanks

[steve]

Hey,

My site is still under construction. I’ve included the username and password in a secure note above.

[paul.r]

Hi,

To make it smaller you can add the code below in Theme Options > CSS

.x-off-canvas-content.x-off-canvas-content-left a.add_to_cart_button {
    padding: 5px 10px;    
    font-size: 13px;
}

You may change font size and padding to adjust.

Thanks