我已设法使用以下代码在商店页面上显示产品变体：

/**
 * Replace add to cart button in the loop.
 */
function iconic_change_loop_add_to_cart() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );

function iconic_loop_variation_add_to_cart_button() {
    global $product;

    ?>
    <div class="woocommerce-variation-add-to-cart variations_button">
        <button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
        <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
        <input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
        <input type="hidden" name="variation_id" class="variation_id" value="0" />
    </div>
    <?php
}

商店页面当前看起来如下所示：

但是，我有两个问题需要帮助：
问题1：我想设置变体的样式（将其移动到中心并创建一些间距）。但是，我注意到整个对象与主产品页面中的变体相同，因此如果我在那里更改css，它将影响其他对象。有没有一种方法可以为商店和分类中的产品注入我自己的类来帮助创建这种分离？
问题2：最好添加一个自定义按钮“快速购物”，当用户选择它时，它将显示变化、数量和添加到购物车按钮。此外，“快速购物”按钮将变为“隐藏”，如果选中，将隐藏变体、数量和添加到购物车中。这是为了节省空间。
任何帮助都将不胜感激。
非常感谢。