terrytsang

<p>A WooCommerce plugin that apply CSS3 Tags & Stitched Effect style design for WooCommerce product meta (SKU, categories and tags)</p>
<p>In WooCommerce Sidebar Panel, there will be a new menu link called ‘Product CSS3 Tags’ where you can update the options.</p>
<p>The list of options for the section above:</p>
<ul>
<li>Enabled Product CSS3 Design</li>
<li>Show Product SKU  </li>
<li>Show Product Categories</li>
<li>Show Product Tags</li>
<li>Use CSS3 Stitched Effect that apply for SKU and Categories</li>
<li>Product Tags Color Scheme</li>
<li>Change SKU text to any text you prefer (for example: Model, Product Code)</li>
</ul>
<h4>In addition to these features, over 20 WooCommerce extensions are available:</h4>
<ul>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-facebook-share-like-button/" rel="nofollow ugc">Facebook Share Like Button</a> – add Facebook Share and Like button at product page.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-custom-checkout-options/" rel="nofollow ugc">Custom Checkout Options</a> – implement customization for entire checkout process.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-social-buttons-pro/" rel="nofollow ugc">Social Buttons PRO</a> – additional 9 social share buttons where you can engage more audience.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-extra-fee-option-pro/" rel="nofollow ugc">Extra Fee Option PRO</a> – add multiple extra fee for any order with multiple options.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-custom-product-tabs/" rel="nofollow ugc">Custom Product Tabs</a> – add multiple tabs to WooCommerce product page.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-facebook-social-plugins/" rel="nofollow ugc">Facebook Social Plugins</a> – implement Facebook Social Plugins that let the users liked, commented or shared your site’s contents.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-custom-payment-method/" rel="nofollow ugc">Custom Payment Method</a> – customise the custom payment method with flexible options.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-custom-shipping-method/" rel="nofollow ugc">Custom Shipping Method</a> – define own settings for custom shipping method.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-donation-tip-checkout/" rel="nofollow ugc">Donation/Tip Checkout</a> – add donation/tip amount option for their customers at WooCommerce checkout page.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-product-badge/" rel="nofollow ugc">Product Badge</a> – add mulitple badges to the products.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-facebook-login-checkout/" rel="nofollow ugc">Facebook Connect Checkout</a> – implement Facebook Login so that new customers can sign in woocommerce site by using their Facebook account.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-product-catalog/" rel="nofollow ugc">Product Catalog</a> – turn WooCommerce into a product catalog with a few clicks.</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-coming-soon-product/" rel="nofollow ugc">Coming Soon Product</a> – show ‘Coming Soon’ default message and countdown clock for pre launch product</li>
</ul>
<p>and many more…</p>
<h4>Free & Popular WooCommerce Bundle extensions:</h4>
<ul>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-free-extensions-bundle/" rel="nofollow ugc">WooCommerce Free Extensions Bundle</a> – 5 free plugins in 1 download</li>
<li><a href="http://terrytsang.com/shop/shop/woocommerce-popular-extensions-bundle/" rel="nofollow ugc">WooCommerce Popular Extensions Bundle</a> – 5 unlimited licenses premium plugins with only $99</li>
</ul>


WooCommerce Product CSS3 Tags

A WooCommerce plugin that apply CSS3 Tags & Stitched Effect style design for WooCommerce product meta (SKU, categories and tags)

Nick Halsey

<p>This plugin automatically adds CSS3 transitions to your website/blog and the WordPress admin. Links, etc. get animated transitions between their normal and hover states. CSS3 Transitions are supported by the most recent version of every major browser (Chrome, Internet Explorer 10, Firefox, Opera, Safari); browsers without support will continue to render everything as they had before. This plugin adds the transitions (eye candy) to all <code><a></code> (link), <code><li></code> (list item, usually used in navigation menus), <code><img></code> (image), and <code><input></code> (form field and button) tags that have a hover or focus state defined (for example, if links change color when the mouse hovers over them). Other “buttons”, form elements, and WordPress-specific selectors are also targeted. Transitions are between .2 and .3 seconds in duration, so they shouldn’t cross the line between nice and distracting; however, depending on the colors used in your theme, the transitions may not be noticeable.</p>
<p>Also, please note that image sprites simply don’t work well with blanket css3 transitions. If you see wierd animations where images scroll between their normal and hover states, they’re using sprites. Depending on where the sprites are used, there are various ways to prevent the behavior on those elements, while retaining transitions where desired. One method is to add an inline style attribute to those elements: <code>style="transition: none; -webkit-transition: none;"</code>. Adding the css to your theme will override the plugin’s css as long as you target the elements using sprites by class or id.</p>
<p>Please feel free to offer any feature suggestions you might have and I will consider them for future releases.</p>
<h4>CSS3 Transitions UX Theory</h4>
<p>Because of the way our brains process images, in simple terms, instant/sudden changes are generally not as well perceived as more gradual ones. In the physical space, we never see instant changes, like slides changing with no animation in a PowerPoint, but with digital technology this is a very common practice. When websites make use of hover states, for example, if a link changes color when the mouse hovers over it, they exhibit small, but instant visual changes. Adding the css3 transitions makes these changes more gradual, and therefore easier on the eye. For this same reason, operating systems now tend to make use of a lot of animations. There’s a lot of neuroscience behind these concepts, but I’m not well versed in that. Basically, <em>slight</em> animations generally look better than instant changes. Some people will argue that things aren’t as “snappy” or seem slugish with transitions, but if that’s the case, it’s only a matter of adjusting the animation timing function and duration.</p>


CSS3 Transitions

This plugin automatically adds CSS3 transitions to your website/blog and the WordPress admin. Links, etc. get animated transitions between their norma …

WooCommerce Product CSS3 Tags vs CSS3 Transitions