How to change WooCommerce product CSS to original CSS

Question

I am working on a project using WooCommerce. I have one issue to display products. The products are coming but in WooCommerce, I want to change the WooCommerce CSS to my custom CSS. Can you give one example?

<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>

Can You help Me?

What are the ways we can change css?

Answer 1

Add woocommerce.css file in your theme and register CSS in function file:

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

And enqueue_style:

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