10 Tips to Customize WordPress WooCommerce Store

WooCommerce is one of the popular ecommerce plugins for WordPress. The plugin is popular because it was developed by Automattic, the company that owns wordpress.com services. It is being offered in two different ways. One, as an independent plugin from WordPress plugin repository. Second, as bundled with commercial themes for creating online stores. When bundled with a theme, the theme will have separate template files that will overwrite the default WooCommerce templates. At any case, a little customization can make your store the way you want.

1. Add Yoast Breadcrumb in Product Pages

If you are using Yoast SEO plugin on your site, it makes good sense to add the same breadcrumbs on your WooCommerce store. Navigate to “Plugins > Editor” and select “WooCommerce” plugin. Search and select “single-product.php” file and add Yoast breadcrumb code in the desired location. This will add the breadcrumb structure on all your individual product pages.

2. Speed Up Other Pages On Your Site

One of the concerns when using WooCommerce is that it will slowdown the entire site. This will not make sense, when you have hundreds of blog posts with few products to sell. In such scenario you can disable all WooCommerce related styles and scripts on all pages except products and shop pages.

Check out the article on how to speed up your WooCommerce site by disabling ajax call and WooCommerce resources on other pages.

3. Add Border to Product Data Section

The product data section (showing description and review) by default does not have any border. You can add border by adding the below CSS in live customizer under “Appearance > Customize > Additional CSS”.

.woocommerce-tabs {
border: 1px solid #e6e6e6;
padding: 30px;
}

4. Hide Product from Shop

Wanted to hide a product from the live site? Open the product in edit mode and click on the “Edit” link next to the “Catalog visibility” under “Publish” meta box.

By default all products will be shown on the shop and search result pages. You can hide the product from shop page, search result page or completely hide from the store.

5. Disabling Customer Review on a Product

By default product review is enabled on all WooCommerce products. You can enable or disable review on individual product under the “Product Data” section. Navigate to “Advanced” section and enable or disable customer review.

If you want to disable the review tab completely on all product pages then add the below CSS to your theme:

.reviews_tab {
display: none !important;
}

6. Disable Related Products

Add the below code in your functions.php file to disable related product suggestion on product pages.

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

7. Enable Secure Checkout

It is mandatory to have SSL on your site to offer secure online experience to your store visitors. This is also required to avoid showing “Not Secure” message on the browser’s address bar. Enable secure checkout option to force SSL on checkout pages under “WooCommerce > Settings > Checkout > Checkout options“.

8. Add Featured Image for Individual Product Variations

When you have a variable product, add separate featured image for each variation. Click on the “Expand” link under “Variations” tab of your variable product data.

Click on the upload image icon to add featured image for that variation. Similarly you can upload featured image for all individual product variations.

9. Add Products in Menu

This is a simple one. WordPress has a robust menu management which allows you to add any custom link to the site’s navigation menu. Go to “Appearance > Menu” and add a product to your menu. Or add  a custom link where you can link product category link in the menu with the desired label.

10. Duplicating a Product Page

When you have similar products to create, it will take time to create from scratch. WooCommerce offers an easy function to duplicate a product page. The new page will be saved as a draft which can be modified and published as a new product. You can duplicate a product under “All Products” view.

It is also possible to create a duplicate when you are editing a product in the editor under “Publish” meta box.