如何将 WooCommerce 产品 CSS 更改为原始 CSS

Question

我正在使用 WooCommerce 开展一个项目。我有一个展示产品的问题。产品即将推出，但在 WooCommerce 中，我想将 WooCommerce CSS 更改为我的自定义 CSS。能举个例子吗？

<div class="woocommerce columns-4">
            <ul class="products">

                    <li class="post-22 product type-product status-publish has-post-thumbnail first shipping-taxable purchasable product-type-simple product-cat-featured instock">
    <a href="http://localhost/wordpress/?product=mac-2">
        <img width="240" height="300" src="http://localhost/wordpress/wp-content/uploads/2015/02/2-240x300-240x300.jpg" class="attachment-shop_catalog wp-post-image" alt="2-240x300">
        <h3>Mac 2</h3>
    <span class="price"><span class="amount">£50.00</span></span>
    </a>
    <a href="/wordpress/?add-to-cart=22" rel="nofollow" data-product_id="22" data-product_sku="" data-quantity="1" class="button add_to_cart_button product_type_simple">Add to cart</a>
</li></ul></div>

你能帮帮我吗？

我们可以通过哪些方式更改 css？

Answer 1

在您的主题中添加 woocommerce.css 文件并在函数文件中注册 CSS：

add_action('wp',function(){
   wp_register_style('custom_woocommerce', get_template_directory_uri() . '/woocommerce.css'); 
}

还有 enqueue_style：

 add_action('wp_footer',function(){
     wp_enqueue_style('custom_woocommerce');
 },10,0);