title: WooCommerce: change the style of "add to cart" button in a widget
body: <p>I want to add a nice and small button "add to cart" to the product displayed by WooCommerce Products Widget. </p>
  
  <p>I have copied <strong><code>content-widget-product.php</code></strong> to my child theme (Storefront based) and tried 2 ways:</p>
  
  <ul>
  <li>First : <strong><code>echo do_shortcode('[add_to_cart id="'.$product_id.'"]');</code></strong> <br></li>
  <li>And also : <strong><code>woocommerce_template_loop_add_to_cart();</code></strong></li>
  </ul>
  
  <p>But either way, the result is ugly : I get a huge "add to cart" button that is as wide as my page:</p>
  
  <p><a href="https://i.stack.imgur.com/shrJM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/shrJM.png" alt="screenshot here:"></a></p>
  
  <p>I would like to get a much smaller button, aligned with the picture of the item. </p>
  
  <p>Something like that:
  <a href="https://i.stack.imgur.com/wskMu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wskMu.png" alt="[Something like that:"></a></p>
  
  <p>I guess I should change some CSS but I don't know how...<br>
  Could you help me? </p>
  
  <p>Thanks </p>