Woocommerce商店页面自定义CSS

我是woocommerce的新手。添加短代码后, 产品列表出现问题它显示woocommerce html, class列表, 但是我想显示我尝试的html, css, 但它不起作用, 这里是woocommerce代码。 。

<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 src="http://localhost/wordpress/wp-content/uploads/2015/02/2-240x300-240x300.jpg" class="attachment-shop_catalog wp-post-image" alt="2-240x300" height="300" width="240">
        <h3>Mac 2</h3>
    <span class="price"><span class="amount">£50.00</span></span>
    </a>
    <a href="/wordpress/?orderby=popularity&amp;post_type=product&amp;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>

这是我的代码..

<div class="box-product product-carousel" id="featured-tab-carousel">
  <div class="slider-item">
    <div>
<div class="product-block" id="element_change">                   
  <div class="product-block-inner">
<div class="product-image-block">
  <?php echo do_shortcode('[product_category category="featured" per_page="12" columns="4" orderby="default" order="ASC"]');?>
  <div class="product-hover-block">
<div class="add-to-link">
 <div class="cart">
 <input type="button" value="Add to Cart" onclick="addToCart('43');" class="button" />
<em>Add to Cart</em>
  </div>
 <div class="wishlist"><a onclick="addToWishList('43');">Add to Wish List</a>
    <em>Add to Wish List</em>
  </div>
<div class="compare"><a onclick="addToCompare('43');">Add to Compare</a>
 <em>Add to Compare</em>
 </div>
</div>
<div class="rating"><img src="<?php echo get_template_directory_uri();?>/catalog/view/theme/OPC080180/<?php echo get_template_directory_uri();?>/image/stars-0.png" alt="Based on 0 reviews." /></div>  </div>
  </div>
 <div class="product_category_title"> - Software</div>
<div class="name"><a href="indexb8ca.html?route=product/product&amp;product_id=43">MacBook</a></div>
 <div class="product_info">
<div class="price">$589.50                                                  </div>
</div></div></div>

请帮助我如何更改CSS …

#1

据说这是为Woocommerce包含自定义CSS样式表的一种方式：

function enqueue_style_after_wc() {
    $deps = class_exists( 'WooCommerce' ) ? array( 'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general' ) : array();
    wp_enqueue_style( 'my-style', 'my-style.css', $deps, '1.0' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_style_after_wc' );

来源：https://wordpress.stackexchange.com/questions/135171/woocommerce-include-custom-stylesheet-after-woocommerce-styleling