Создайте вертикальный стек из трех отдельных кнопок - PullRequest
Новая
       9

Создайте вертикальный стек из трех отдельных кнопок

0 голосов
/ 28 апреля 2020

На моем сайте используется следующий блок кода с индивидуальным именем класса для каждой кнопки. 

add_action( 'woocommerce_after_add_to_cart_button', 'additional_simple_add_to_cart_10', 20 );
function additional_simple_add_to_cart_10() {
    global $product;

// Only for variable product type 
    $href = '?add-to-cart=' . esc_attr( $product->get_id() ) . '&quantity=10';
$class = 'ingle_add_to_cart_button-10 button alt';
$style = 'display: inline-block; margin-top: 12px;';
$button_text = __( "10 Tickets", "woocommerce" );

// Output
echo '<br><a rel="no-follow" href="'.$href.'" class="'.$class.'" style="'.$style.'">'.$button_text.'</a>';

}

Каждая кнопка в настоящий момент находится рядом друг с другом. Я не слишком хорош с css, мои три кнопки названы ниже. Как я могу получить их в вертикальной группе друг на друга? Или это возможно, если все они имеют одно и то же имя?

ingle_add_to_cart_button-10 button alt ingle_add_to_cart_button-5 button alt ingle_add_to_cart_button-1 button alt

1 Ответ

0 голосов
/ 28 апреля 2020

Оберните ваши три кнопки в контейнер div. В вашем CSS добавьте: 

display: flex; flex-direction: column

Если вы не хотите добавлять контейнер, вы можете взломать свой путь, установив ширину каждой кнопки на 

width: 100vw;
...