5 WooCommerce Customization Tips that are Noteworthy
You got a lot to consider when starting a WooCommerce store. Although the free eCommerce plugin comes with a default user interface for visitors but developers and store owners aspire to customize the pages that deliver more personalized experience. And the best thing about WordPress and WooCommerce is that both the code and content can be changed to according to one's need. This means plugins, extensions and themes can be used to fulfill requirements, then adjusted and coded to tailor the look and overall functionality of your site.
Out of the blues, WooCommerce comes with some built in CSS. Which means it is compatible with as many themes as possible. The default CSS is a great starting point but it is unlikely to perfectly match your theme’s style right after installation. The following post offers five quick tips on how to do WooCommerce customization easily.
Tip #1 Custom Templates
Woocommerce itself being a templating platform has the potential to alter each and every element to be displayed. Due to this, one can modify the display of element without editing WooCommerce core files (which is never recommended, until and unless you work in an eminent Woocommerce development company). By doing this all your modifications can be lost at the next WooCommerce update.
So, what can be done is? Create a Woocommerce folder within your theme’s directory. Next, duplicate all the file especially the ones that you like to override. In such scenarios professionals would strongly recommend using a child theme in order not to lose any modification during a theme update. Moreover, overriding default templates also allows you to customize all emails sent by WooCommerce.
For example: Add a new class to product tabs in order to apply custom CSS code to the tabs. Then duplicate the woocommerce/templates/single-product/tabs/tabs.php file in the following folder wp-content/themes/your-theme-folder/woocommerce/single-product/tabs/ and change the following code <ul class=« tabs”> to <ul class=« tabs my-custom-tabs-class « >.
Tip #2 Filters and Actions (hooks)
With the help of hooks, one can easily customize WooCommerce without modifying core file. WooCommerce 2.1.12 provides around 275 filters and actions (hooks) which allow elements like a text, an array etc to be changed or actions to be applied or removed during a specific procedure. One can even unhook actions and filters.
Now imagine you would like to remove the product count on a product’s archive page. For this, you will definitely need to unhook the corresponding function by removing the filter:
remove_filter( ‘woocommerce_subcategory_count_html' );
Tip #3 WooCommerce Customizer
It is a free plugin offered by Skyverge that provides many ways to customize an e-commerce website, including a setting page where one can add your customizations and save them without needing to write any code or modify any templates. This is extremely helpful when one requires to quick change testing.
A few customizations you can make:
• Add to Cart button text for all product types
• The number of products displayed per page
• Choose ‘Product Description’ as your heading text and ‘Additional Information’ tab
• Check out page coupon/login text as well as ‘Submit Order’ button text
• Also, check out page Tax Label text
The plugin has more than 40k downloads and a very good rating (4.8/5). Basically, it has nothing to prove, it just works beautifully.
Tip #4 Strings Translations
A common demand seen in support requests is the ability to translate a sentence, label, field name, etc. Most developers tend to use a filter but sometimes they cannot. In such scenarios, free plugin that will allow you to change/translate a string without any single line of PHP!
Tip #5 Colors and Styles
You will be quite interested in knowing the fact that WooCommerce comes with five different colors that can be easily modified within the settings (WooCommerce > Settings > General > Styles and Scripts)
Pick any color and disable WooCommerce default styles by using the following snippet:
add_filter( 'woocommerce_enqueue_styles', '__return_false');
Well, this is not recommended unless you exactly know what you are doing! This snippet will work with WooCommerce 2.1+ only, to disable styles for WooCommerce < 2.1, use:
define( 'WOOCOMMERCE_USE_CSS', false );
Import your WooCommerce shop to Facebook in a matter of minutes with the leading social commerce platform plugin ‘WooCommerce shop to Facebook’. It is a fantastic way to encourage friends to share and buy if you reach a certain number of users join (which you can specify)!