Как изменить CSS продукта WooCommerce на оригинальный CSS

Question

Я работаю над проектом с использованием WooCommerce. У меня есть одна проблема для отображения продуктов. Продукты идут, но в WooCommerce я хочу изменить CSS WooCommerce на мой собственный 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);