second "add to cart" button css

I modified the simple product WC template to add additional buttons “add the cart”.

	<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
		<div class="quantityhide"><?php
		woocommerce_quantity_input( array(
			'input_value' =>'2',
		) );
		?></div>

		<button type="submit" name="add-to-cart2" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button2 button alt"><?php echo esc_html("Добавить 2"); ?></button>
	</form>

They have a css class ([type=”submit”] and [type=”button”]) that matches the first button “add the cart” and my attempts to use the css class=”single_add_to_cart_button2 button alt” are unsuccessful. I ask you how to change the “padding” of new buttons, any help is welcome.

Hello,

Try to use this set of selectors:

.quantityhide > .button,
.quantityhide > [type=submit], 
.quantityhide > button {
    font-size: 13px;
    line-height: 18px;
    padding: 12px 20px;
    background-color: #f3f3f3;
    color: #3E3E3E;
    display: inline-block;
    position: relative;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
}

Change the styles as per your needs.

Best Regards

this does not work 🙁

Hello,

Please provide your site admin access.

Best Regards

ok

Hello,

Here is the code for these two buttons: http://prntscr.com/k7ke2q
This button has the same class as the main add to cart button http://prntscr.com/k7kfdf

.single_add_to_cart_button2 {
    font-size: 13px;
    line-height: 18px;
    padding: 12px 20px;
    background-color: red;
    color: #3E3E3E;
    display: inline-block;
    position: relative;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
}

Change the styles as per your needs.

The first custom button has this class .single_add_to_cart_button You can add this to the code above with coma

Best Regards

[Author]

Posts