php - WooCommerce/Wordpressのバリエーションフォームのデザイン変更

Question

WordPress と WooCommerce で独自のデザインのオンライン ストアを作成する方法を研究しています。つまり、html+css レイアウト ページを作成しました。そして今のところ、Woocommerce にラップする必要があります

私は小さな問題に直面しました。この店の商品は、瓶の容量によってバリエーションがあります（店のテーマは蜂蜜です）。

また、標準の選択と数量の入力をデザインにラップする方法がわかりません。WooCommerce のテンプレートを自分の Wordpress テーマのフォルダにコピーすることを知っています。そして、私はそれを使用しています。タイトル、短い説明についてはすべて問題ありません（私はcontent-product-single.phpファイルで作業しています。

私は今のところそのようなものを持っています(コードスニペット):

         <div class="container content details">
            <div class="col-lg-3">
                <img class="img-responsive img-thumbnail" src="<?php the_post_thumbnail_url(); ?>">
            </div>
            <div class="col-lg-6">
                <h2><?php the_title();?></h2>
                <p><?php the_excerpt();?></p>
            </div>
            <div class="col-lg-3">
                <h4>Price: <span id="price"><?php global $product; echo $product->get_price_html(); ?></span></h4>
                <label for="value">Capacity:</label>
                <select class="form-control" id="value">
                    <option>Example 1</option>
                    <option>Example 2</option>
                    <option>Example 3</option>
                    <option>Example 4</option>
                </select>
                <label id="q" for="quantity">Quantity:</label>
                <input type="number" class="form-control" id="quantity" name="quant" value="1" min="1" max="5">
                <button type="button" class="btn btn-danger">Add to cart</button>
            </div>

ご覧のとおり、標準の select とバリエーション フォームの入力をブートストラップ レイアウトにラップする必要があります。どうすればできるか教えてください。よろしくお願いします！